replacing gitalk with giscus comments

en/assets/custom.js

@@ -1,12 +1,12 @@
-(function() {
+var initAll = function () {
     var path = window.location.pathname;
     if (path.endsWith("/print.html")) {
         return;
     }
 
     var images = document.querySelectorAll("main img")
-    Array.prototype.forEach.call(images, function(img) {
-        img.addEventListener("click", function() {
+    Array.prototype.forEach.call(images, function (img) {
+        img.addEventListener("click", function () {
             BigPicture({
                 el: img,
             });
@@ -14,91 +14,131 @@
     });
 
     // Un-active everything when you click it
-    Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
-        el.addEventHandler("click", function() {
-            Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+    Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
+        el.addEventHandler("click", function () {
+            Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
                 el.classList.remove("active");
             });
             el.classList.add("active");
         });
     });
 
-    var updateFunction = function() {
-
-        var id;
+    var updateFunction = function () {
+        var id = null;
         var elements = document.getElementsByClassName("header");
-        Array.prototype.forEach.call(elements, function(el) {
+        Array.prototype.forEach.call(elements, function (el) {
             if (window.pageYOffset >= el.offsetTop) {
                 id = el;
             }
         });
 
-        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
             el.classList.remove("active");
         });
 
-        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
+            if (id == null) {
+                return;
+            }
             if (id.href.localeCompare(el.href) == 0) {
                 el.classList.add("active");
             }
         });
     };
 
-    // Populate sidebar on load
-    window.addEventListener('load', function() {
-        var pagetoc = document.getElementsByClassName("pagetoc")[0];
-        var elements = document.getElementsByClassName("header");
-        Array.prototype.forEach.call(elements, function(el) {
-            var link = document.createElement("a");
+    var pagetoc = document.getElementsByClassName("pagetoc")[0];
+    var elements = document.getElementsByClassName("header");
+    Array.prototype.forEach.call(elements, function (el) {
+        var link = document.createElement("a");
 
-            // Indent shows hierarchy
-            var indent = "";
-            switch (el.parentElement.tagName) {
-                case "H1":
-                    return;
-                // case "H2":
-                //     indent = "20px";
-                //     break;
-                case "H3":
-                    indent = "20px";
-                    break;
-                case "H4":
-                    indent = "40px";
-                    break;
-                default:
-                    break;
-            }
+        // Indent shows hierarchy
+        var indent = "";
+        switch (el.parentElement.tagName) {
+            case "H1":
+                return;
+            case "H3":
+                indent = "20px";
+                break;
+            case "H4":
+                indent = "40px";
+                break;
+            default:
+                break;
+        }
 
-            link.appendChild(document.createTextNode(el.text));
-            link.style.paddingLeft = indent;
-            link.href = el.href;
-            pagetoc.appendChild(link);
-        });
-        updateFunction.call();
+        link.appendChild(document.createTextNode(el.text));
+        link.style.paddingLeft = indent;
+        link.href = el.href;
+        pagetoc.appendChild(link);
     });
+    updateFunction.call();
 
     // Handle active elements on scroll
     window.addEventListener("scroll", updateFunction);
 
-    var p = path.replace("index.html", "");
-    p = p.replace(".html", "");
-    var strs = p.split("/");
-    if (strs[strs.length-1] == ""){
-        strs.pop()
-    } 
-    var str = strs[strs.length-1];
-    var title = document.querySelector("main>h1,h2>a").textContent
-    var gitalk = new Gitalk({
-        clientID: '8e4b2cf9529ebb3dcad6',
-        clientSecret: '6f6e8c23575a780bdb1faba3c17be08d76dc35f8',
-        repo: 'rust-by-practice-comments',
-        owner: 'sunface',
-        admin: ["sunface"], 
-        labels: ['comments'],
-        title: title,
-        createIssueManually: false,
-        id: str,
-        distractionFreeMode: true
+    document.getElementById("theme-list").addEventListener("click", function (e) {
+        var iframe = document.querySelector('.giscus-frame');
+        if (!iframe) return;
+        var theme;
+        if (e.target.className === "theme") {
+            theme = e.target.id;
+        } else {
+            return;
+        }
+
+        // 若当前 mdbook 主题不是 Light 或 Rust ，则将 giscuz 主题设置为 transparent_dark
+        var giscusTheme = "light"
+        if (theme != "light" && theme != "rust") {
+            giscusTheme = "transparent_dark";
+        }
+
+        var msg = {
+            setConfig: {
+                theme: giscusTheme
+            }
+        };
+        iframe.contentWindow.postMessage({ giscus: msg }, 'https://giscus.app');
     });
-    gitalk.render('gitalk-container');
-})();
+    
+    pagePath = pagePath.replace("index.md", "");
+    pagePath = pagePath.replace(".md", "");
+    if (pagePath.length > 0) {
+        if (pagePath.charAt(pagePath.length-1) == "/"){
+            pagePath = pagePath.substring(0, pagePath.length-1)
+        }
+    }else {
+        pagePath = "index"
+    }
+
+    // 选取浏览器默认使用的语言
+    const lang = navigator.language || navigator.userLanguage
+
+    // 若当前 mdbook 主题为 Light 或 Rust ，则将 giscuz 主题设置为 light
+    var theme = "transparent_dark";
+    const themeClass = document.getElementsByTagName("html")[0].className;
+    if (themeClass.indexOf("light") != -1 || themeClass.indexOf("rust") != -1) {
+        theme = "light"
+    }
+
+    var script = document.createElement("script")
+    script.type = "text/javascript";
+    script.src = "https://giscus.app/client.js";
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.setAttribute("data-repo", "sunface/rust-by-practice");
+    script.setAttribute("data-repo-id", "MDEwOlJlcG9zaXRvcnkxMjk5OTAzOTY=");
+    script.setAttribute("data-category", "Book Comments");
+    script.setAttribute("data-category-id", "DIC_kwDOB79-_M4COQmx");
+    script.setAttribute("data-mapping", "specific");
+    script.setAttribute("data-term", pagePath);
+    script.setAttribute("data-reactions-enabled", "1");
+    script.setAttribute("data-emit-metadata", "0");
+    script.setAttribute("data-input-position", "top");
+    script.setAttribute("data-theme", theme);
+    script.setAttribute("data-lang", lang);
+    // 预先加载评论会更好，这样用户读到那边时，评论就加载好了
+    // script.setAttribute("data-loading", "lazy");
+    document.getElementById("giscus-container").appendChild(script);
+};
+
+window.addEventListener('load', initAll);

en/theme/index.hbs

@@ -54,8 +54,6 @@
         <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
         {{/if}}
 
-        <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
-        <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
     </head>
     <body>
         <!-- Provide site root to javascript -->
@@ -69,11 +67,9 @@
             try {
                 var theme = localStorage.getItem('mdbook-theme');
                 var sidebar = localStorage.getItem('mdbook-sidebar');
-
                 if (theme.startsWith('"') && theme.endsWith('"')) {
                     localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                 }
-
                 if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                     localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                 }
@@ -187,7 +183,7 @@
                     <div class="sidetoc"><nav class="pagetoc"></nav></div>
                     <main>
                         {{{ content }}}
-                        <div id="gitalk-container"></div>
+                        <div id="giscus-container"></div>
                     </main>
 
                     <nav class="nav-wrapper" aria-label="Page navigation">
@@ -235,7 +231,6 @@
                     location.reload();
                 }
             };
-
             window.onbeforeunload = function() {
                 socket.close();
             }
@@ -246,7 +241,6 @@
         <!-- Google Analytics Tag -->
         <script type="text/javascript">
             var localAddrs = ["localhost", "127.0.0.1", ""];
-
             // make sure we don't activate google analytics if the developer is
             // inspecting the book locally...
             if (localAddrs.indexOf(document.location.hostname) === -1) {
@@ -254,7 +248,6 @@
                 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
                 ga('create', '{{google_analytics}}', 'auto');
                 ga('send', 'pageview');
             }
@@ -290,6 +283,10 @@
         <script src="{{ path_to_root }}clipboard.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}highlight.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}book.js" type="text/javascript" charset="utf-8"></script>
+        <script type="text/javascript" charset="utf-8">
+        var pagePath = "{{ path }}"
+        </script>
+
 
         <!-- Custom JS scripts -->
         {{#each additional_js}}

en/theme/style.css

@@ -19,7 +19,7 @@
     .pagetoc {
         position: fixed;
         width: 200px;
-        height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
+        height: calc(100vh - var(--menu-bar-height) - 10rem);
         overflow: auto;
         z-index: 1000;
     }
@@ -57,15 +57,25 @@
 .chapter li.chapter-item {
     /* 没有文件时的文字颜色 */
     color: #939da3;
-    margin-top: 1.2rem;
+    margin-top: 1rem;
 }
 
 /* 修改滚动条宽度 */
 ::-webkit-scrollbar {
-    width: 7px;
+    width: 5px;
 }
 
 /* 表格靠左对齐 */
 table {
     margin-left: 0 !important;
-}
+}
+
+/* 只使用底部的页面跳转，因为左右两边的宽跳转会被 page-toc 遮盖 */
+@media only screen and (max-width: 2560px) {
+    .nav-wide-wrapper { display: none; }
+    .nav-wrapper { display: block; }
+}
+@media only screen and (max-width: 2560px) {
+    .sidebar-visible .nav-wide-wrapper { display: none; }
+    .sidebar-visible .nav-wrapper { display: block; }
+}

zh-CN/assets/custom.js

@@ -1,12 +1,12 @@
-(function() {
+var initAll = function () {
     var path = window.location.pathname;
     if (path.endsWith("/print.html")) {
         return;
     }
 
     var images = document.querySelectorAll("main img")
-    Array.prototype.forEach.call(images, function(img) {
-        img.addEventListener("click", function() {
+    Array.prototype.forEach.call(images, function (img) {
+        img.addEventListener("click", function () {
             BigPicture({
                 el: img,
             });
@@ -14,91 +14,131 @@
     });
 
     // Un-active everything when you click it
-    Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
-        el.addEventHandler("click", function() {
-            Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+    Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
+        el.addEventHandler("click", function () {
+            Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
                 el.classList.remove("active");
             });
             el.classList.add("active");
         });
     });
 
-    var updateFunction = function() {
-
-        var id;
+    var updateFunction = function () {
+        var id = null;
         var elements = document.getElementsByClassName("header");
-        Array.prototype.forEach.call(elements, function(el) {
+        Array.prototype.forEach.call(elements, function (el) {
             if (window.pageYOffset >= el.offsetTop) {
                 id = el;
             }
         });
 
-        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
             el.classList.remove("active");
         });
 
-        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function (el) {
+            if (id == null) {
+                return;
+            }
             if (id.href.localeCompare(el.href) == 0) {
                 el.classList.add("active");
             }
         });
     };
 
-    // Populate sidebar on load
-    window.addEventListener('load', function() {
-        var pagetoc = document.getElementsByClassName("pagetoc")[0];
-        var elements = document.getElementsByClassName("header");
-        Array.prototype.forEach.call(elements, function(el) {
-            var link = document.createElement("a");
+    var pagetoc = document.getElementsByClassName("pagetoc")[0];
+    var elements = document.getElementsByClassName("header");
+    Array.prototype.forEach.call(elements, function (el) {
+        var link = document.createElement("a");
 
-            // Indent shows hierarchy
-            var indent = "";
-            switch (el.parentElement.tagName) {
-                case "H1":
-                    return;
-                // case "H2":
-                //     indent = "20px";
-                //     break;
-                case "H3":
-                    indent = "20px";
-                    break;
-                case "H4":
-                    indent = "40px";
-                    break;
-                default:
-                    break;
-            }
+        // Indent shows hierarchy
+        var indent = "";
+        switch (el.parentElement.tagName) {
+            case "H1":
+                return;
+            case "H3":
+                indent = "20px";
+                break;
+            case "H4":
+                indent = "40px";
+                break;
+            default:
+                break;
+        }
 
-            link.appendChild(document.createTextNode(el.text));
-            link.style.paddingLeft = indent;
-            link.href = el.href;
-            pagetoc.appendChild(link);
-        });
-        updateFunction.call();
+        link.appendChild(document.createTextNode(el.text));
+        link.style.paddingLeft = indent;
+        link.href = el.href;
+        pagetoc.appendChild(link);
     });
+    updateFunction.call();
 
     // Handle active elements on scroll
     window.addEventListener("scroll", updateFunction);
 
-    var p = path.replace("index.html", "");
-    p = p.replace(".html", "");
-    var strs = p.split("/");
-    if (strs[strs.length-1] == ""){
-        strs.pop()
-    } 
-    var str = strs[strs.length-1];
-    var title = document.querySelector("main>h1,h2>a").textContent
-    var gitalk = new Gitalk({
-        clientID: '8e4b2cf9529ebb3dcad6',
-        clientSecret: '6f6e8c23575a780bdb1faba3c17be08d76dc35f8',
-        repo: 'rust-by-practice-comments',
-        owner: 'sunface',
-        admin: ["sunface"], 
-        labels: ['comments'],
-        title: title,
-        createIssueManually: false,
-        id: str,
-        distractionFreeMode: true
+    document.getElementById("theme-list").addEventListener("click", function (e) {
+        var iframe = document.querySelector('.giscus-frame');
+        if (!iframe) return;
+        var theme;
+        if (e.target.className === "theme") {
+            theme = e.target.id;
+        } else {
+            return;
+        }
+
+        // 若当前 mdbook 主题不是 Light 或 Rust ，则将 giscuz 主题设置为 transparent_dark
+        var giscusTheme = "light"
+        if (theme != "light" && theme != "rust") {
+            giscusTheme = "transparent_dark";
+        }
+
+        var msg = {
+            setConfig: {
+                theme: giscusTheme
+            }
+        };
+        iframe.contentWindow.postMessage({ giscus: msg }, 'https://giscus.app');
     });
-    gitalk.render('gitalk-container');
-})();
+    
+    pagePath = pagePath.replace("index.md", "");
+    pagePath = pagePath.replace(".md", "");
+    if (pagePath.length > 0) {
+        if (pagePath.charAt(pagePath.length-1) == "/"){
+            pagePath = pagePath.substring(0, pagePath.length-1)
+        }
+    }else {
+        pagePath = "index"
+    }
+
+    // 选取浏览器默认使用的语言
+    const lang = navigator.language || navigator.userLanguage
+
+    // 若当前 mdbook 主题为 Light 或 Rust ，则将 giscuz 主题设置为 light
+    var theme = "transparent_dark";
+    const themeClass = document.getElementsByTagName("html")[0].className;
+    if (themeClass.indexOf("light") != -1 || themeClass.indexOf("rust") != -1) {
+        theme = "light"
+    }
+
+    var script = document.createElement("script")
+    script.type = "text/javascript";
+    script.src = "https://giscus.app/client.js";
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.setAttribute("data-repo", "sunface/rust-by-practice");
+    script.setAttribute("data-repo-id", "MDEwOlJlcG9zaXRvcnkxMjk5OTAzOTY=");
+    script.setAttribute("data-category", "Book Comments");
+    script.setAttribute("data-category-id", "DIC_kwDOB79-_M4COQmx");
+    script.setAttribute("data-mapping", "specific");
+    script.setAttribute("data-term", pagePath);
+    script.setAttribute("data-reactions-enabled", "1");
+    script.setAttribute("data-emit-metadata", "0");
+    script.setAttribute("data-input-position", "top");
+    script.setAttribute("data-theme", theme);
+    script.setAttribute("data-lang", lang);
+    // 预先加载评论会更好，这样用户读到那边时，评论就加载好了
+    // script.setAttribute("data-loading", "lazy");
+    document.getElementById("giscus-container").appendChild(script);
+};
+
+window.addEventListener('load', initAll);

zh-CN/theme/index.hbs

@@ -54,8 +54,6 @@
         <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
         {{/if}}
 
-        <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
-        <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
     </head>
     <body>
         <!-- Provide site root to javascript -->
@@ -69,11 +67,9 @@
             try {
                 var theme = localStorage.getItem('mdbook-theme');
                 var sidebar = localStorage.getItem('mdbook-sidebar');
-
                 if (theme.startsWith('"') && theme.endsWith('"')) {
                     localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                 }
-
                 if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                     localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                 }
@@ -187,7 +183,7 @@
                     <div class="sidetoc"><nav class="pagetoc"></nav></div>
                     <main>
                         {{{ content }}}
-                        <div id="gitalk-container"></div>
+                        <div id="giscus-container"></div>
                     </main>
 
                     <nav class="nav-wrapper" aria-label="Page navigation">
@@ -235,7 +231,6 @@
                     location.reload();
                 }
             };
-
             window.onbeforeunload = function() {
                 socket.close();
             }
@@ -246,7 +241,6 @@
         <!-- Google Analytics Tag -->
         <script type="text/javascript">
             var localAddrs = ["localhost", "127.0.0.1", ""];
-
             // make sure we don't activate google analytics if the developer is
             // inspecting the book locally...
             if (localAddrs.indexOf(document.location.hostname) === -1) {
@@ -254,7 +248,6 @@
                 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
                 ga('create', '{{google_analytics}}', 'auto');
                 ga('send', 'pageview');
             }
@@ -290,6 +283,10 @@
         <script src="{{ path_to_root }}clipboard.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}highlight.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}book.js" type="text/javascript" charset="utf-8"></script>
+        <script type="text/javascript" charset="utf-8">
+        var pagePath = "{{ path }}"
+        </script>
+
 
         <!-- Custom JS scripts -->
         {{#each additional_js}}

zh-CN/theme/style.css

@@ -19,7 +19,7 @@
     .pagetoc {
         position: fixed;
         width: 200px;
-        height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
+        height: calc(100vh - var(--menu-bar-height) - 10rem);
         overflow: auto;
         z-index: 1000;
     }
@@ -57,15 +57,25 @@
 .chapter li.chapter-item {
     /* 没有文件时的文字颜色 */
     color: #939da3;
-    margin-top: 1.2rem;
+    margin-top: 1rem;
 }
 
 /* 修改滚动条宽度 */
 ::-webkit-scrollbar {
-    width: 7px;
+    width: 5px;
 }
 
 /* 表格靠左对齐 */
 table {
     margin-left: 0 !important;
-}
+}
+
+/* 只使用底部的页面跳转，因为左右两边的宽跳转会被 page-toc 遮盖 */
+@media only screen and (max-width: 2560px) {
+    .nav-wide-wrapper { display: none; }
+    .nav-wrapper { display: block; }
+}
+@media only screen and (max-width: 2560px) {
+    .sidebar-visible .nav-wide-wrapper { display: none; }
+    .sidebar-visible .nav-wrapper { display: block; }
+}