关于前端:基于-Hexo-键入评论功能

原文链接：基于 Hexo 键入评论性能

留神：本站的评论零碎已从 Valine 更换成 Twikoo。

前言

本站基于 Hexo 搭建，用的 🦋 hexo-theme-butterfly 主题 v3.7.1，请留神最新的🦋 hexo-theme-butterfly 版本曾经更新到 v4.3.0。

如果你是 v3.7.1 之外的版本，可能有些中央会有出入，请注意。

留神：我的博客根目录门路为【G:/hexo-blog/blog-demo】，下文所说的根目录都是此门路，将用 [BlogRoot] 代替。如果不分明根目录门路，请回到教程 基于 Hexo 从零开始搭建集体博客（二），查看你执行 hexo init xxx 这条命令时所抉择的门路，例如我抉择的门路是【G:/hexo-blog】，我的博客根目录即为【G:/hexo-blog/xxx】。

批改站点配置文件_config.yml，门路为【BlogRoot/_config.yml】。

批改主题配置文件_config.butterfly.yml，门路为【BlogRoot/_config.butterfly.yml】。

若你的主题版本大于 v4.0.0，应该留意到，与 v3.7.1 版本相比，各评论的配置项曾经变的更为精简，具体请参考你所应用主题版本的配置项，只须要将指标信息，填入评论的配置项就行，这里次要举荐应用 Twikoo。

举荐浏览

• 基于 Hexo 从零开始搭建集体博客（一）
• 基于 Hexo 从零开始搭建集体博客（二）
• 基于 Hexo 从零开始搭建集体博客（三）
• 基于 Hexo 从零开始搭建集体博客（四）
• 基于 Hexo 从零开始搭建集体博客（五）
• 基于 Hexo 从零开始搭建集体博客（六）
• 基于 Hexo 键入搜寻性能
• 基于 Hexo 键入分享性能
• 基于 Hexo 键入在线聊天性能
• Hexo + Butterfly 自定义右键菜单

通用配置

从 3.0.0 开始，开启评论须要在 comments-use 中填写你须要的评论，这里参照你主题版本的格局写。

反对双评论显示，只须要配置两个评论（第一个为默认显示）

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
    # - Disqus
    # - Valine
    - Twikoo # 这里依照你主题版本的格局写
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

Twikoo（举荐）

Twikoo 是一个简洁、平安、收费的动态网站评论零碎，基于腾讯云开发。

成果预览

特色

简略

• 收费搭建（应用云开发作为评论后盾，每个用户均长期享受 1 个收费的标准型根底版 1 资源套餐）
• 简略部署（反对一键部署、手动部署、命令行部署）

易用

• 反对回复、点赞
• 无需额定适配，反对搭配浅色主题与深色主题应用
• 反对 API 调用，批量获取文章评论数、最新评论
• 访客在昵称栏输出 QQ 号，会主动补全 QQ 昵称和 QQ 邮箱
• 访客填写数字 QQ 邮箱，会应用 QQ 头像作为评论头像
• 反对评论框粘贴图片（可禁用）
• 反对插入图片（可禁用）
• 反对去不图床、云开发图床
• 反对插入表情（可禁用）
• 反对 Ctrl + Enter 快捷回复
• 评论框内容实时保留草稿，刷新不会失落
• 反对 Katex 公式
• 反对按语言的代码高亮

平安

• 隐衷信息安全（通过云函数管制敏感字段（邮箱、IP、环境配置等）不会泄露）
• 反对 Akismet 垃圾评论检测（需自行注册 akismet.com）
• 反对腾讯云内容平安垃圾评论检测（需自行注册 腾讯云内容平安）
• 反对人工审核模式
• 防 XSS 注入
• 反对限度每个 IP 每 10 分钟最多发表多少条评论

即时

• 反对邮件揭示（访客和博主）
• 反对微信揭示（仅针对博主，基于 Server 酱，需自行注册）
• 反对 QQ 揭示（仅针对博主，基于 Qmsg 酱，需自行注册）
• 反对 QQ 揭示（针对博主 QQ 或者群，基于 go-cqhttp，需本人有服务器）

共性

• 反对自定义评论框背景图片
• 反对自定义“博主”标识文字
• 反对自定义告诉邮件模板
• 反对自定义评论框提示信息（placeholder）
• 反对自定义表情列表（兼容 OwO 的数据格式）
• 反对自定义【昵称】【邮箱】【网址】必填 / 选填
• 反对自定义代码高亮主题

便捷治理

• 内嵌式治理面板，通过明码登录，可不便地查看评论、暗藏评论、删除评论、批改配置
• 反对暗藏治理入口，通过输出暗号显示
• 反对从 Valine、Artalk、Disqus 导入评论

毛病

• 国外申请较慢
• 部署须要实名认证
• 不反对 IE

本站是用 Vercel + MongoDB 计划搭建 Twikoo 评论零碎。
其余几种部署形式这里不做解说，详情请参考：Twikoo 文档。

