mdBook 若是有一个评论系统就能让读者交流，也能收到读者的反馈。
本文将记录我将 giscus 评论系统集成到 mdBook 的过程。
我参考了《Rust 语言圣经（rust-course）》的方案。
我的 mdBook 版本：
1
2
| ❯ mdbook -V
mdbook v0.4.29
|
设置 giscus
前往 giscus 官网。
根据 giscus 官网的提示创建仓库并完成配置，获得一段配置完成的代码信息。
配置完成的代码信息1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script src="https://giscus.app/client.js"
data-repo="Username/Project"
data-repo-id="XXxXXXXxXXXx"
data-category="Announcements"
data-category-id="XXX_xxXXxXXXxxXXXX"
data-mapping="title"
data-strict="1"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light_tritanopia"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
|
创建 Javascript 脚本
创建 assets/giscus.js 文件。
写入以下代码。
assets/giscus.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
var theme = "transparent_dark";
const themeClass = document.getElementsByTagName("html")[0].className;
if (themeClass.indexOf("light") != -1 || themeClass.indexOf("rust") != -1) {
theme = "light"
}
var giscus_lang = "zh-CN";
var lang = translate.language.getCurrent();
switch (lang) {
case "chinese_traditional":
giscus_lang = "zh-TW";
break;
case "english":
giscus_lang = "en";
break;
case "spanish":
giscus_lang = "es";
break;
case "japanese":
giscus_lang = "ja";
break;
case "korean":
giscus_lang = "ko";
break;
case "french":
giscus_lang = "fr";
break;
case "arabic":
giscus_lang = "ar";
break;
default:
giscus_lang = "zh-CN";
break;
}
var giscus = function () {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://giscus.app/client.js";
script.setAttribute("data-repo", "Username/Project");
script.setAttribute("data-repo-id", "X_xXxxx_xX");
script.setAttribute("data-category", "Announcements");
script.setAttribute("data-category-id", "XXXxXXXxx_Xxx");
script.setAttribute("data-mapping", "title");
script.setAttribute("data-strict", "1");
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", giscus_lang);
script.crossOrigin = "anonymous";
script.async = true;
document.getElementById("giscus-container").appendChild(script);
};
window.addEventListener('load', giscus);
|
将 “插入评论区脚本元素” 的部分中的信息更改成在 giscus 官网设置好的信息。
若您没有 translate.js 的使用需求可选删除 “获取用户使用的的语种” 这段代码。
我的 mdBook 项目中使用了 translate.js 用来自动翻译页面。 因此，有 “获取用户使用的的语种” 这段代码来根据当前用户选择的语言切换 giscus 的语言的这段代码。
您可以查看《mdBook 用 translate.js 实现国际化自动多语言翻译》来在 mdBook 中集成 translate.js 。
添加 Javascript 到 book.toml
book.toml1
2
| [output.html]
+ additional-js = ["assets/giscus.js"]
|
多个：
book.toml1
2
3
4
5
6
| [output.html]
additional-js = [
"assets/loading.js",
"assets/translate_lib.js",
+ "assets/giscus.js"
]
|
修改页面元素
编辑 theme/index.hbs 。
什么？您没有找到 theme/index.hbs ？ 您可以在一个新文件夹内执行 mdbook init --theme 您就可以将新文件夹的 theme/index.hbs 复制到您现有项目的 theme/index.hbs 位置进行编辑。
在其中添加新增部分。
theme/index.hbs1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <div id="content" class="content">
<main>
{{{ content }}}
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
{{#previous}}
<a rel="prev" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters previous" title="上一页 - Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
{{/previous}}
{{#next}}
<a rel="next" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters next" title="下一页 - Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
{{/next}}
<div style="clear: both"></div>
</nav>
+ <main>{{!-- 添加一个主元素，这样评论的宽度就和文章宽度一致 --}}
+ <hr>{{!-- 添加一个分隔符 --}}
+ <div id="giscus-container"></div>{{!-- 新增 giscus 元素 --}}
+ </main>
</div>
|
本地检查修改
1
2
| mdbook build
mdbook serve
|
浏览器打开 http://[::1]:3000 检查是否有问题。有时候因为一些限制，要部署到服务器评论区和翻译才能正确加载。
尾声
如果您有什么问题欢迎在底下评论区与各位讨论。
