在 Suka 主题上使用 giscus 系统 | hank9999部落格

0x00 前言

之前把评论区关了, 一直没有用了, 最近发现了个新的 但是主题上没有, 只能自己瞎干了

0x01 How

在我全文搜索了一下后, 我打算仿照着 gitment 的方式把 giscus 加上
在 themes\suka\layout\_partial\head\dns-prefetch.ejs 文件中加入

<% if (theme.comment.use === "giscus") { %>
    <link rel="dns-prefetch" href="//api.github.com">
    <link rel="dns-prefetch" href="//giscus.app">
<% } %>

在 themes\suka\layout\_plugin\comment\ 目录下新建 giscus 文件夹, 进入目录创建 common.ejs 和 main.ejs 文件
分别添加下面的内容

// themes\suka\layout\_plugin\comment\giscus\main.ejs
<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="title"  // 映射方式 我选的标题
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="light_tritanopia" // 主题
        data-lang="zh-CN"
        data-loading="lazy" // lazy load
        crossorigin="anonymous"
        async>
</script>

// themes\suka\layout\_plugin\comment\giscus\main.ejs
<!-- giscus -->

因为是自己用 就没改配置的那边 直接写进去了
然后在配置里启用就可以了

comment:
  use: giscus

0x02 结语

这样就改好了, 其他东西我也不会改了（（
效果还是很好（ 可以看下下面评论区~