hsingko ▮

再次迁移评论系统：从 utterances 到 giscus

2022-11-22

最近一个月发现常常无法加载评论，尽管文章没啥读者，但是丢下个没法加载的评论系统也是看着难受，恰好最近看到一个不错的替代品 giscus，于是就花了十几分钟切换过去了。

那么这个 giscus 相比 utterances 有什么优点呢？

  • 由于 utterances 开发者不再活跃，后续维护可能出现问题，比如现在就已经出现无法加载评论的情况了
  • 通过 github discussion 而不是 issue 存储评论
  • 支持回复功能
  • 支持自定义主题
  • 更快的加载速度
  • 评论实时显示
  • 支持 reactions 表情

安装 giscus

安装主要分为几个部分：

  • github 相关操作
  • 生成配置
  • 迁移旧数据

github 设置

这一步主要涉及到 <yourname>.github.io 这个仓库。

giscus.app 生成配置

填写页面上的配置项后会在底下生成脚本，如果不进行填写，那么下方代码中方括号标识的内容就需要自己填：

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

然后将这段代码替换掉现在正在用的评论系统。

数据迁移

如果你之前的评论是基于 github issue ，那么迁移很简单，只需要点击相应的 issue ，在页面的右下角点击 Convert to discussion 即可，另外需要注意的是新旧评论系统的评论路径映射关系需要保持一致，这样新系统才能找到正确的旧评论。

自动切换主题

如果你的博客启用了暗黑模式，那么你可能会想要自动切换评论系统的主题，以 hugo-paperMod 主题为例，将之前在 partials/comments.html 中设置好的内容替换如下：

<script type="text/javascript">
        let giscusTheme = localStorage.getItem("pref-theme") === "dark" ? 'dark_dimmed' : 'light'; // EDIT1
        let giscusAttributes = {
            "src": "https://giscus.app/client.js",
            "data-repo": "[REPO]",
            "data-repo-id":["REPO ID"],
            "data-category": "Announcements",
            "data-category-id": "[CATEGORY ID]",
            "data-mapping": "pathname",
            "data-reactions-enabled": "1",
            "data-emit-metadata": "0",
            "data-theme": giscusTheme === null ? "light" : giscusTheme,
            "data-lang": "zh-CN",
            "crossorigin": "anonymous",
            "data-loading": "lazy",
            "async": "",
        };

        let giscusScript = document.createElement("script");
        Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
        var article = document.getElementsByTagName("article")[0].appendChild(giscusScript);
        function changeGiscusTheme () {
            const theme = localStorage.getItem("pref-theme") === "dark" ?  'light' : 'dark_dimmed'

            function sendMessage(message) {
                const iframe = document.querySelector('iframe.giscus-frame');
                if (!iframe) return;
                iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
            }

        sendMessage({
        setConfig: {
        theme: theme
        }
        });
        }
        const toggle = document.querySelector('#theme-toggle'); //EDIT 2
        if (toggle){
        toggle.addEventListener('click', changeGiscusTheme)
        }
</script>

如果你用的是其他主题，除了要修改仓库相关的配置内容之外，还需要修改获取当前主题的代码以及切换主题的按钮事件绑定，这两个位置已经在上面的代码中用 EDIT1, EDIT2 两个注释标注了，你可以自行修改。