原文链接：基于 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
参数解释
use应用的评论（请留神，最多反对两个，如果不须要请留空）
留神：双评论不能是 Disqus 和 Disqusjs 一起，因为其共用同一个 ID，会出错
text是否显示评论服务商的名字
lazyload是否为评论开启lazyload，开启后，只有滚动到评论地位时才会加载评论所须要的资源（开启 lazyload 后，评论数将不显示）
count是否在文章顶部显示评论数
livere、Giscus 和 utterances 不反对评论数显示
card_post_count是否在首页文章卡片显示评论数
gitalk、livere 、Giscus 和 utterances 不反对评论数显示

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】。

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


  2. 创立数据库用户，按步骤设置容许所有 IP 地址的连贯（为什么？），填完信息后，点击【Finish and Close】

  3. 在 Clusters 页面点击 【Connect】，抉择【Connect your appliction】，记录数据库连贯字符串，请将连贯字符串中的<password>批改为第三步中数据库明码，留着备用（将在第7步中用到）。


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

    点击 Create，期待 Deploy实现，可看到如下成果：
  6. 进入【Settings】->【Environment Variables】，增加环境变量【MONGODB_URI】，值为第 3 步的数据库连贯字符串
  7. 进入【Deployments】，而后在任意一项前面点击更多（三个点），而后点击【Redeploy】，最初点击上面的【Redeploy】

  8. 进入【Overview】，点击【Domains】下方的链接，如果环境配置正确，能够看到 “Twikoo 云函数运行失常” 的提醒

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

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

    # Twikoo# https://github.com/imaegoo/twikootwikoo:  envId: https://xxxxxx.vercel.app/   region:   visitor: true  option:
    参数解释
    envId环境id
    region环境地区，默认为 ap-shanghai，如果您的环境地区不是上海，需传此参数
    visitor是否显示文章閲读数
    option可选配置
    开启 visitor 后，文章页的拜访人数将改为 Twikoo 提供，而不是 不蒜子。
  10. 从新编译运行，即可看到成果，点击评论区输入框下方的齿轮状按钮，设置你的治理明码，具体配置信息这里不做解说，依照注解进行配置即可。

Disqus

  1. 返回 Disqus官网 注册账号
  2. 登入后点击首页的【GET STARTED】，抉择【I want to install Disqus on my site】
  3. 输出下图中所需信息：Websit Name，Category，Language，点击【Create Site】
参数解释
Websit Nameshort name，且是惟一，像我是设置的 tzy1997-blog，short name 在配置评论时须要用到
Category类别，自行抉择
Language语言，自行抉择
  1. 【Select Plan】抉择 Basic
  2. 接下来在【Configure Disqus】输出一些配置信息
  3. 在【Setup Mederration】抉择一个模式就好，最初点击【Complete Setup】

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

    # disqus# https://disqus.com/disqus:  shortname: tzy1997-blog
  5. 从新编译运行，即可看到如下成果：

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/DisqusJSdisqusjs:  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 统一
    非必须，无默认值
    apikeyDisqusJS 向 API 发动申请时应用的 API Key，你应该在配置 Disqus Application 时获取了 API Key。
    DisqusJS 反对填入一个 蕴含多个 API Key 的数组，每次申请时会随机应用其中一个；如果你只填入一个 API Key，能够填入 string 或 Array。
    必填，无默认值
    apiDisqusJS 申请的 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/gitalkgitalk:  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:

成果如下：