本站评论系统

前言

比较流行的静态网站评论系统有 Gitalk、 Valine、 Twikoo。

• Gitalk 是基于 Github Issue (opens new window)
• Valine 是基于 LeanCloud (opens new window)
• Twikoo 是基于 Tencent CloudBase (opens new window)

VuePress 使用 Gitalk 或者 Valine 可以通过 vuepress-plugin-comment (opens new window) 插件进行快速搭建

插件安装：

yarn add vuepress-plugin-comment -D

Gitalk

Gitalk 官方文档 (opens new window)

1. Gitalk 使用 github 账号登录，需要 OAuth Application 权限，点击这里去申请 (opens new window)

应用参数说明

• Application name：授权时对外的应用名字。这里填写你的博客名称
• Homepage URL：应用的根url地址，类似于首页地址，不带任何参数。这里填写你的博客首页地址
• Application description：应用的描述。这里写上你的博客描述
• Authorization callback URL：应用操作后的回调地址。这里填写你的博客首页地址即可

申请成功后就会得 Client ID 和 Client Secret。如下：

提示

这里可能你还没部署你的博客，本地调试的话博客首页地址可以先填 http://localhost:8080/
可以在 Github/Settings/Developer settings/Oauth Apps/ 下修改

2. 创建一个 GitHub 仓库 gitalk-comment-blog，使用该仓库的 issues 来存储评论信息。你也可以直接使用你存储博客文件仓库的 issues 来存储评论信息。

3. 在插件配置 docs/.vuepress/config/plugins.js 中新增 vuepress-plugin-comment 插件的配置

module.exports = {
  plugins: [
    ...,  // 其他插件配置
    [
      'vuepress-plugin-comment',
      {
        choosen: 'gitalk', 
        options: {
          clientID: 'GitHub Application Client ID',  // 你的 client ID
          clientSecret: 'GitHub Application Client Secret',  // 你的 client secret
          repo: 'gitalk-comment-blog', // GitHub 仓库, 评论就存储在此仓库的 Issues 中
          owner: 'foreverRuns', // GitHub仓库所有者
          admin: ['foreverRuns'], // 对仓库有写权限的人
          // distractionFreeMode: true,
          pagerDirection: 'last', // 'first'正序 | 'last'倒序
          id: '<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>', //  页面的唯一标识,长度不能超过50, 否则会造成请求issues接口失败，出现422状态码。
          title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
          labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
          body: '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>', // GitHub issue 的内容
        }
      }
    ]
  ]
}

4. 在全局样式文件 docs/.vuepress/styles/index.styl 中重置 Gitalk 评论模块的样式

// vuepress-plugin-comment Gitalk 评论区颜色重置
.gt-container
  .gt-ico-tip
    &::after
      content: '。( Win + . ) 或 ( ⌃ + ⌘ + ␣ ) 打开表情'
      color: #999
      font-size: .8rem
  .gt-meta
    border-color var(--borderColor)!important
  .gt-comments-null
    color var(--textColor)
    opacity .5
  .gt-header-textarea
    color var(--textColor)
    background rgba(180,180,180,0.1)!important
  .gt-btn
    border-color $accentColor!important
    background-color $accentColor!important
  .gt-btn-preview
    background-color rgba(255,255,255,0)!important
    color $accentColor!important
  a
    color $accentColor!important
  .gt-svg svg
    fill $accentColor!important
  .gt-comment-content,.gt-comment-admin .gt-comment-content
    background-color rgba(150,150,150,0.1)!important
    &:hover
      box-shadow 0 0 25px rgba(150,150,150,.5)!important
    .gt-comment-body
      color var(--textColor)!important

配置好后，重启项目，可以看到如下的评论模块

点击按钮去授权登录，然后就开启评论功能啦。

5. 评论管理

评论就存储在你设置的仓库 Issues 中，需要删除直接去里面进行删除即可

Valine

Valine 官方文档 (opens new window)

Valine 是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统，使用简单，可以自定义名字、头像，并且无需登录任何账户。 由于 Gitalk 需要登录 github 账户，在国内经常连接不上，所以目前本站评论系统使用的是 Valine

1. 注册 LeanCloud 账号，点击这里去注册 (opens new window)，按要求填写注册即可，注册完成需要去邮箱验证激活。

登录你的 LeanCloud，点击左上角 创建应用 按钮，填写基本信息并创建应用

进入刚才创建的应用，然后侧边栏中选择 设置/应用凭证，获取你的 AppID 和 AppKey

2. 在插件配置 docs/.vuepress/config/plugins.js 中新增 vuepress-plugin-comment 插件的配置

module.exports = {
  plugins: [
    ...,  // 其他插件配置
    [
      'vuepress-plugin-comment',
      {
        // 具体参数请看官网：https://valine.js.org/
        choosen: 'valine',
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId', //上面你自己获取的AppID 和 AppKey
          appKey: 'Your own appKey',
          path: '<%- frontmatter.commentid || frontmatter.permalink %>',
          placeholder: '评论点啥 ~~~', // 评论框占位提示符
          avatar: 'monsterid', // 小怪物头像. 目前非自定义头像有7种默认值可选: https://valine.js.org/avatar.html
          pageSize: 10, // 评论列表分页，每页条数
          visitor: true, // 文章访问量统计
          recordIP: false, // 是否记录评论者 IP 地址
          enableQQ: true, // 是否启用昵称框自动获取 QQ 昵称和 QQ 头像, 默认关闭
        }
      }
    ]
  ]
}

注意

不管是 Gitalk 的 Client ID 和 Client secret，还是 Valine 的 AppID 和 AppKey，都属于私密数据，我们不应该直接写在配置中，这一部分的处理会在 本站部署 中说明

3. 在全局样式文件 docs/.vuepress/styles/index.styl 中重置 Valine 评论模块的样式

// vuepress-plugin-comment aline 评论区样式重置
#valine-vuepress-comment
  .vpanel
    color var(--textColor)
    background rgba(180,180,180,0.1)
    margin-top 20px
    .vedit
      #veditor
        background url('/img/comment.png')
        background-position 95% 95%
        background-size 16rem 10rem
        background-repeat no-repeat
    .vrow
      .vbtn
        border-color $accentColor
        background-color $accentColor
        color white
  .vcards
    .vh
      border-bottom none!important
    .vcard
      color var(--textColor)
      background rgba(180,180,180,0.1)
      margin 20px 0
      padding-top 10px!important
      box-shadow 0 0 15px rgba(150,150,150,.5)!important
      &:hover
        box-shadow 0 0 15px rgb(150,150,150,.5)!important
      .vquote
        color var(--textColor)
        padding-left 0!important
        border-left none!important
        .vcard
          margin-right 20px
          box-shadow 0 0 8px rgba(150, 150, 150, 0.5)!important
      .vnick
      .vat
      .at
        color $accentColor
      .vat
        padding-right 20px
      .vimg
        margin-left: 10px

配置好后，重启项目，可以看到如下的评论模块

4. 评论管理

评论就存储在你的 LeanCloud 应用中的 数据存储/结构化数据/Comment 中，需要删除勾选对应的评论并删除即可

Twikoo

Twikoo 官方文档 (opens new window)