เขียนเนื้อหา

การจัดรูปแบบ Markdown และ HTML

เนื้อหาส่วนใหญ่ใน DevSite เขียนด้วย Markdown ซึ่งเป็นรูปแบบการเขียน ที่ออกแบบมาให้เรียบง่ายและอ่านง่ายในข้อความธรรมดา DevSite จะแปลงมาร์กดาวน์เป็น HTML โดยอัตโนมัติเพื่อแสดงบนเว็บ

หากต้องการดู Markdown ที่เทียบเท่ากับองค์ประกอบ HTML ทั่วไปของ Google ให้ใช้ ชีตโกงที่ go/g3mark-cheat คุณเข้าถึงเอกสารประกอบฉบับเต็มสำหรับมาร์กดาวน์ของ Google หรือที่เรียกว่า CommonMark ได้ที่นี่

ลองดูตัวอย่างต่อไปนี้

HTML	Markdown
`<b>bold text</b> <strong>bold text</strong>`	`bold text`
`<i>italic text</i> <em>italic text</em>`	`italic text`
`<h2>Heading 2</h2> <h3>Heading 3</h3>`	`## Heading 2 ### Heading 3`
`<a href="url.com">Link</a>`	`[Link](url.com)`
`<p>paragraph</p>`	`Paragraph`
`<ol> <li>Ordered list first item</li> <li>Second item</li> </ol>`	`1. Ordered list first item 1. Second item 1. Third item`
`<ul> <li>Unordered list first item</li> <ul> <li>Nested list item</li> </ul> <li>Second item</li> </ul>`	`* Unordered list first item * Nested item (indent 4-spaces) * Second item`

กรณีที่ควรใช้ HTML แทน Markdown

เราจะไม่ใช้มาร์กดาวน์ในการเขียนรายการบางอย่าง ซึ่งได้แก่

รวมไฟล์: ไฟล์ที่รวมทั้งหมดควรเป็นไฟล์ HTML และไม่ควรมีองค์ประกอบที่เขียนในมาร์กดาวน์ ดูคำแนะนำในการสร้าง ไฟล์ที่รวมได้ที่นำเนื้อหาในหน้าต่างๆ มาใช้ซ้ำ
ตาราง: ตาราง Markdown จัดรูปแบบและดูแลรักษาได้ยาก ดังนั้นเราจึงใช้ HTML สำหรับตาราง แม้ในไฟล์ Markdown ก็ตาม
รูปภาพ: การใช้ HTML สำหรับรูปภาพจะช่วยให้มีความยืดหยุ่นมากขึ้นสำหรับรูปแบบและตำแหน่งของรูปภาพ ดูคำแนะนำในการเผยแพร่ DevSite สำหรับรูปภาพ
Zippies: Zippies หรือที่รู้จักกันในชื่อวิดเจ็ตที่ขยายได้ใน Devsite ต้องอยู่ใน HTML และอยู่ในแท็ก <div>

รูปแบบเนื้อหาที่พบบ่อย

ลิงก์ที่เปิดในแท็บใหม่

โปรดทำตามหลักเกณฑ์ ลิงก์ เพื่อดูว่าเมื่อใดควรเปิดลิงก์ในแท็บเดียวกันหรือแท็บใหม่ หากต้องการเปิด ลิงก์ในแท็บใหม่ คุณสามารถจัดรูปแบบลิงก์ได้ดังนี้

Markdown

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

ตาราง

ดูประเภทตารางที่ Devsite มีและ HTML ที่เกี่ยวข้องได้ที่ คู่มือการเผยแพร่ Devsite สำหรับ ตาราง

เคล็ดลับ

หากต้องการให้ตารางไม่มีเส้นขอบ ให้ใช้ class="columns"
หากต้องการให้ตารางมีระยะห่างและเส้นแบ่ง (เช่น หน้านี้) ให้ใช้ class="columns extra-padding" และใช้แท็ก <hr> ในแถวแยก ระหว่างแถวเนื้อหา

ซิปที่ขยายได้

สำหรับ Workspace เราใช้คลาส arrow-icon เพื่อจัดรูปแบบ Zippy ต่อไปนี้ เป็นตัวอย่างของวิดเจ็ตแบบซิป (วิดเจ็ตที่ขยายได้) สำหรับ Workspace

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

หากต้องการใช้ตัวอย่างนี้ ให้แทนที่ตัวแปรต่อไปนี้

UNIQUE_ZIPPY_ID: ป้อนรหัสที่อธิบายได้และไม่ซ้ำกันเพื่อให้คุณชี้ไปยังไฟล์ ZIP ได้โดยตรง เช่น direct-admin-access
ZIPPY_HEADING: ป้อนข้อความที่ผู้ใช้ควรเห็นก่อนขยาย Zippy
YOUR_CONTENT: ป้อนเนื้อหาที่ผู้ใช้ควรเห็นเมื่อขยาย Zippy

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิดเจ็ตที่ขยายได้ของ DevSite ได้ที่คู่มือการเผยแพร่ DevSite ในส่วนวิดเจ็ต: ขยายได้

รวมเนื้อหาที่แชร์

หากต้องการนำเนื้อหาไปใช้ซ้ำในหลายหน้า คุณสามารถใช้การรวม ซึ่งเป็น DevSite เวอร์ชันที่ใช้ข้อมูลโค้ดในบทความหลายบทความใน Composer

ดูคำแนะนำในการสร้างไฟล์รวมและใช้การรวมในเนื้อหาได้ที่นำเนื้อหาในหน้าต่างๆ กลับมาใช้ซ้ำ

เพิ่ม Anchor ที่กำหนดเองในส่วนหัว

DevSite จะสร้างแอตทริบิวต์รหัส HTML สำหรับส่วนหัวทุกรายการ หากต้องการรักษาความสอดคล้อง ในกรณีที่ส่วนหัวมีการเปลี่ยนแปลง คุณสามารถเพิ่มรหัส Anchor ที่กำหนดเองลงในส่วนหัวได้โดย เพิ่ม {:#your-id} ข้างข้อความส่วนหัว เช่น

## Apply filters to your search results {:#apply-filters}

เคล็ดลับ: หากต้องการสร้างรหัสลิงก์ยึดที่กำหนดเองสำหรับส่วนหัวทั้งหมดในไฟล์โดยอัตโนมัติ ให้กด Command (\⌘) + H (Ctrl + H ใน Windows) ระบบจะไม่เปลี่ยนแปลงรหัส Anchor ที่กำหนดเองที่มีอยู่

ดูข้อมูลเพิ่มเติมได้ที่คู่มือการเผยแพร่ DevSite สำหรับส่วนหัว ของรหัส