Migrate comment component from utterances to giscus.

Author: ramsayleung

config.yml

@@ -1,5 +1,5 @@
 baseURL: https://ramsayleung.github.io
-title: "In Pursuit of Hubris"
+title: "In Pursuit of Simplicity"
 paginate: 5
 theme: PaperMod
 

content/zh/post/2024/hugo评论组件自适应博客暗黑主题.md

@@ -87,7 +87,7 @@ function getCurrentTheme() {
 
 ```js
 function loadUtterances(darkMode=false) {
-    const commentContainer = document.getElementById("comments-utteranc");
+    const commentContainer = document.getElementById("comments-giscus");
     if (commentContainer !== null) {
         commentContainer.innerHTML = ''
         const commentScript = document.createElement("script");

layouts/partials/comments.html

@@ -1,6 +1,6 @@
 <section>
   <h2>Comments</h2>
-  <div id="comments-utteranc"></div>
+  <div id="comments-giscus"></div>
 </section>
 
 <script type="text/javascript">
@@ -9,35 +9,41 @@ <h2>Comments</h2>
   return document.documentElement.getAttribute('data-theme') || document.body.classList.contains('dark') ? 'dark' : 'light';
 }
 
-function loadUtterances(darkMode=false) {
-  const commentContainer = document.getElementById("comments-utteranc");
+function loadComment(darkMode=false) {
+  const currentUrl = URL.parse(window.location.href); 
+  const paths = currentUrl.pathname.split('/').filter(x => x!= '');
+  const isChinese = paths.length > 0 && paths[0] == "zh";
+  const commentContainer = document.getElementById("comments-giscus");
   if (commentContainer !== null) {
     commentContainer.innerHTML = ''
     const commentScript = document.createElement("script");
-    commentScript.setAttribute("id", "utteranc");
-    commentScript.setAttribute("src", "https://utteranc.es/client.js");
+    commentScript.setAttribute("src", "https://giscus.app/client.js");
     commentScript.setAttribute("data-repo", "ramsayleung/comment");
-    commentScript.setAttribute("data-category", "Announcements");
+    commentScript.setAttribute("data-repo-id", "MDEwOlJlcG9zaXRvcnkzMDk2NjQ1NDk=");
+    commentScript.setAttribute("data-category", "General");
+    commentScript.setAttribute("data-category-id", "DIC_kwDOEnUbJc4Cltnz");
     commentScript.setAttribute("data-mapping", "pathname");
+    commentScript.setAttribute("data-strict", "0");
     commentScript.setAttribute("data-reactions-enabled", "1");
     commentScript.setAttribute("data-emit-metadata", "0");
-    commentScript.setAttribute("data-theme", darkMode ? "github-dark" : "github-light");
-    commentScript.setAttribute("data-issue-term", "title");
+    commentScript.setAttribute("data-input-position", "bottom");
+    commentScript.setAttribute("data-theme", darkMode ? "dark" : "light");
     commentScript.setAttribute("crossorigin", "anonymous");
+    commentScript.setAttribute("data-lang", isChinese ? "zh-CN": "en");
     commentScript.setAttribute("async", "true");
     commentContainer.appendChild(commentScript);
   }
 }
 
 const isDarkMode = getCurrentTheme() === 'dark';
-loadUtterances(isDarkMode);
+loadComment(isDarkMode);
 
 // Watch for theme changes
 const themeObserver = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
         if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
           const isDarkMode = getCurrentTheme() === 'dark';
-          loadUtterances(isDarkMode);
+          loadComment(isDarkMode);
           console.log(`changing theme`);
         }
     });