コメント機能
mkdocs-materialにはコメント機能がありません。コメント機能を追加するためには、giscusなどの外部サービスを利用する必要があります。
giscusの導入
giscusはGitHubのDiscussionsを利用してコメント機能を提供するサービスです。
giscusの設定
- giscusにアクセスします。
Installをクリックします。- GitHubアカウントを選択します。
Only select repositoriesをクリックします。- コメント機能を追加したいリポジトリを選択します。
Installをクリックします。- giscusにアクセスします。
- リポジトリ等の設定を行います。
- 「giscusを有効にする」内のコードをコピーします。
mkdocs.ymlに以下のコードを追加します。
| theme:
custom_dir: overrides
|
overridesディレクトリを作成します。overridesディレクトリにmain.htmlを作成します。- 以下のコードを記述します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 | {% extends "base.html" %}
{% block content %}
{{ super() }}
<!-- Giscus -->
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
<!-- Replace with generated snippet -->
<!-- Synchronize Giscus theme with palette -->
<script>
var giscus = document.querySelector("script[src*=giscus]")
/* Set palette on initial load */
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"
giscus.setAttribute("data-theme", theme)
}
/* Register event handlers after documented loaded */
document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() {
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"
/* Instruct Giscus to change theme */
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
})
})
</script>
{% endblock %}
|
<!-- Replace with generated snippet -->の部分にコピーしたコードを貼り付けます。mkdocs serveを実行します。- コメント機能が表示されていることを確認します。