add comment system

layouts/partials/comments/giscus.html

@@ -0,0 +1,54 @@
+<script>
+  (function () {
+    const themeMapper = Theme.getThemeMapper('light', 'dark_dimmed');
+    const initTheme = themeMapper[Theme.visualState];
+
+    let lang = '{{ .Site.Params.comments.giscus.lang | default .Site.Language.Lang }}';
+    {{/* https://github.com/giscus/giscus/tree/main/locales */}}
+    if (lang.length > 2 && !lang.startsWith('zh')) {
+      lang = lang.slice(0, 2);
+    }
+
+    let giscusAttributes = {
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ .Site.Params.comments.giscus.repo }}',
+      'data-repo-id': '{{ .Site.Params.comments.giscus.repo_id }}',
+      'data-category': '{{ .Site.Params.comments.giscus.category }}',
+      'data-category-id': '{{ .Site.Params.comments.giscus.category_id }}',
+      'data-mapping': '{{ .Site.Params.comments.giscus.mapping | default "pathname" }}',
+      'data-strict': '{{ .Site.Params.comments.giscus.strict | default "0" }}',
+      'data-reactions-enabled': '{{ .Site.Params.comments.giscus.reactions_enabled | default "1" }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ .Site.Params.comments.giscus.input_position | default "bottom" }}',
+      'data-lang': lang,
+      'data-loading': 'lazy',
+      crossorigin: 'anonymous',
+      async: ''
+    };
+
+    let giscusNode = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusNode.setAttribute(key, value)
+    );
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement("beforebegin", giscusNode);
+
+    addEventListener('message', (event) => {
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        const newTheme = themeMapper[Theme.visualState];
+
+        const message = {
+          setConfig: {
+            theme: newTheme
+          }
+        };
+
+        const giscus =
+          document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, 'https://giscus.app');
+      }
+    });
+  })();
+</script>