给你的博客加上评论区

news2024/9/28 7:26:08

一个网站如果有评论功能，可以更好的和读者互动。VuePress 也有很多评论插件，这里简单介绍下，最后介绍本站所使用的 Twikoo。

大部分评论插件都是使用的 Github 或 Gitee 的 issue 功能，也就是用 issue 去存储评论；而 Twikoo 则是将数据保存到本地。

‍

‍

常见的评论区插件

Vssue：Vssue 简单来说就是 VuePress + issue，专门用来 VuePress 的评论功能。博主曾尝试过，但好像和其他插件冲突了，这里不详述。想要使用请参考：

  • Vssue 官网：https://vssue.js.org/zh/guide/
  • GitTalk ：https://github.com/gitalk/gitalk
  • Gitment：https://imsun.net/posts/gitment-introduction/
  • Valine：https://valine.js.org/
  • ArtTalk：https://wiki.eryajf.net/pages/b74c2b/

‍

由于本文采用的是 Twikoo，因此着重讲下其怎么配置。

Twikoo 的安装

官网：https://twikoo.js.org

Twikoo 支持多种部署方式：云函数，Vercel，私有部署、Docker… 具体参见文档：https://twikoo.js.org/backend.html

‍

最原始的方法，也就是直接在服务器上部署，步骤很简单：安装 node → 安装 tkserver → 启动。

$ npm i -g tkserver

$ ln -s /opt/nodejs/node/bin/tkserver /usr/local/bin/tkserver

$ tkserver

‍

然后就可以访问了，地址是：http://服务端IP:8080​

​

Linux 服务器可以用 nohup tkserver >> tkserver.log 2>&1 &​ 命令后台启动。

注意：可能需要在云服务器上开启 8080 端口的防火墙

‍

还是推荐用 Docker 来部署。我之前是用私有部署，几年后想升级 Twikoo，但是因为 node 版本太老了，导致升级失败… 然后试着升级 node，又是一堆报错…

当时的聊天记录​

‍

‍

‍

‍

听群友的 鬼话 建议后，用 Docker 后，一个命令就启动起来了，真香！

docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8080:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo

‍

Twikoo 目录结构

在私有部署的情况下，在你执行 tkserver 的时候，就会在当前目录创建：

  • data 文件夹：存放评论数据、配置等
  • tkserver.log：日志文件

‍

因此，有必要在你自己指定的目录下启动 tkserver，方便后期的数据备份、日志分析等。

如果你使用的是 Docker，在上述命令里其实也用了 ${PWD}/data​ 来指定数据文件的目录，请自行选择。

‍

‍

‍

配置 https

理论上这样部署，就完成后台的部分了，但鉴于我的网站用了 HTTPS，而 Twikoo 本身并不支持，因此还需要做反向代理。

接下来的步骤如下：

  1. 再申请和购买一个 SSL 证书
  2. 配置 cname
  3. 下载证书放到 Linux 服务器上
  4. 配置 Nginx 反向代理

‍

购买 HTTPS 证书，这里我用二级域名的：

​

‍

然后在云服务器控制台上配置 cname：

​​

‍

‍

配置 Nginx 反向代理。和上一小节一样，上传子域名的证书到服务器上，然后配置 Nginx：

upstream twi { 
   server peterjxl.com:8080; #你的域名+加端口
}


server {
    listen  443 ssl;
    server_name  twikoo.peterjxl.com; #子域名
    ssl_certificate  /opt/nginxrun/conf/cert/8852603_twikoo.peterjxl.com.pem;
    ssl_certificate_key /opt/nginxrun/conf/cert/8852603_twikoo.peterjxl.com.key;

    # ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers  HIGH:!ADH:!EXPORT56:RC4+RSA:+MEDIUM;
    ssl_prefer_server_ciphers  on;

    location / {
	proxy_pass http://twi;
    }
}

‍

‍

这样，访问 https://twikoo.peterjxl.com/，就会转发到我的服务器 IP:8080 ，完成反向代理：

​

‍

前端配置 Twikoo

这里主要参考：本站 - 评论模块 | Young Kbt blog，感谢大佬。

‍

打开 docs/.vuepress/config.js，在 head 里添加如下内容（在 <head>​ 引入在线 script）：1.6.7 是版本号。

['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.7/twikoo.all.min.js' }],

