DevSite 網頁的頂端標題必須是 <h1>
。網頁內文不得包含其他 <h1>
,以免造成非視覺瀏覽器的混淆。nbgenerate
工具可將 DevSite HTML 和 Markdown 內容和範本轉換為與 Colab 相容的 Jupyter 筆記本。
大小
標題 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'}
在目錄中加入表格標題
您也可以在表格標題 (<th>
) 中放入 <h2>
或 <h3>
,強制將表格納入目錄。在表格標題中,<h2>
和 <h3>
的樣式與一般文字相同,因此讀者無法分辨。
點選即可複製的連結
在說明文件頁面 (不是像大多數到達網頁那樣的「全寬」頁面) 中,除了 <h1>
以外的標題也會顯示連結複製按鈕,但只有在游標懸停在標題上時才會顯示。
如要停用特定標題的這個按鈕,請將 class="no-link"
套用至標題。
標題 4
標題 5
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>
標題前方加上連續編號,以便將含有複雜內容的部分指定為多步驟程序中的不同步驟,請在每個標題前方加上編號類別。
第一個編號標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。
第二個編號標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。
第三個編號標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。
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.
編號副標題
如要在 <h2>
標題後面的 <h3>
標題前方加上連續編號,請在每個 <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.
編號標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。
編號子標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。
編號子標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。
編號子標題
複雜內容,包含段落、清單、表格、圖片、影片和小工具。