[TOC]  

 รู้หรือไม่? ผู้อ่านจะตัดสินใจจาก 3 บรรทัดแรกที่อ่านบทความว่าจะอ่านเนื้อหาต่อไปจนจบหรือไม่

บทความของคุณอาจน่าสนใจแต่ถ้ายาวเกินไป ไม่มีจุดดึงความสนใจก็จะทำให้คนอ่านไม่อยากอ่านต่อ ซึ่งทำให้ความตั้งใจในการสร้างบทความของคุณเสียเปล่า 

ดังนั้น Table of Content หรือ สารบัญ คือหนึ่งตัวช่วยให้ผู้อ่านรู้ว่าเราสื่อสารอะไร และไปยังเนื้อหาที่เขาต้องการได้ตรงประเด็น 

วิธีการทำ Table of Content ง่ายๆมีดังนี้

ขั้นตอนที่ 1 เริ่มจากการพิม [TOC]

เริ่มจากการพิมพ์ [ TOC ] ในตำแหน่งที่ต้องการให้มี Table of Content  โดยไม่ต้องเว้นวรรคคำ และทำการลากคลุมข้อความนั้นแล้ว

เลือก Size เป็น Default

Screenshot-from-2018-07-25-09_22_24.png

ขั้นตอนที่ 2 สร้างหัวข้อใหญ่

หัวข้อใดต้องการให้เป็นหัวข้อใหญ่ในสารบัญ ให้ทำการลากคลุมข้อความ หรือประโยคที่ต้องการ 

แล้วเลือกเป็น Heading1 และ ทำเป็น Font Bold (อักษรหนา) ดังภาพ

38391174_1805932499444152_7604200779653578752_n.png

ขั้นตอนที่ 3 สร้างหัวข้อย่อย

ถ้าต้องการหัวข้อย่อยๆในสารบัญด้วยก็ให้ทำการลากคลุมข้อความ หรือประโยคที่ต้องการนั้น 

แล้วเลือกเป็น Heading2 หรือ Heading3  หรือ Heading4 ดังภาพ

38273576_1805947249442677_3901693027789307904_n.png

 ** หัวข้อใหญ่ คือ หมายเลข 1  และหัวข้อย่อย คือ หมายเลข 2 ในภาพด้านล่าง

Screenshot-from.png

ขั้นตอนที่ 4 จัดเรียงเนื้อหา

ส่วนเนื้อหาในหัวข้อต่างๆเมื่อพิมพ์เสร็จเรียบร้อยแล้วให้ ทำการลากคลุมส่วนของเนื้อหานั้นๆ แล้วเลือกเป็น  Paragraph

ดังภาพ

38493459_1805956209441781_6081421091224420352_n.png 

ขั้นตอนที่ 5 ได้ Table of Content ที่ต้องการ

เมื่อจัดการกับหัวข้อ และเนื้อหาต่างๆเสร็จเรียบร้อยแล้วทำการ Save และ Preview ก็จะได้ Table of Content และเมื่อกดไปที่หัวข้อต่างๆ ก็จะทำการค้นหาเนื้อหาที่อยู่ในหัวข้อนั้นๆ ดังรูป 

ในส่วนของ Zendesk Guide Admin (ทำครั้งเดียว)

มีขั้นตอนการเพิ่ม Code ดังนี้ 

ขั้นตอนที่ 1 แก้ไข File style.css

ให้เพิ่ม code css ที่ File style.css ดังรูป 

ขั้นตอนที่ 2  แก้ไข File script.js

เพิ่ม code จาก https://netway.co.th/templates/netwaybysidepad/table_of_content.js 

ที่ File script.js   ดังรูป

 

ขั้นตอนที่ 3 แก้ไข File article_page.hbs 

  เพิ่ม code ใน <div class="article-content"> ที่ File article_page.hbs โดยเพิ่ม code ดังนี้

<div class="article-body content" id="kbContent" >{{article.body}}</div>

ซึ่งจากเดิมเป็นดังรูปด้านล่าง 

 

เมื่อเพิ่ม code แล้ว จะได้ดังรูป 

ขั้นตอนที่ 4  Save File ที่แก้ไข

เมื่อเพิ่ม code ทั้งหมดเรียบร้อยแล้วให้ Save file ที่ได้แก้ไข และ Preview