メインコンテンツまでスキップ

Docusaurusのページに固有IDをつける

はじめに

Docusaurusで扱うコンテンツには「Pages」「Docs」「Blog」の3種類があります。Docsを構成するウェブページには自動的に固有のID(正確にはCSS class属性)が個々に割り振られますが、Pagesを構成するウェブページの場合は手動で設定する必要があります。

フロントマター

Pagesを構成するウェブページに固有のID(正確にはCSS class属性)をつけるには、フロントマターを使用します。

フロントマターとは、.mdファイルにおけるメタデータ記入欄のことです。一般的には筆者名や最終更新日が記入されます。フロントマターになにも記入せずとも問題はありませんが、使いこなせればとても便利なものです。

作例

たとえば、Docusaurusで作られたウェブサイトのトップページにtoppageというCSS class属性を設定したい場合は、トップページの原稿(.mdファイル)の先頭行に以下の行を追加してください。フロントマターは必ず.mdファイルの先頭に記述する必要があります。

書換前

# タイトル

## 章タイトル

本文

書換後

---
wrapperClassName: toppage
---
# タイトル

## 章タイトル

本文

ビルドされたHTMLファイル

おわりに

wrapperClassNameによってページに付与されるのは、CSS ID属性ではなくCSS class属性です。よって複数のページに同じCSS class属性を設定することも可能です。

Docusaurusにおけるフロントマターの詳細な仕様については下記URLを参照してください(英文)。

以上