fix: update layout and import Chirpy template files

_includes/comments/disqus.html

@@ -0,0 +1,50 @@
+<!-- The Disqus lazy loading. -->
+
+<div id="disqus_thread">
+  <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+</div>
+
+<script type="text/javascript">
+  var disqus_config = function () {
+    this.page.url = '{{ page.url | absolute_url }}';
+    this.page.identifier = '{{ page.url }}';
+  };
+
+  {%- comment -%} Lazy loading {%- endcomment -%}
+  var disqus_observer = new IntersectionObserver(
+    function (entries) {
+      if (entries[0].isIntersecting) {
+        (function () {
+          var d = document,
+            s = d.createElement('script');
+          s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+          s.setAttribute('data-timestamp', +new Date());
+          (d.head || d.body).appendChild(s);
+        })();
+
+        disqus_observer.disconnect();
+      }
+    },
+    { threshold: [0] }
+  );
+
+  disqus_observer.observe(document.getElementById('disqus_thread'));
+
+  {%- comment -%} Auto switch theme {%- endcomment -%}
+  function reloadDisqus() {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
+      if (typeof DISQUS === 'undefined') {
+        return;
+      }
+
+      if (document.readyState == 'complete') {
+        DISQUS.reset({ reload: true, config: disqus_config });
+      }
+    }
+  }
+
+  if (document.getElementById('mode-toggle')) {
+    window.addEventListener('message', reloadDisqus);
+  }
+</script>

_includes/comments/giscus.html

@@ -0,0 +1,71 @@
+<!-- https://giscus.app/ -->
+<script type="text/javascript">
+  (function () {
+    const origin = 'https://giscus.app';
+    const lightTheme = 'light';
+    const darkTheme = 'dark_dimmed';
+
+    let initTheme = lightTheme;
+    const html = document.documentElement;
+
+    if (
+      (html.hasAttribute('data-mode') &&
+        html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = darkTheme;
+    }
+
+    let lang = '{{ site.comments.giscus.lang | default: lang }}';
+    {%- comment -%} https://github.com/giscus/giscus/tree/main/locales {%- endcomment -%}
+    if (lang.length > 2 && !lang.startsWith('zh')) {
+      lang = lang.slice(0, 2);
+    }
+
+    let giscusAttributes = {
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ site.comments.giscus.repo}}',
+      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
+      'data-category': '{{ site.comments.giscus.category }}',
+      'data-category-id': '{{ site.comments.giscus.category_id }}',
+      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
+      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
+      'data-lang': lang,
+      'data-loading': 'lazy',
+      crossorigin: 'anonymous',
+      async: ''
+    };
+
+    let giscusScript = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusScript.setAttribute(key, value)
+    );
+    document.getElementById('tail-wrapper').appendChild(giscusScript);
+
+    addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
+        {%- comment -%} global theme mode changed {%- endcomment -%}
+        const mode = event.data.message;
+        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+
+        const message = {
+          setConfig: {
+            theme: theme
+          }
+        };
+
+        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, origin);
+      }
+    });
+  })();
+</script>

_includes/comments/utterances.html

@@ -0,0 +1,49 @@
+<!-- https://utteranc.es/ -->
+<script
+  src="https://utteranc.es/client.js"
+  repo="{{ site.comments.utterances.repo }}"
+  issue-term="{{ site.comments.utterances.issue_term }}"
+  crossorigin="anonymous"
+  async
+></script>
+
+<script type="text/javascript">
+  (function () {
+    const origin = 'https://utteranc.es';
+    const lightTheme = 'github-light';
+    const darkTheme = 'github-dark';
+    let initTheme = lightTheme;
+    const html = document.documentElement;
+
+    if (
+      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = darkTheme;
+    }
+
+    addEventListener('message', (event) => {
+      let theme;
+
+      {%- comment -%} credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> {%- endcomment -%}
+      if (event.origin === origin) {
+        {%- comment -%} page initial {%- endcomment -%}
+        theme = initTheme;
+      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+        {%- comment -%} global theme mode changed {%- endcomment -%}
+        const mode = event.data.message;
+        theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+      } else {
+        return;
+      }
+
+      const message = {
+        type: 'set-theme',
+        theme: theme
+      };
+
+      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
+      utterances.postMessage(message, origin);
+    });
+  })();
+</script>