在 docs/.vuepress/components​ 目录下创建 Vue 组件：Twikoo.vue​。如果不存在 components 目录，则请创建。添加如下内容：注意修改 envId​ 为你自己的

ps：envId 就是你自己的 Twikoo 地址，例如我的是 https://twikoo.peterjxl.com/

<template>
  <div id="tcomment"></div>
</template>
<script>
let waitTime = 700; // 页面加载后多少毫秒后加载评论区（如果是 0ms，可能会报错）
let archives = "/archives/"; // 归档页的 permalink
export default {
  data() {
    return {
      twikoo: "",
      firstLoad: true,
    };
  },
  mounted() {
    // 不初始化评论区的页面：frontmatter 的 comment: false 的文章页、首页、归档页、404 页面
    if (
      (this.$frontmatter.comment == undefined || this.$frontmatter.comment) &&
      this.$route.path != "/" &&
      this.$route.path != archives &&
      !this.isFourZeroFour(this.$route)
    ) {
      setTimeout(() => {
        this.twikooInit();
      }, waitTime);
    }
  },
  watch: {
    $route(to, from) {
      // 404 页面、不同的标题会触发路由，禁止掉
      if (
        this.$route.path == "/" ||
        this.$route.hash != "" ||
        this.isFourZeroFour(to)
      ) {
        return;
      }
      // 进入首页、进入 frontmatter 的 comment: false 页面，删除评论区
      if (to.path == "/" || this.getCommentByFrontmatter(to) == false) {
        this.deleteComment();
        return;
      }
      // 初始化评论条件：来自首页，来自归档页、来自 frontmatter 的 comment: true 的文章页
      if (
        from.path == "/" ||
        from.path == archives ||
        !this.getCommentByFrontmatter(from)
      ) {
        this.firstLoad
          ? setTimeout(() => {
              this.twikooInit();
              this.firstLoad = false;
            }, waitTime)
          : this.twikooInit(); // 如果加载过一次评论区，则直接获取
      } else if (this.$route.path != "/" && this.$route.hash == "") {
        // 文章页之间跳转，重新获取评论
        setTimeout(() => {
          this.updateComment();
        }, waitTime);
      }
    },
  },
  methods: {
    twikooInit() {
      twikoo
        .init({
          // envId 要切换成自己的，这是评论区的 ID，一个博客只能有一个评论区 ID，用别人的评论区 ID，导致读者评论时或发送到别人的评论区里
          envId: "https://twikoo.peterjxl.com/",
          el: "#tcomment",
          // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
          // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
          // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/dev/src/js/utils/i18n/index.js
          // onCommentLoaded: function () {
          // console.log("评论加载或评论成功");
          // },
        })
        .then(() => {
          this.loadTwikoo();
        });
    },
    // 初始化加载或者跳转新页面重新加载 Twikoo 评论区
    loadTwikoo() {
      let page = document.getElementsByClassName("page")[0];
      let comment = document.getElementById("twikoo");
      // comment 不存在代表曾初始化过，后面被删除
      comment ? (this.twikoo = comment) : (comment = this.twikoo);
      page
        ? comment
          ? page.appendChild(comment)
          : page.appendChild(this.twikoo)
        : "";
      this.updateComment();
    },
    // 跳转新页面，重新获取当前页面的评论信息
    updateComment() {
      let tk_icon = document.getElementsByClassName("tk-icon")[0];
      tk_icon ? tk_icon.click() : undefined;
    },
    // 删除 frontmatter:comment: false 页面的数据
    deleteComment() {
      let comment = document.getElementById("twikoo");
      comment ? comment.parentNode.removeChild(comment) : "";
    },
    // 获取 frontmatter 的 comment
    getCommentByFrontmatter(route) {
      let comment = true;
      this.$site.pages.forEach((item) => {
        if (item.path == route.path) {
          comment = item.frontmatter.comment;
        }
      });
      return comment;
    },
    // 判定当前页面是不是 404
    isFourZeroFour(route) {
      let flag = true;
      this.$site.pages.forEach((item) => {
        if (item.path == route.path) {
          flag = false;
        }
      });
      return flag;
    },
  },
};
</script>

<style>
.twikoo .tk-comments {
  margin-top: 20px;
}
</style>

‍

‍

管理 Twikoo

配置好后，就可以在每个文章下面看到评论区，在评论区的右边发现有一个「蓝色小齿轮」，这就是管理面板：

​

