首页 > 其他分享 >给你的博客加上评论区!

给你的博客加上评论区!

时间:2024-07-10 11:43:42浏览次数:16  
标签:comment Twikoo 加上 twikoo 博客 评论 https path

17.评论区

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

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

常见的评论区插件

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

由于本文采用的是 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 的目录结构”之类的。

参考

标签:comment,Twikoo,加上,twikoo,博客,评论,https,path
From: https://www.cnblogs.com/PeterJXL/p/18293708

相关文章

  • 基于NotionNext的个人网站|博客搭建与部署实例教程
    ......
  • 在线博客
    新知识汇总在SQL中,YEAR 函数:计算年份。写上asyear:因为默认函数返回年份在结果集无列名,所以自定义一个,避免它默认生成不直观的。最后按类型去映射。加入jwtt依赖(JSONWebTokens)jwt三部分:A:定义类型,签发算法B:body部分即负载(userid)C:自定义密钥,不能被解密定义jwt工具类:cr......
  • 【大学生】如何写好技术博客?
    我其实还是很羡慕,每天可以互动的,写博客的大学生们的。如果我当年也可以像你们一样,在校的时候也专心学习,也努力写博客,我想我也不至于整天沉迷于热血江湖和DNF,我也可以像你们一样优秀。所以,我想给你们提出几点小建议,希望可以帮你们更好的写好博客。目录1持续的写2你可以实......
  • 痴星不改:博客园T恤星星款设计稿预览
    在出第一款博客园T恤时,由于第三版设计的星星款打样出来的实物效果过于可爱,我们做了一个艰难的决定——弃星上码,改为废话少说,放码过来,从而伤了一颗星——园子的闪存幸运星。在上架后复盘时我们认识到天生可爱不是星星的错,伤星才是大错,于是我们决定将功补过,为星星重新来过,重新设计......
  • HarmonyOS NEXT开发实战:发布图片评论案例
    介绍本示例将通过发布图片评论场景,介绍如何使用startAbilityForResult接口拉起相机拍照,并获取相机返回的数据。效果图预览使用说明通过startAbilityForResult接口拉起相机,拍照后获取图片地址。实现思路创建CommentData类,实现IDataSource接口的对象,用于评论列表使用Lazy......
  • 博客搭建
    前期准备1、注册和申请博客园2、申请JS权限目的:就是为了可以自定义自己的博客界面和风格博客美化1、进入博客后台设置,选取SimpleMemory博客皮肤美化代码1、博客侧边栏代码点击查看代码<inputid="linkListFlg"type="hidden"/><scripttype="text/javascript">win......
  • 一个开源的、独立的、可自托管的评论系统,专为现代Web平台设计
    大家好,今天给大家分享的是一个开源的、独立的、可自托管的评论系统,专为现代Web平台设计。Remark42是一个自托管的、轻量级的、简单的(但功能强大的)评论引擎,它不会监视用户。它可以嵌入到博客、文章或任何其他读者添加评论的地方。项目介绍Remark42提供多种登录选项,包括通过G......
  • 第1篇博客
    应b站鹏哥作业要求决定写第1篇博客突破一下自己,应鹏哥要求,这篇内容主要是关于自我介绍,以及对于c语言学习方面的一些看法本人目前准大二,微电子专业,学习c语言一方面是大二开学第一学期就有这门课,另一方面是出于自己的兴趣爱好,觉得程序员很帅,开发一些代码,写几万行几万行的代码,感......
  • 给你的博客加上搜索功能!
    15.搜索功能搜索功能是非常重要的,但VuePress内置的搜索功能,只是基于headers的搜索——它会自动为所有页面的标题、h2​和h3​构建起一个简单的搜索索引,也就是我们能搜索的东西只有标题,如果标题里没有你输入的关键字,就搜不到。也就是说,不能搜索Markdown文件里的内容,非......
  • 基于Python实现的博客内容推荐系统
    前言大家好!今天来给大家分享一个基于Python实现的博客内容推荐系统。这个项目源自于一个想法:如何为博客用户提供他们最感兴趣的内容。正如大家所知道的,内容推荐系统在电商、视频平台和社交媒体中应用广泛,能显著提升用户体验和平台粘性。那么,如何为我们的博客(比如你自己的W......