Hexo博客添加评论功能

1. 背景说明

  • 考虑到每篇博客都有可能有错误的地方,需要用户及时反馈,我能相应的做出修改,逐渐完善整个博客系统,所以评论功能对我来说非常重要.

2. 评论功能概述

目前博客站点使用的评论功能,多说,网易云跟贴都已经下线。Disqus 也被挡在墙外,友言貌似也不行。

可用的评论系统大概有:

综上,最终采用了 Utterances,理由:安装配置简单,本人的博客偏向技术博客,大多数技术人员几乎都有 github 账号,省去用户注册的麻烦,用户体验会更好一些.

2.1. 开启 Utterances 评论功能 (推荐)

  • 比较了几个第三方评论插件,还是 Utterances 配置最简单,权限最小最安全

  • 创建存放 comments 的代码仓库,必须为 public,且可创建 issue。

  • install utterances app 点击这个链接安装 utterances app 到刚刚创建的那个仓库。

    • 点击安装,选择你用来存放评论的库,选择相应的权限,点击保存.
  • 编辑主题配置文件 themes/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Utterances
    # For more information: https://utteranc.es
    utterances:
    enable: true
    repo: yoour_github_id/the_repo_name_to_store_comments # Github repository name
    # Available values: pathname | url | title | og:title
    issue_term: pathname
    # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
    theme: github-light
  • 编辑站点配置文件 _config.yml

    1
    2
    3
    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: https://your_site_url
  • 重启即 Hexo 可以看到评论区

3. Trouble Shooting

  1. 评论区点击登录后,登录成功授权成功后被导航至 example.com 的问题
  • 原因分析
    • 站点配置有一项,默认配置是http://example.com, utteranc 默认去读这个配置,作为验证授权后返回的站点,需要修改这个 url
1
2
3
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://guoapeng.github.io
  • 解决方案

4. 相关阅读

使用 Hexo 搭建自己的博客网站

Hexo 命令详解

Hexo 博客添加评论功能

Hexo 配置 Next 主题

Hexo 博客搜索引擎优化

作者

鹏叔

发布于

2021-10-04

更新于

2024-07-10

许可协议

评论