Hexo-Matery主题配置Twikoo评论系统

Twikoo是一个简洁、安全、免费的静态网站评论系统。有部署有数种方式，其他部署方式要么收费，要么需要服务器，本次选择Vercel 部署，请选择适合自己的部署平台。

一.Twikoo评论系统配置

1.配置MongoDB
  1. 申请 MongoDB 账号。
  2. 创建免费 MongoDB 数据库，区域推荐选择 AWS / N. Virginia (us-east-1)。
  3. 创建数据库用户和数据库密码。
  4. 设置允许所有 IP 地址的连接。
  5. Clusters 页面点击 CONNECT - Drivers，记录数据库连接字符串,将连接字符串中的 <password> 修改为数据库密码。
2.配置 Vercel
  1. 申请 Vercel 账号。
  2. 点击Vercel按钮将 Twikoo 一键部署到 Vercel。
  3. 进入 Settings - Environment Variables，添加环境变量Key： MONGODB_URI，Value值为第 1.5 步的数据库连接字符串。
  4. 进入 Deployments , 点击头像后面三个点（更多） , 然后点击Redeploy , 最后点击下面的Redeploy。
  5. 进入 Overview，点击 Domains 下方的链接，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 的提示。

二.Matery主题配置

1.配置主题config.yml文件

添加以下代码

1
2
3
twikoo:
  enable: true
  envId: https://xxx.vercel.app # 环境 ID
1
2
3
libs:
  css:
	  twikoo: /libs/twikoo/twikoo.all.min.js
2.配置post-detail.ejs文件

在\layout\_partial\post-detail.ejs中添加代码：

1
2
3
<% if (theme.twikoo && theme.twikoo.enable) { %>
    <%- partial('_partial/twikoo') %>
<% } %>
3.配置post-detail.ejs文件

新建\layout\_partial\twikoo.ejs文件并添加代码：

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
<div class="card twikoo-card" data-aos="fade-up">
    <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
        <span>评论</span>
    </div>
    <div class="card-content" style="display: grid">
        <div id="tcomments"></div>
    </div>
</div>

<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.twikoo) %>"></script>
<script>
    twikoo.init({
        envId: '<%- theme.twikoo.envId %>',
        el: '#tcomments',
        region: '<%- theme.twikoo.region %>',
        path: '<%- theme.twikoo.path %>'
    }).then(function () {
        var tkInputs = document.querySelector('#twikoo').getElementsByTagName('input');
        for (var tkInputsIndex = 0; tkInputsIndex < tkInputs.length; tkInputsIndex++) {
            if (tkInputs[tkInputsIndex]) {
                tkInputs[tkInputsIndex].classList.add('browser-default');
            }
        }
    });
</script>

其中样式部分使用\layout\_partial\valine.ejs中的部分代码。

4.配置post-detail.ejs文件

在\layout\contact.ejs中添加代码：

1
2
3
<% if (theme.twikoo && theme.twikoo.enable) { %>
<%- partial('_partial/twikoo') %>
<% } %>
5.配置friends.ejs文件

在\layout\friends.ejs中添加代码：

1
2
3
<% if (theme.twikoo && theme.twikoo.enable) { %>
<%- partial('_partial/twikoo') %>
<% } %>

在主题\source\libs\路径下新建twikoo文件夹，文件夹中添加两个文件：

至此Matery主题配置Twikoo评论系统完成。