前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >搭建独立博客,这款评论插件不能错过

搭建独立博客,这款评论插件不能错过

作者头像
oec2003
发布2020-01-02 17:12:03
8020
发布2020-01-02 17:12:03
举报
文章被收录于专栏:不止dotNET
微信公众号因为申请的时间晚,一直到现在都无法开通评论功能,之前博客一直使用的多说作为评论系统,自从多说关闭后,好多年都处于无评论状态,最近发现 gitalk 还不错,所以在博客中进行了对 gitalk 的集成,特此记录。

环境

  • hexo: 3.9.0
  • hexo-cli: 2.0.0
  • theme:maupassant
  • gitalk:1.1.4

使用原因

1、支持 Markdown 语法 2、采用 github issue 实现,比较清爽(无广告) 3、被墙的可能性较小

配置步骤

1、在 github 中创建评论项目 2、在 github 中设置认证 3、在 hexo 中安装 gitalk 4、对 hexo 的主题 maupassant 做相关设置 5、发布

在 github 中创建评论项目

github 中创建一个公开项目,例如,我创建了一个名为 hexo-comments 的公开项目,最后项目的访问地址为:https://github.com/oec2003/hexo-comments

(图1)

github 设置认证

打开 https://github.com/settings/applications/new ,进行相关设置,如下图:

(图2)

  • Application name:随便取个名称
  • Homepage URL:博客的地址
  • Application description:描述
  • Authorization callback URL:配置在 github 中创建的评论项目的地址

配置好后,点击 Register application 按钮即可。如果想要修改配置内容,可以在 github 中点击「右上角图标」->「Settings」->「Developer settings」->「OAuth Apps」

(图3)

点击右侧的 hexo-comments 可以查看相关的 id 和秘钥,在后面的配置中会用到该信息

(图4)

安装 gitalk

在现有的hexo项目中安装 gitalk,执行命令 cnpm i --save gitalk 如下图:

(图5)

hexo 主题设置

我的博客主题改自 maupassant ,当时的版本中并不支持对 gitalk 的支持,只需要进行下面的步骤就可以完成对 gitalk 的集成:

1、在 maupassant 主题下的 _config.yml 文件中添加 gitalk 相关配置

(图6)

代码语言:javascript
复制
gitalk:
  enable: true ## 设置true为开启gitalk
  owner:  oec2003 ## github的登录名
  repo:  hexo-comments ## 注意:此处设置为在github中创建的评论项目的名称,而非完全访问地址
  client_id:  xxx ## 见图4
  client_secret:  xxx ## 见图4
  admin:  oec2003 ## github的登录名

2、配置评论模板,在 maupassant->layout->_partial->comments.jade 文件中添加如下内容

代码语言:javascript
复制
if theme.gitalk.enable == true
    #container
    link(rel='stylesheet', type='text/css', href='//unpkg.com/gitalk/dist/gitalk.css?v=' + theme.version)
    script(type='text/javascript' src='//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js?v=' + theme.version)
    script(type='text/javascript' src='//unpkg.com/gitalk/dist/gitalk.min.js?v=' + theme.version)
    script.
      var gitalk = new Gitalk({
        clientID: '#{theme.gitalk.client_id}',
        clientSecret: '#{theme.gitalk.client_secret}',
        repo: '#{theme.gitalk.repo}',
        owner: '#{theme.gitalk.owner}',
        admin: ['#{theme.gitalk.admin}'],
        id: md5(location.pathname),
        distractionFreeMode: false
      })
      gitalk.render('container')

(图7)

发布

执行下面命令进行构建和发布

代码语言:javascript
复制
hexo g
hexo d

效果如下:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 不止dotNET 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 环境
  • 使用原因
  • 配置步骤
  • 在 github 中创建评论项目
  • github 设置认证
  • 安装 gitalk
  • hexo 主题设置
  • 发布
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档