ส่วนหัว

ส่วนหัวด้านบนสุดของหน้า DevSite ต้องเป็น <h1> ส่วนเนื้อหาในหน้าต้องไม่มี <h1> อื่นเพื่อไม่ให้เบราว์เซอร์ที่ไม่ใช่แบบภาพสับสน เครื่องมือ nbgenerate จะแปลงเนื้อหาและเทมเพลต HTML และ Markdown ของ DevSite เป็นสมุดบันทึก Jupyter ที่ใช้ร่วมกับ Colab ได้

ขนาด

หัวข้อ 1

หัวข้อ 2

หัวข้อ 3

ส่วนหัว 4

ส่วนหัว 5
ส่วนหัว 6

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Markdown

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

สารบัญ

ใน DevSite ระบบจะเพิ่ม <h2> และ <h3> ลงในสารบัญ (ToC) "ในหน้านี้" โดยอัตโนมัติ

ซ่อนส่วนหัวจากสารบัญ

หากไม่ต้องการให้ระบบเพิ่มส่วนหัว (เช่น "ส่วนหัว 2" และ "ส่วนหัว 3" ในส่วนด้านบน ซึ่งไม่ปรากฏในสารบัญ) ให้ใช้ class="hide-from-toc"

หัวข้อ 2

หัวข้อ 3

HTML

<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>

Markdown

## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}

ปรับแต่งข้อความหัวข้อในสารบัญ

หากต้องการให้ข้อความในสารบัญแตกต่างจากส่วนหัวจริง (เช่น ส่วนนี้) ให้ตั้งค่าแอตทริบิวต์ data-text ในส่วนหัวดังนี้

หัวข้อ 2

HTML

<h2 data-text="Custom text for the ToC">Heading 2</h2>

Markdown

## Heading 2 {: data-text='Custom text for the ToC'}

ใส่ส่วนหัวภายในตารางในสารบัญ

นอกจากนี้ คุณยังใส่ <h2> หรือ <h3> ไว้ภายในส่วนหัวของตาราง (<th>) เพื่อบังคับให้ตารางแสดงในสารบัญได้ด้วย <h2> และ <h3> ในส่วนหัวของตารางจะมีการจัดรูปแบบเหมือนกับข้อความปกติ ผู้อ่านจึงแยกไม่ออก

ในหน้าเอกสารประกอบ (ไม่ใช่หน้า "แบบเต็มความกว้าง" เช่น หน้า Landing Page ส่วนใหญ่) ส่วนหัวที่ไม่ใช่ <h1> จะมีปุ่มคัดลอกลิงก์ด้วย ซึ่งจะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือส่วนหัวเท่านั้น

หากต้องการปิดใช้ปุ่มนี้สำหรับส่วนหัวที่เฉพาะเจาะจง ให้ใช้ class="no-link" กับส่วนหัวนั้น

HTML

<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>

Markdown

## Heading 4 {:.no-link}
### Heading 5 {:.no-link}

หากต้องการบังคับให้ปุ่มลิงก์ปรากฏในส่วนหัวที่ปกติแล้วจะไม่มีปุ่มนี้ (เช่น <h1> หรือส่วนหัวใดก็ตามในหน้าแบบเต็มความกว้าง) ให้เพิ่ม class="add-link" ลงในส่วนหัว

หัวข้อ 1

HTML

<h1 class="add-link">Heading 1</h1>

Markdown

# Heading 1 {:.add-link}

หัวเรื่องที่มีลําดับเลข

หากต้องการใส่ตัวเลขตามลำดับไว้หน้าส่วนหัว <h2> เพื่อกำหนดส่วนที่มีเนื้อหาซับซ้อนเป็นขั้นตอนที่แตกต่างกันในกระบวนการแบบหลายขั้นตอน ให้เพิ่มคลาสที่มีตัวเลขกำกับไว้ในส่วนหัวแต่ละส่วน

หัวข้อที่ 1

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต

หัวข้อที่ 2 ที่มีลําดับเลข

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต

หัวเรื่องที่มีลําดับที่ 3

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต

HTML

<h2 class="numbered">First numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Second numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Third numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Markdown

## First numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Second numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Third numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

หัวเรื่องย่อยที่มีลําดับเลข

หากต้องการใส่ตัวเลขนำหน้าหัวเรื่อง <h3> ที่ตามหลังหัวเรื่อง <h2> ให้เพิ่มคลาสที่มีตัวเลขกำกับไว้ให้กับหัวเรื่อง <h3> แต่ละรายการ

HTML

<h2 class="numbered">Numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Markdown

## Numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

ส่วนหัวที่มีลําดับเลข

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต

ส่วนหัวย่อยที่มีหมายเลข

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต

ส่วนหัวย่อยที่มีหมายเลข

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต

ส่วนหัวย่อยที่มีหมายเลข

เนื้อหาที่ซับซ้อนซึ่งประกอบด้วยย่อหน้า รายการ ตาราง รูปภาพ วิดีโอ วิดเจ็ต