ƝⱲƲzʍҽժ's աօɾƖժ ƝⱲƲzʍҽժ's աօɾƖժ
首页
DAC导航
  • 碳索

    • 碳源-探本溯源
    • 碳路-负碳之路
    • 碳望-三零六零
  • DAC

    • 技术概览
    • 基础研究
    • 工程案例
  • 风轻扬

    • 风
    • 氢
    • 阳
  • 基础科学
  • 网络技术
  • 趣味知识
  • 技术文档
  • 软件教程
  • 教育考试
  • 文理知识
  • 兴趣技能
  • 影音娱乐
  • 其他资源
  • 学习
  • 工作
  • 分类
  • 标签
  • 归档
  • 我
  • 友链
GitHub (opens new window)

NWUzmed

A computer💻 hobbyist majoring in chemical engineering👨‍🔬.
首页
DAC导航
  • 碳索

    • 碳源-探本溯源
    • 碳路-负碳之路
    • 碳望-三零六零
  • DAC

    • 技术概览
    • 基础研究
    • 工程案例
  • 风轻扬

    • 风
    • 氢
    • 阳
  • 基础科学
  • 网络技术
  • 趣味知识
  • 技术文档
  • 软件教程
  • 教育考试
  • 文理知识
  • 兴趣技能
  • 影音娱乐
  • 其他资源
  • 学习
  • 工作
  • 分类
  • 标签
  • 归档
  • 我
  • 友链
