feat: 添加 giscus 作为评论系统

Author: mumu-lhl

.github/workflows/ci.yml

@@ -39,6 +39,7 @@ jobs:
           pip install \
             mkdocs-materialx \
             mkdocs-git-revision-date-localized-plugin \
-            mkdocs-git-committers-plugin-2
+            mkdocs-git-committers-plugin-2 \
+            mkdocs-minify-plugin
 
       - run: mkdocs gh-deploy --force

docs/.meta.yml

@@ -0,0 +1 @@
+comments: true

mkdocs.yml

@@ -13,6 +13,8 @@ theme:
     - search.suggest
     - search.share
 
+  custom_dir: overrides
+
   palette:
     - media: "(prefers-color-scheme)"
       toggle:
@@ -45,3 +47,11 @@ plugins:
       lang: zh
 
   - optimize
+  - meta
+  - minify:
+      minify_html: true
+      minify_js: true
+      minify_css: true
+      htmlmin_opts:
+        remove_comments: true
+      cache_safe: true

overrides/partials/comments.html

@@ -0,0 +1,55 @@
+{% if page.meta.comments %}
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+<script
+    src="https://giscus.app/client.js"
+    data-repo="mumu-lhl/t1d-survival-guide"
+    data-repo-id="R_kgDORQE96Q"
+    data-category="Announcements"
+    data-category-id="DIC_kwDORQE96c4C22EB"
+    data-mapping="pathname"
+    data-strict="0"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="bottom"
+    data-theme="preferred_color_scheme"
+    data-lang="zh-CN"
+    crossorigin="anonymous"
+    async
+></script>
+
+<!-- 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" ? "transparent_dark" : "light";
+
+        // Instruct Giscus to set theme
+        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"
+                        ? "transparent_dark"
+                        : "light";
+
+                // Instruct Giscus to change theme
+                var frame = document.querySelector(".giscus-frame");
+                frame.contentWindow.postMessage(
+                    { giscus: { setConfig: { theme } } },
+                    "https://giscus.app",
+                );
+            }
+        });
+    });
+</script>
+{% endif %}