第一次 点击小齿轮后会让你输入登录密码，请记住它，如果忘记了密码，请参考官网文档解决。

管理面板的用处：

  • 可以查看、删除、隐藏、显示、置顶任意的评论
  • 配置你的个人信息，登录管理面板后评论系统能识别你的身份（博主）
  • 配置反垃圾模块，防止别人发送不雅的评论
  • 配置通知，别人的评论可以通过 邮件 / 微信 / QQ 等方式通知你
  • …

image​

‍

‍

反垃圾

腾讯云是提供了反垃圾评论服务的，提供 1 个月的免费试用，到期后选择后付费即可，25 元/万条。

注意不要购买套餐，非常贵，最少都是 4k 大洋的，180w 条，大部分网站用不着这么多。

控制台地址：https://console.cloud.tencent.com/cms/text/package

​

‍

然后我们配置反垃圾，输入获取到的 secret id：

​

‍

‍

‍

通知

如何知道有人给网站评论了呢？我们可以使用邮件通知、即时通知。

‍

可以在管理面板里开启邮件通知。如果使用的是 QQ 邮箱，则需要授权码，而不是 QQ 密码，QQ 邮箱这样的设计可能是为了防止 QQ 被盗吧？具体步骤可参考：qq 邮箱授权码如何获取-百度经验 （如果是其他邮件，同理）：

​

‍

配置完后，可以测试下能不能正常收到邮件：

​

‍

‍

效果：当有评论后会有邮件提醒：

​

‍

‍

即时通知：Twikoo 支持多种即时通知，QQ，微信，钉钉，telegram 等等，自行按需配置即可：

​

‍

关于显示头像

Twikoo 评论区还支持 Gravatar 头像：

​

‍

什么是 Gravatar？简单来说就是全球通用头像，只要你去 Gravatar 的网站上设置一个邮箱和头像，这样在其他支持 Gravatar 的网站上，你输入邮箱就能自动获取你的头像。读者可以去 https://cravatar.cn 上注册邮箱，然后就可以了（由于 CDN 缓存的问题，可能得过几个小时才能正常显示）。

‍

Twikoo 也提供了自定义头像 CDN 地址的功能，具体可以看官网文档：

​

‍

关于显示 IP

在设置后有相关的部分：

​

‍

注意，并不会显示 IP，而是显示省份，有些人会误以为后面显示的是 IP，其实是浏览器版本：

​

‍

关于显示语言

Twikoo 支持简体中文、繁体中文、English。此外欢迎 提交翻译 PR。

至于管理面板显示什么语言，得看浏览器使用的语言了：

​

‍

关于博主标识

‍

如果是博主，在发表评论时会有一个“博主”标识：

​

注意，发表评论时，用户昵称和邮箱得和配置的一样，否则是没有这个标识的。

‍

也可以自定义这个标识：

​

‍

‍

‍

数据导出和定期备份

Twikoo 也支持数据的导入/导出，数据格式为 JSON。

如果想要自动定期备份，可以参考这篇博客：使用 GitHub Actions 自动备份 Twikoo 评论数据 | 小嘉的部落格

‍

更新 Twikoo

具体参考官网文档：版本更新 | Twikoo 文档

注意，前端的 JS 文件也要更新，直接修改版本号即可，例如本例中用的是：

['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.7/twikoo.all.min.js' }],

更新为：

['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.38/twikoo.all.min.js' }],

小结

本人使用过几个评论区插件， 但都配置失败了，折腾了很久都不行，最后还是用了 Twikoo，并且配置的过程中还加进了 Twikoo 的 QQ 群去咨询，也是折腾了很久才可以。

如果读者配置的过程遇到了什么问题，请不要灰心，遇到问题就尽量去解决，总是能成功的。

注意事项：

  • 每个页面加载评论区的时候，使用了 JS 的document.getElementById("twikoo")​ 方法来加载评论区（参考刚刚的“前端配置 Twikoo”小节）
  • 所以，在写博客的时候，文章的标题请不要取成单独的“Twikoo”，这样会导致评论区样式混乱。
  • 例如，本博客的小标题都不是单独的“Twikoo”，而是诸如“Twikoo 的安装”、“Twikoo 的目录结构”之类的。

‍

‍

‍

‍

‍

参考

  • Twikoo 私有化部署 - 腾讯云开发者社区-腾讯云
  • 常见问题 | Twikoo 文档
  • 本站 - 评论模块 | Young Kbt blog
  • 设置邮箱头像方法，gravatar 头像设置 - EzraYes 博客

