(giscus) fixed Giscus state updating issue

Author: MaxXSoft

docs/assets/js/giscus.js

@@ -1,34 +1,49 @@
 const giscusPlugin = (hook, vm) => {
   hook.ready(() => {
-    // Move giscus container to content area.
+    // Move Giscus container to content area.
     const content = document.querySelector('.content')
     const giscusContainer = document.querySelector(`.giscus`)
     if (content && giscusContainer) {
       content.appendChild(giscusContainer)
     }
-    // Add theme toggle event.
+    // Initial theme setup.
+    const iframe = document.querySelector('.giscus-frame')
     const themeToggle = document.getElementById('docsify-darklight-theme')
-    if (themeToggle) {
-      themeToggle.addEventListener('click', () => toggleGiscusTheme(themeToggle))
-      toggleGiscusTheme(themeToggle)
+    if (iframe && themeToggle) {
+      toggleGiscusTheme(themeToggle, iframe)
     }
   })
+  hook.doneEach(() => {
+    // Update `term` parameter.
+    const iframe = document.querySelector('.giscus-frame')
+    if (iframe) {
+      setupGiscusTerm(iframe)
+      // Add theme toggle event.
+      const themeToggle = document.getElementById('docsify-darklight-theme')
+      if (themeToggle) {
+        themeToggle.addEventListener('click', () => toggleGiscusTheme(themeToggle, iframe))
+      }
+    }
+  })
+}
+
+const setupGiscusTerm = (iframe) => {
+  // Replace `term` parameter in iframe src.
+  const src = iframe.getAttribute('src')
+  let term = decodeURIComponent(location.hash).replace('#', '')
+  if (!term) term = '/'
+  const newSrc = src.replace(/term=[^&]*/, `term=${encodeURIComponent(term)}`)
+  iframe.setAttribute('src', newSrc)
 }
 
-const toggleGiscusTheme = (toggle) => {
-  const iframe = document.querySelector('.giscus-frame')
-  if (iframe) {
-    // Check if dark mode is enabled.
-    const isDark = toggle.getAttribute('data-link-title') === 'dark'
-    const theme = isDark ? 'dark_dimmed' : 'light'
-    // Replace `theme` parameter in iframe src.
-    const src = iframe.getAttribute('src')
-    const newSrc = src.replace(
-      /theme=[^&]*/,
-      `theme=${theme}`
-    )
-    iframe.setAttribute('src', newSrc)
-  }
+const toggleGiscusTheme = (toggle, iframe) => {
+  // Check if dark mode is enabled.
+  const isDark = toggle.getAttribute('data-link-title') === 'dark'
+  const theme = isDark ? 'dark_dimmed' : 'light'
+  // Replace `theme` parameter in iframe src.
+  const src = iframe.getAttribute('src')
+  const newSrc = src.replace(/theme=[^&]*/, `theme=${theme}`)
+  iframe.setAttribute('src', newSrc)
 }
 
 $docsify.plugins.push(giscusPlugin)

docs/index.html

@@ -67,7 +67,6 @@
           data-repo-id="MDEwOlJlcG9zaXRvcnkzMDkxMjQ2MDE="
           data-category="Announcements"
           data-category-id="DIC_kwDOEmzd-c4Cx2Sr"
-          data-mapping="title"
           data-strict="0"
           data-reactions-enabled="1"
           data-emit-metadata="0"