Customize Theme

テーマの上書き

• Styling Your Docs - MkDocs

既存テーマを上書きしたいときは、それをDLしてきて直接編集するのではなく、 overrides という機能を使うのがよい。

projectディレクトリに overrides ディレクトリを作り（ディレクトリ名は任意）、その中に main.html を作成する。

project/
    mkdocs.yml
    docs/
    overrides/
        main.html

mkdocs.yml には次のように記述する；

theme:
  name: material
  custom_dir: overrides

ページタイトルの変更

各ページのタイトルを変更するには、 htmltitle block を上書きする。

/overrides/main.html に以下のように記述する；

{% extends "base.html" %}

{% block htmltitle %}
  <title>Custom title goes here</title>
{% endblock %}

script の追加

scriptの追加は、 script block を /overrides/main.html に記述すればいい。

Tip

<script> に type を指定したいなどの特別な事情がない場合は、 mkdocs.yml の extra_javascript から簡単にjsを追加できる。

script block にはテーマ（base.html）で既にいくつか記述がある。

それを無かったことにして上書きするのではなく、単にscriptを追加したいだけであれば、 super() を使うことで親（base.html）にある記述を呼び出すことができる。

つまり、/overrides/main.html には以下のように記述すれば良い；

{% extends "base.html" %}

{% block scripts %}
  {{ super() }}

  <script>
    hoge hoge
  </script>
{% endblock %}

---

最終更新日: July 12, 2021 08:12:48

コメント