Vercel 部署

频教程

Twikoo Vercel 部署教程_哔哩哔哩_bilibili

步骤

1. 申请 MongoDB 账号

填好图上所需内容，点击【Create your Atlas account】。

2. 创立收费 MongoDB 数据库，区域举荐抉择【AWS / N. Virginia (us-east-1)】

3. 创立数据库用户，按步骤设置容许所有 IP 地址的连贯（为什么？），填完信息后，点击【Finish and Close】
4. 在 Clusters 页面点击【Connect】，抉择【Connect your appliction】，记录数据库连贯字符串，请将连贯字符串中的 <password> 批改为第三步中数据库明码，留着备用（将在第 7 步中用到）。

5. 申请 Vercel 账号，能够抉择 Github 账号来同步
6. 点击 此链接 将 Twikoo 一键部署到 Vercel

   点击 Create，期待 Deploy 实现，可看到如下成果：

7. 进入【Settings】->【Environment Variables】，增加环境变量【MONGODB_URI】，值为第 3 步的数据库连贯字符串
8. 进入【Deployments】，而后在任意一项前面点击更多（三个点），而后点击【Redeploy】，最初点击上面的【Redeploy】
9. 进入【Overview】，点击【Domains】下方的链接，如果环境配置正确，能够看到“Twikoo 云函数运行失常”的提醒

   Vercel Domains（蕴含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 id

10. 在主题中写入 Twikoo 配置项。
    在主题配置文件 _config.butterfly.yml 中批改以下内容，将你换环境 id 填入对应地位

    # Twikoo
    # https://github.com/imaegoo/twikoo
    twikoo:
      envId: https://xxxxxx.vercel.app/ 
      region: 
      visitor: true
      option:

    参数	解释
    envId	环境 id
    region	环境地区，默认为 ap-shanghai，如果您的环境地区不是上海，需传此参数
    visitor	是否显示文章閲读数
    option	可选配置

    开启 visitor 后，文章页的拜访人数将改为 Twikoo 提供，而不是 不蒜子。

11. 从新编译运行，即可看到成果，点击评论区输入框下方的齿轮状按钮，设置你的治理明码，具体配置信息这里不做解说，依照注解进行配置即可。

Disqus

1. 返回 Disqus 官网 注册账号
2. 登入后点击首页的【GET STARTED】，抉择【I want to install Disqus on my site】
3. 输出下图中所需信息：Websit Name，Category，Language，点击【Create Site】

4. 【Select Plan】抉择 Basic
5. 接下来在【Configure Disqus】输出一些配置信息
6. 在【Setup Mederration】抉择一个模式就好，最初点击【Complete Setup】

7. 在主题配置文件 _config.butterfly.yml 中批改以下内容，将你在第 3 步输出的【Websit Name】填入到 shortname

   # disqus
   # https://disqus.com/
   disqus:
     shortname: tzy1997-blog

8. 从新编译运行，即可看到如下成果：

Disqusjs

与 Disqus 一样，但因为 Disqus 在中国大陆无法访问，应用 Disqusjs 能够在无法访问 Disqus 时显示评论。具体可参考 Disqusjs。

1. 配置 Disqus Application，在 Disqus API Application 处注册一个 Application。
2. 点击进入新创建的 Application，获取你的 API Key（公钥）。
3. 在 Application 的 Settings 页面设置你应用 DisqusJS 时的域名。Disqus API 会查看 API 申请的 Referrer 和 Origin。

4. 在主题配置文件 _config.butterfly.yml 中配置以下内容：

   # Alternative Disqus - Render comments with Disqus API
   # DisqusJS 評論系統，能够實現在網路審查地區載入 Disqus 評論列表，兼容原版
   # https://github.com/SukkaW/DisqusJS
   disqusjs:
     shortname: 
     siteName: 
     apikey: 
     api: https://disqus.skk.moe/disqus/
     nocomment: # display when a blog post or an article has no comment attached
     admin:
     adminLabel:

   各参数解释如下：

   参数	解释
   shortname	你的 Disqus Forum 的 shortname，你能够在 Disqus Admin – Settings – General – Shortname 获取你的 shortname 必须，无默认值
   siteName	你站点的名称，将会显示在「评论根底模式」的 header 中；该配置应该和 Disqus Admin – Settings – General – Website Name 统一 非必须，无默认值
   apikey	DisqusJS 向 API 发动申请时应用的 API Key，你应该在配置 Disqus Application 时获取了 API Key。 DisqusJS 反对填入一个 蕴含多个 API Key 的数组，每次申请时会随机应用其中一个；如果你只填入一个 API Key，能够填入 string 或 Array。 必填，无默认值
   api	DisqusJS 申请的 API Endpoint，通常状况下你应该配置一个 Disqus API 的反代并填入反代的地址。你也能够间接应用 DISQUS 官网 API 的 Endpoint https://disqus.com/api/，或是应用我搭建的 Disqus API 反代 Endpoint https://disqus.skk.moe/disqus/。如有必要能够浏览对于搭建反代的 相干内容 倡议，默认值为 https://disqus.skk.moe/disqus/
   nocomment	没有评论时的提醒语（对应 Disqus Admin – Settings – Community – Comment Count Link – Zero comments） 非必须，默认值为 这里熙熙攘攘的，一条评论都没有
   admin	你的站点的 Disqus Moderator 的用户名（也就是你的用户名）。你能够在 Disqus – Settings – Account – Username 获取你的 Username 非必须，无默认值
   adminLabel	你想显示在 Disqus Moderator Badge 中的文字。该配置应和 Disqus Admin – Settings – Community – Moderator Badge Text 雷同 非必须，无默认值