GitHub (opens new window)
  • 基础科学

  • 网络技术

    • 关于DAC导航建立过程的一些记录
    • 使用jsDelivr + Github搭建免费CDN
    • Hexo教程和常用命令
    • Freenom免费域名注册
    • Markdown语法初次尝试
    • MongoDB+Vercel+Github+Freenom搭建Twikoo评论系统
      • TOP公告
      • 快速申请GitHub Student Developer Pack
      • 简洁的多引擎搜索主页 DAC-Search
      • ChatGPT试玩,真有那么厉害吗?
      • 体验微软刚推出的新一代AI驱动搜索引擎New Bing
      • New Bing申请通过,赶快来正式体验一下
      • 网易云音乐
      • 每日60秒早报
      • 在Vercel上如何部署Github某个项目的其他分支
      • 使用Shields.io建立几个彩色小徽章
      • Freenom免费域名提供商要倒闭了吗
    • 趣味知识

    • 奇趣
    • 网络技术
    NWUzmed
    2023-01-14
    目录

    MongoDB+Vercel+Github+Freenom搭建Twikoo评论系统

    提示

    根据文章评论模块-Young Kbt blog (opens new window)修改,部分内容来自Twikoo官网 (opens new window)。

    这里介绍使用 MongeDB、Vercel、Github和Freenom 进行全免费评论系统的搭建,付费搭建具体看官网。支持同时开启Gitalk和Twikoo插件,显示双评论系统。

    # 创建 MongoDB 免费数据库

    视频教程(推荐) (opens new window),注意:因为 MongoDB 新版本原因,视频第三步的 Clusters 位置发生改变,记得回来配合文字教程进行操作。 申请 MongoDB 账号,因为评论的数据都将放在 MongoDB 免费数据库里 创建免费 MongoDB 数据库和数据库用户,区域推荐选择 AWS / N. Virginia (us-east-1) 点击左侧菜单的 Databases 列表,找到 Clusters 并点击右侧的 CONNECT,按步骤设置允许所有 IP 地址的连接(为什么? (opens new window)),然后点击第二个 Connect your application 并记录数据库连接字符串,请将连接字符串中的 修改为数据库密码(一定记得删除左右括号<>,否则报错{"code":1000,"message":"bad auth : authentication failed"}),其他不变

    # 申请 Freenom 免费域名

    具体步骤,请查看这篇博客

    # 在 Vercel 上部署 Twikoo

    做好以上两项准备工作之后,我们开始在 Vercel 上部署 Twikoo

    注意

    注意 Vercel 部署的环境需配合 1.4.0 以上版本的 twikoo.js 使用

    申请 Vercel 账号 点击 🔺Deploy 将 Twikoo 一键部署到 Vercel(确保登录了 Vercel,且网页未关闭) img(opens new window) 进入 Settings - Environment Variables,添加环境变量 MONGODB_URI,值为第 3 步的数据库连接字符串,然后 重新部署 deployed 进入 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到「Twikoo 云函数运行正常」的提示 Vercel Domains(包含 https:// 前缀,例如 https://xxx.vercel.app)即为您的环境 id

    # Vdoing 集成

    打开 docs/.vuepress/config.js(新版是 config.ts),在 head 标签里添加如下内容

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

    1.6.8 是版本号,当时我使用的最新版是 1.6.8,可以去官网查看最新版本:点击跳转 (opens new window)。 在 docs/.vuepress/components 目录下创建 Vue 组件:Twikoo.vue。如果不存在 components 目录,则请创建。 添加如下内容(你也可以直接下载我创建的Twikoo.vue):



































































     

































































    <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: "你的 envId",
              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>
    
    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
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    注意
    67 行的 evnId 换成自己的,即 Vercel 部署 Twikoo 的地址 Vercel Domains,如 https://xxx.vercel.app
    
    1
    2

    目前(2021-08-30)的 evnId 如果填写的是 Vercel 提供的地址(如 https://xxx.vercel.app),则评论区无法显示评论,原因是遭到国内的拦截 目前官方给的解决是 evnId 填写自己的域名,即填写的域名需要进行域名解析,映射到 Vercel 提供的地址。和配置域名访问博客一个道理,只不过换成配置域名访问 Twikoo。 写完 Vue 组件,接下来注册使用,在 config.ts 的 plugins 模块下,添加如下内容:

    import { UserPlugins } from 'vuepress/config'
    plugins: <UserPlugins>[
        [
        	{
            	name: 'custom-plugins',
            	globalUIComponents: ["Twikoo"] // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
        	}
        ]
    ]
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    # 管理面板

    下面来认识 Twikoo 的管理面板,配置好上面的内容,就可以启动项目,然后看看效果。在评论区的右边发现有一个「蓝色小齿轮」,这就是管理面板,第一次 点击小齿轮后会让你注册 登录密码,请记住它,如果忘记了密码,请去直接的 MongoDB 数据库修改。 管理面板的用处: 可以查看、删除、隐藏、显示、置顶任意的评论 配置你的个人信息,登录管理面板后评论系统能识别你的身份(博主) 配置反垃圾模块,防止别人发送不雅的评论 配置邮件通知,别人的评论会通过邮件发送给你 到了这一步,就能实现 Gitalk 和 Valine 的评论功能,也就是别人评论 + 你回复,但是这并不是我们选择 Twikoo 的原因。 Twikoo 吸引人的地方在于 反垃圾评论 和 邮件功能提醒,往下看。

    # 反垃圾配置

    这里使用 Akismet 反垃圾服务(免费)。 Akismet (Automattic Kismet) 是应用广泛的一个垃圾留言过滤系统,其作者是大名鼎鼎的 WordPress 创始人 Matt Mullenweg,Akismet 也是 WordPress 默认安装的插件,其使用非常广泛,设计目标便是帮助博客网站来过滤垃圾留言。 注册 akismet.com(opens new window) 选择 Akismet Personal 订阅,复制得到的 Akismet API Key,到 Twikoo 管理面板「反垃圾」模块中配置 反垃圾测试 请填写 viagra-test-123 作为昵称,或填写 akismet-guaranteed-spam@example.com 作为邮箱,发表评论,这条评论将一定会被视为垃圾评论。 需要注意的是,由于 Akismet 服务响应速度较慢(大约 6 秒),影响用户体验,Twikoo 采取 “先放行,后检测” 的策略,垃圾评论会在发表后短暂可见。 垃圾评论不会被删除,只是把评论状态变成 审核中。 审核中 的评论,代表只有发言人和博主能看到,其他人无法看到,原因: 被 Akismet 认为是垃圾评论 博主隐藏了发言人的评论,所以只能发言人和博主看到 解决: 让博主在管理面板 显示 自己的评论 如何在新的客户端(浏览器)进行登录

    博主:在管理面板进行登录 读者:输入曾发表评论时用到的昵称和邮箱

    # 邮件配置

    如果是 Vercel 部署的 Twikoo,请配置国外邮件服务商,避免被邮件服务商判定为垃圾邮件行为,也就是别人的评论不会通过国内的邮箱发送给你,因为 Vercel 位于国外。 PS:邮箱记得开启 POP3、IMAP/SMTP 服务,否则无法通过第三方如 Twikoo 进行登录。

    # 其他

    更多的配置请自行查看管理面板的文字提示,如果想要支持公式、图片之类的(默认支持的空间大小有限制),请看官网的教程。 如果你觉得配置免费版的 Twikoo 很麻烦,那么可以考虑腾讯云开发环境配置(6.9元/月),因为腾讯云自带反垃圾(代替 Akismet)、部署(代替 Vercel)、支持国内邮箱的功能,所以只需要 MongoDB + 腾讯云即可。 目前我没有使用过腾讯云开发环境,所以大家看官网的教程,自行研究。

    编辑此页 (opens new window)
    #MongoDB#Vercel#Github#Freenom#Twikoo#Comment
    上次更新: 2023/02/25, 05:52:41

    ← Markdown语法初次尝试 TOP公告→

    最近更新
    01
    城市街区-Emoji
    02-27
    02
    免费阅读一些知乎盐选内容
    02-27
    03
    New Bing申请通过,赶快来正式体验一下
    02-24
    更多文章>
    Theme by Vdoing | Copyright © 2016-2023 NWUzmed | MIT License | 萌ICP备20232425号
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式