‍

‍

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1914186.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

高压线束屏蔽效能测试之管中管法、线注入法

高压线束屏蔽效能测试之管中管法、线注入法

一、引言 上期推文介绍了高压线束屏蔽效能测试方法三同轴法&#xff0c;本篇文章将继续介绍高压线束相关测试方法——管中管法和线注入法。 二、管中管法 1、一般要求 管中管法参照IEC62153-4-7标准对高低压连接器进行零部件级屏蔽效能测试。在测试时&#xff0c;通过金属延长管…
阅读更多...
从零开始做题：MP3

从零开始做题：MP3

题目 给出一个mp3文件 解题 右键->selection->save selection->另存为xxx.png即可 8750d5109208213f E:\逐鹿\MISC\tools\MP3Stego_1_1_19\MP3Stego>.\decode -X cipher.mp3 MP3StegoEncoder 1.1.19 See README file for copyright info Input file cipher.mp3…
阅读更多...
必看！微信小程序必备证书！

必看！微信小程序必备证书！

微信小程序必备SSL证书。在日益增长的数字经济中&#xff0c;微信小程序已成为商家与消费者之间重要的交互平台。由于其便捷性和广泛的用户基础&#xff0c;越来越多的企业选择通过小程序来提供服务。然而&#xff0c;在开发和部署微信小程序时&#xff0c;确保数据安全是一个不…
阅读更多...
three-platformize 微信小程序 uniapp 使用截图功能

three-platformize 微信小程序 uniapp 使用截图功能

最近需要将3d场景进行截图&#xff0c;但是网上的各种各样&#xff0c;看的我一团乱麻&#xff0c;因此在解决完后就将这些简单的分享一下&#xff1b; 原理&#xff1a;将3维场景的那个canvas中的像素提取出来&#xff0c;找一个空的canvas二维画布放上去&#xff0c;然后用二…
阅读更多...
Conformal low power-1.概述

Conformal low power-1.概述

概述 设计师们越来越期望更长的电池寿命和更高的性能。由于漏电流的增加&#xff0c;使用90纳米及更小工艺节点制造的设备在不使用时的功耗与使用时相同。设计师们可以针对漏电流和动态功耗进行优化&#xff0c;这可以减少能源使用并降低冷却和封装成本。额外的高级低功耗方法…
阅读更多...
oracle哪些后台进程不能杀？

oracle哪些后台进程不能杀？

oracle 有很多的后台进程&#xff0c;在遇到特殊情况的时候如锁表&#xff0c;如果等待的是一个后台进程&#xff0c;那这时就需要考量是不是能杀掉这个后台进程&#xff1f;杀掉这个后台进程会不会引起实例崩溃&#xff1f;本着实践出真知&#xff0c;本文针对oracle 11g&…
阅读更多...
入门PHP就来我这（高级）20 ~ 事务处理

入门PHP就来我这（高级）20 ~ 事务处理

有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 接着上篇我们来看下PDO数据库的事务处理。 1 PDO中的事务处理 1.1 事务相关概念 事务&#…
阅读更多...
基于cmake为项目自动获取git分支tag的版本号和commitid

基于cmake为项目自动获取git分支tag的版本号和commitid

目录 1. 引言2. 实现过程2.1 工程目录规划2.2 c程序文件2.3 CMakeLists.txt2.4 GitVersion.cmake文件2.5 BuildNumber.cmake文件1. 引言 在项目构建的时候，我们经常会希望能够将git提交的分支信息和提交号(commitid)以及当前版本发布的tag信息作为版本号自动构建到程序里面，以…
阅读更多...
[C++]： 模板进阶

[C++]： 模板进阶

标题&#xff1a;[C]&#xff1a; 模板进阶 水墨不写bug 目录 一、非类型模板参数 &#xff08;1&#xff09;、非类型模板参数简介 &#xff08;2&#xff09;、非类型模板参数实例 二、模板的特化 &#xff08;1&#xff09;函数模板特化 &#xff08;2&#xff09;类…
阅读更多...
微信文件太大传不了？学会这些，微信秒变大文件传输神器

微信文件太大传不了？学会这些，微信秒变大文件传输神器

