EnvId申请

请看 twikoo 官方文档

本人选择云函数部署的 vercel 部署方式。

MongoDB Atlas 500 MiB 的数据库 + Vercel 后端

最终获取的 EnvId 包含 https:// 前缀，例如 https://xxx.vercel.app。

Twikoo调用

  1. 在 layouts/partials/comments.html 添加 twikoo 代码：
 1
 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
68
69
70

<!-- Twikoo -->
{{- with .Site.Params.comments.twikoo -}}
<div class="pagination__title">
    <span class="pagination__title-h" style="font-size: 20px;">💬 评论</span>
    <hr />
</div>
<div id="tcomment"></div>
<script src="//cdn.jsdelivr.net/npm/twikoo@{{- .version -}}/dist/twikoo.all.min.js"></script>

<script>
    twikoo.init({
        envId: '{{- .envId -}}',
        el: '#tcomment',
        {{- with .region -}}
        region: '{{- . -}}',
        {{- end -}}
        {{- with .path -}}
        path: '{{- . -}}',
        {{- end -}}
        {{- with .lang -}}
        lang: '{{- . -}}',
        {{- end -}}
    })
</script>

<style>
    .twikoo {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
    }

    :root[data-scheme="dark"] {
        --twikoo-body-text-color-main: rgba(255, 255, 255, 0.9);
        --twikoo-body-text-color: rgba(255, 255, 255, 0.7);
    }

    .twikoo .el-input-group__prepend,
    .twikoo .tk-action-icon,
    .twikoo .tk-submit-action-icon,
    .twikoo .tk-time,
    .twikoo .tk-comments-no,
    .twikoo .tk-comments-count {
        color: var(--twikoo-body-text-color);
    }

    .twikoo .el-input__inner,
    .twikoo .el-textarea__inner,
    .twikoo .tk-preview-container,
    .twikoo .tk-content,
    .twikoo .tk-nick,
    .twikoo .tk-send {
        color: var(--twikoo-body-text-color-main);
    }

    .twikoo .el-button {
        color: var(--twikoo-body-text-color) !important;
    }

    .twikoo .el-input__count {
        color: var(--twikoo-body-text-color) !important;
    }

    .OwO .OwO-body {
        background-color: var(--body-background) !important;
        color: var(--body-text-color) !important;
    }
</style>
{{- end -}}
  1. 在 layouts/_default/single.html 调用 twikoo 代码：
1
2
3

{{- if (.Param "comments") }}
{{- partial "comments.html" . }}
{{- end }}
  1. 在 config/_default/params.yaml 中添加下面的代码：
1
2
3
4
5
6
7

comments: # 评论系统
  twikoo:
    envId: https://xxx.vercel.app # 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
    region: # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
    path: window.TWIKOO_MAGIC_PATH||window.location.pathname # 用于区分不同文章的自定义 js 路径
    lang: zh-CN # 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
    version: 1.6.41 # 要和twikoo的版本号要对得上，可从vercel上看

Twikoo管理设置

现在博客里应该能看到 Twikoo 界面了。点击右下角的蓝色小齿轮进入管理员界面，第一次需要设置管理密码，进入后可在 配置管理 里更改选项。

一定要把这个密码记好！！！！！！

除了通常的博客名称、站点URL之外，以下几个隐私安全选项建议注意一下：

通用

REQUIRED_FIELDS: 默认昵称和邮箱为必填项。修改成了nick，也即邮箱变为选填，游客能够完全匿名（当然不留邮箱就收不到回复提醒了）。

隐私

SHOW UA: 默认会显示用户系统和浏览器，处于隐私因素修改成了 false。

反垃圾

AKISMET_KEY：垃圾过滤器，可以帮忙过滤 spam 。设置也很简单，只需去Akismet官网注册申请一个 API key 就可以了，选择 Personal 并把价格调到 $0 ，下单之后把得到的 Akismet API key 填在这里。

gravatar 头像

新twikoo管理设置里的这一项 GRAVATAR_CDN: gravatar.com

隐藏管理面板入口

HIDE_ADMIN_CRYPT: 在昵称框输入暗号才显示。

配置邮件通知提醒（Gmail邮箱示例）

参考教程