Material for MkDocs のインストール

MkDocsではサイトの外観を変更できます。
MkDocs Themes にサンプルがあります。
本サイトでは見栄えがよくマテリアルデザインにも対応する人気テーマのMaterial for MkDocs を紹介します。 本サイトもMaterialを使用しています。

mkdocs-materialのインストール

Mkdocsと同じように pip install mkdocs-material でインストールします。

C:\Python>py -m pip install mkdocs-material
(処理省略)

mkdocs.ymlへの適用

mkdocs.ymlファイルに以下の内容を追記します。

theme:
    name: 'material'

ビルドすることでデザインが変化します。

• mkdocs-material適用前
• 
• MkDocs-Material適用後
• 

Materialの拡張設定

Materialテーマは他にも設定変更ができます。 本サイトではmkdocs.ymlの設定例について利用頻度の高いものを日本語のコメントにて紹介します。
詳細は公式サイトのGetting started - Material for MkDocs を参照ください。

theme:
    # 使用するテーマ名
    name: 'material'
    # 標準言語。日本語の場合は'ja'（jpではない）
    language: 'ja'
    # サイトヘッダー画像
    logo: 'images/logo.svg'
    # サイトアイコン画像
    favicon: 'assets/images/favicon.ico'
    # 使用可能色は定義された21色
    #    red, pink, purple, deep purple, indigo, blue, light blue, cyan,
    #    teal,  green, light green, lime, yellow, amber, orange,
    #    deep orange,   brown, grey, blue grey, white
    palette:
        # ヘッダーの色。標準は'indigo'
        primary: 'indigo'
        # ハイライト文字の色。標準は'indigo'。
        accent: 'indigo'
    # フォント。'font: false'にするとGoogleフォントを使用しなくなる
    font:
        text: 'Roboto'
        code: 'Roboto Mono'

extra:
    # Materialデザインのアイコン拡張
    logo:
        # 利用可能なアイコンは以下を参照
        # https://material.io/resources/icons/?icon=description&style=baseline
        icon: 'developer_board'
    # ウェブアプリマニフェストを有効化
    # Web App Manifestについては他サイトを参照
    manifest: 'manifest.webmanifest'

markdown_extensions:
    # !!! を使って文書内に見やすいスタイルを使う（Markdownのサンプルを参照）
    - admonition
    # [^1] を使って注釈を使う（Markdownのサンプルを参照）
    - footnotes
    # コードハイライトを使う
    - codehilite:
        # 言語を表記する
        guess_lang: true
        # 行数を表示
        linenums: true