PaperMod添加Giscus评论

Table of contents

步骤 1 新建 giscus.html

新建文件 layouts/partials/features/comments/giscus.html

{{ $id := .id | default "giscus-comments" }} {{- $langMap := dict "zh" "zh-CN"
"zh-tw" "zh-TW" "zh-hk" "zh-HK" "ar" "ar" "be" "be" "bg" "bg" "ca" "ca" "cs"
"cs" "da" "da" "de" "de" "el" "gr" "eo" "eo" "es" "es" "eu" "eu" "fa" "fa" "fr"
"fr" "he" "he" "hu" "hu" "id" "id" "it" "it" "ja" "ja" "km" "kh" "ko" "ko" "nl"
"nl" "pl" "pl" "pt" "pt" "ro" "ro" "ru" "ru" "th" "th" "tr" "tr" "uk" "uk" "uz"
"uz" "vi" "vi" -}} {{- $giscusLang := index $langMap site.Language.Lang |
default "en" -}}

<div id="{{ $id }}" class="giscus-container"></div>

<script>
  const getCurrentGiscusTheme = () => {
    const theme = document.documentElement.getAttribute("data-theme");
    return theme === "dark" ? "dark_dimmed" : "gruvbox";
  };
  const updateGiscusTheme = () => {
    const iframe = document.querySelector("iframe.giscus-frame");
    if (!iframe) return;

    iframe.contentWindow.postMessage(
      {
        giscus: { setConfig: { theme: getCurrentGiscusTheme() } },
      },
      "https://giscus.app"
    );
  };
  document.addEventListener("DOMContentLoaded", () => {
    const attrs = {
      src: "https://giscus.app/client.js",
      "data-repo": "{{ .Site.Params.comments.giscus.repo }}",
      "data-repo-id": "{{ .Site.Params.comments.giscus.repoId }}",
      "data-category": "{{ .Site.Params.comments.giscus.category }}",
      "data-category-id": "{{ .Site.Params.comments.giscus.categoryId }}",
      "data-mapping": "{{ .Site.Params.comments.giscus.mapping }}",
      "data-strict": "{{ .Site.Params.comments.giscus.strict }}",
      "data-reactions-enabled":
        "{{ .Site.Params.comments.giscus.reactionsEnabled }}",
      "data-emit-metadata": "{{ .Site.Params.comments.giscus.emitMetadata }}",
      "data-input-position": "{{ .Site.Params.comments.giscus.inputPosition }}",
      "data-theme": getCurrentGiscusTheme(),
      "data-lang": "{{ $giscusLang }}",
      "data-loading": "lazy",
      crossorigin: "anonymous",
      async: "",
    };
    const newScript = document.createElement("script");
    Object.entries(attrs).forEach(([k, v]) => newScript.setAttribute(k, v));
    document.querySelector("#giscus-comments").appendChild(newScript);
    const themeButtons = document.querySelectorAll("#theme-toggle");
    themeButtons.forEach(btn =>
      btn.addEventListener("click", () => {
        setTimeout(updateGiscusTheme, 60);
      })
    );
  });
</script>layouts/partials/features/comments/giscus.html

新建文件 layouts/partials/comments.html

{{- $commentsConfig := .Site.Params.comments -}} {{- $commentSystem :=
$commentsConfig.system -}}

<div class="comments-container">
  {{- if $commentsConfig.enabled -}} {{- if eq $commentSystem "giscus" -}} {{
  partial "features/comments/giscus.html" (dict "Site" $.Site "Page" $ "id"
  "giscus-comments") }} {{- else -}}
  <p style="background: yellow; color: red; text-align: center; padding: 10px">
    Oh! Unsupported comment system.
  </p>
  {{- end -}} {{- end -}}
</div>layouts/partials/comments.html

步骤 3 添加评论组件

根据自己的需要，在对应的页面添加评论组件，以 single.html 为了，在 </footer> 标签下添加

    {{- end }}
  </footer>

  {{- if (.Param "comments") }} 
  {{- partial "comments.html" . }} 
  {{- end }}  
</article>layouts/_default/single.html

步骤 4 维护 params.yml

comments:
  enabled: true
  system: "giscus"
  giscus:
    repo: "你的 repo"
    repoId: "你的 repoId"
    categoryId: "你的 categoryId"
    category: "Announcements"
    mapping: "pathname"
    strict: "0"
    reactionsEnabled: "1"
    emitMetadata: "0"
    inputPosition: "top"
    lang: "zh-CN"config/production/params.yml

（完）

如果这篇文章刚好帮到了你，欢迎请我喝杯咖啡！