跳转至

Jie's Wiki

增加评论系统

增加评论系统

步骤

在GitHub上创建一个仓库打开 Discussions功能，用于存放评论数据。可以是现在的仓库，也可以是新建的仓库。

在设置中 Features选项卡下找到 Discussions，点击 Enable discussions for this repository 启用 Discussions 功能。

在 mkdocs.yml 中添加评论模版配置

theme:
  name: material
  custom_dir: overrides #主要是这一行-自定义目录内容-评论等html模版文件

增加 overrides 目录，并创建 partials 文件夹，在 partials 文件夹下创建 comments.html 文件，内容如下：

overrides/partials/comments.html

<!-- comments.html -->
{% if page.meta.comments %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
<!-- Insert generated snippet here -->
<script
  src="https://giscus.app/client.js"
  data-repo="KkaiFang/my_notes"
  data-repo-id="你的仓库ID"
  data-category="General"
  data-category-id="你的分类ID"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="top"
  data-theme="noborder_light"
  data-lang="zh-CN"
  data-loading="lazy"
  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 %}

其中下面这段是在 https://giscus.app/zh-CN/ 生成的代码，需要替换成你自己的仓库信息：

<script
  src="https://giscus.app/client.js"
  data-repo="KkaiFang/my_notes"
  data-repo-id="你的仓库ID"
  data-category="General"
  data-category-id="你的分类ID"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="top"
  data-theme="noborder_light"
  data-lang="zh-CN"
  data-loading="lazy"
  crossorigin="anonymous"
  async
></script>

参考

评论