5. 从新编译运行，即可看到如下成果：

Livere

1. 返回 来必力官网 注册账号。
2. 进入治理页面。
3. 抉择默认的收费 City 版，点击【当初装置】
4. 输出根本的信息，点击【申请获取代码】
5. 获取【data-uid】

6. 在主题配置文件 _config.butterfly.yml 中配置以下内容：

   # livere (來必力)
   # https://www.livere.com/
   livere:
     uid: 这里填你的 uid

7. 从新编译运行，即可看到如下成果：
8. 能够在治理界面查看 数据分析，进行评论治理，评论揭示等。

Gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。个性如下：

• 应用 GitHub 登录
• 反对多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
• 反对集体或组织
• 无烦扰模式（设置 distractionFreeMode 为 true 开启）
• 快捷键提交评论（cmd|ctrl + enter）

首先，您须要抉择一个公共 github 存储库（已存在或创立一个新的 github 存储库）用于存储评论。

而后须要点击右上角头像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】创立【GitHub Application】进行根本配置，找不到中央间接 点击这里申请。

【Homepage URL】填写博客的仓库地址，例如我的填写https://tzy13755126023.github.io。
【Authorization callback URL】填写以后应用的域名，例如我的填写https://tzy1997.com，没有域名，跟【Homepage URL】保持一致即可。

而后可看到指标 client_id，持续点击【Generate a new client secret】即可失去指标【client_secret】。

大抵的根本信息如下图：

最初在主题配置文件 _config.butterfly.yml 中配置以下内容：

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: 'GitHub Application Client ID'
  client_secret: 'GitHub Application Client Secret'
  repo: 'GitHub repo'
  owner: 'GitHub repo owner'
  admin: 'GitHub repo owner and collaborators, only these guys can initialize github issues'
  language: en # en, zh-CN, zh-TW, es-ES, fr, ru
  perPage: 10 # Pagination size, with maximum 100.
  distractionFreeMode: false # Facebook-like distraction free mode.
  pagerDirection: last # Comment sorting direction, available values are last and first.
  createIssueManually: true # Gitalk will create a corresponding github issue for your every single page automatically
  option:

成果如下：

详情可参考 Gitalk Readme。

Valine

Valine 诞生于 2017 年 8 月 7 日，是一款基于 LeanCloud 的疾速、简洁且高效的无后端评论零碎。

因为 Valine 的国际版共享域名将于 2022 年 8 月 1 日起不再向中国大陆的最终用户提供服务，国际版共享域名仅服务于海内用户。本站已弃用 Valine，改为 Twikoo。如果你更喜爱 Valine 的格调，你能够应用它的国区版。

参考教程

Valine 文档
Hexo 优化 — Valine 扩大之邮件告诉
Valine 增加验证码、博主标签及评论微信、QQ 告诉

成果如下：

详情可参考 基于 Hexo 从零开始搭建集体博客（六），其中有提到过 Valine。

Waline

Waline 是一款从 Valine 衍生的带后端评论零碎。能够将 Waline 等价成 With backend Valine。

具体配置可参考 waline 文档，这里也不做具体解说。

在主题配置文件 _config.butterfly.yml 中配置以下内容：

# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
  serverURL: # Waline server address url
  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
  emojiCDN: # emoji CDN
  bg: # waline background
  visitor: false
  option:

开启 pageview 后，文章页的拜访人数将改为 Waline 提供，而不是 不蒜子。

Utterances

与 Gitalk 一样，基于 GitHub issues 的评论工具。绝对于 Gitalk，其绝对须要权限较少。

具体配置可参考 Utterances。

在主题配置文件 _config.butterfly.yml 中配置以下内容：

# utterances
# https://utteranc.es/
utterances:
  repo:
  # Issue Mapping: pathname/url/title/og:title
  issue_term: pathname
  # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark

成果如下：

Giscus

一个基于 GitHub Discussions 的评论，具体配置请参考 Giscus 文档。

在主题配置文件 _config.butterfly.yml 中配置以下内容：

# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  theme:
    light: light
    dark: dark
  option:

成果如下：