在数字化时代&#xff0c;微信已成为我们日常沟通的重要桥梁。然而&#xff0c;当需要在微信上传输大文件时&#xff0c;文件大小的限制往往让人束手无策。 今天&#xff0c;我们将分享一些实用的技巧&#xff0c;帮助你在微信上轻松传输大文件&#xff0c;无论是工作文档还是…
阅读更多...
防火墙组网

防火墙组网

一、实验拓扑图 二、实验要求 1、DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00-18&#xff1a;00&#xff09;可以访问&#xff0c; 生产区的设备全天可以访问。 2、生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网。 3、办…
阅读更多...
无人机之飞行规划与管理篇

无人机之飞行规划与管理篇

无人机飞行规划与管理是确保无人机安全、高效且符合法规的运行的关键步骤。这一过程包括了对飞行任务的详细安排、航线的设定以及风险的评估和管理。下面简述这一过程的主要环节&#xff1a; 一、飞行目的和任务确定 在规划之初&#xff0c;必须明确无人机的飞行目的&#xf…
阅读更多...
ES13的4个改革性新特性

ES13的4个改革性新特性

1、类字段声明 在 ES13 之前，类字段只能在构造函数中声明， ES13 消除了这个限制 // 之前 class Car {constructor() {this.color = blue;this.age = 2
阅读更多...
表格数据存本地，实时保存

表格数据存本地，实时保存

需求&#xff1a;填写表格时&#xff0c;每填写一个就要保存 将表格数据以json对象的格式存在本地&#xff0c;刷新时在created或者mounted将数据取出&#xff0c;点击保存时将存的数据清除&#xff0c;但是如果不点击保存&#xff0c;直接填写下一个数据&#xff0c;之前填写…
阅读更多...
【java算法专场】双指针（下）

【java算法专场】双指针（下）

611. 有效三角形的个数 目录 611. 有效三角形的个数 算法思路 算法代码 LCR 179. 查找总价格为目标值的两个商品 算法思路 算法代码 HashSet 双指针 15. 三数之和 算法思路 算法代码 18. 四数之和 ​编辑算法思路 算法代码 611. 有效三角形的个数 算法思路 算法…
阅读更多...
echarts无法加载Map地图的问题

echarts无法加载Map地图的问题

项目场景&#xff1a; echarts无法加载Map地图的问题 详情 查阅相关资料讲&#xff0c;echarts4.9以上版本已经移除了map&#xff0c;那么我们就得重新打包echarts文件了。打包echarts.min.js的链接&#xff1a;https://echarts.apache.org/zh/builder.html 在这个链接页面可…
阅读更多...
CTFShow的36D杯

CTFShow的36D杯

神光 还是想了一下&#xff0c;但那个异或搞不出来&#xff0c;都是对dword_41A038操作&#xff0c;想起开头就给了 key &#xff0c;还有反调试应该是要调试的 输出的应该就是 flag &#xff0c;只是为什么是乱码呢&#xff1f; 放 od 再试试&#xff0c;直接就出 flag 了&am…
阅读更多...
对比：9款最佳个人项目管理软件盘点

对比：9款最佳个人项目管理软件盘点

文章介绍了9款个人项目管理软件&#xff1a;PingCode、Worktile、Flowus、Todoist、Trello、Teambition、有道云笔记、Notion、Microsoft To Do。 在管理个人项目时&#xff0c;是否常感到信息零散、进度难以把控&#xff1f;选择合适的项目管理软件&#xff0c;可以有效解决这…
阅读更多...
关于解决双屏幕鼠标移动方向问题

关于解决双屏幕鼠标移动方向问题

1.点开设置》系统》屏幕 2.分清屏幕标识&#xff0c;一般笔记本为1 3.点击要移动的屏幕&#xff0c;然后按住鼠标左键不方进行移动 感谢您的浏览&#xff0c;希望可以帮到您&#xff01;
阅读更多...
【探索Linux】P.38（传输层 —— TCP协议通信连接管理机制简介 | TCP连接状态转换）

【探索Linux】P.38（传输层 —— TCP协议通信连接管理机制简介 | TCP连接状态转换）

阅读导航 引言一、TCP协议通信连接管理机制二、连接状态转换1. TCP状态转换图2. 状态转换过程3. 理解TIME_WAIT状态&#xff08;1&#xff09;目的和作用&#xff08;2&#xff09;状态转换&#xff08;3&#xff09;特殊情况&#xff08;4&#xff09;影响和优化 4. 理解 CLOS…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023