这个系列我们前面已经更新了两篇, 点击下列链接可直接访问:
基于 Hexo + GitHub Pages 搭建个人博客(一)
https://mp.weixin.qq.com/s?__biz=MzU5MTE0ODcwNQ==&mid=2247484100&idx=1&sn=5051ed4c889747259fa00765a1286f62&chksm=fe32210ac945a81c2ce6e8dbaefebc1f44fbde6de3642fe1d61e2e61d292ffa32277dae5528d#rd
基于 Hexo + GitHub Pages 搭建个人博客(二)
https://mp.weixin.qq.com/s?__biz=MzU5MTE0ODcwNQ==&mid=2247484105&idx=1&sn=eee8bc1ab50d4a57292039079986d69d&chksm=fe322107c945a81147bf2eb62fcb270439059944c778154e1af42171d559f22bf99e0f6e8d6c#rd
一, 添加扫描二维码关注功能
打开 themes 目录下的 next 主题配置文件, 找到 Wechat Subscriber 标签, 将该标签下的配置改成如下形式:
- # Wechat Subscriber
- wechat_subscriber:
- enabled: true # 打开图片显示功能
- qcode: /images/wechat-qcode.jpg # 需要显示的二维码图片
配置完成后, 切记将所需要扫描的二维码图片放置在 images 文件夹下面, 否则系统找不到图片.
结果如下图所示:
二, 添加文章赞赏功能
打开 themes 目录下的 next 主题配置文件, 找到 Reward 标签, 将该标签下的配置改成如下形式:
# Reward
reward_comment: 赞赏是最好的支持与鼓励! # 添加打赏描述
- wechatpay: /images/wechatpay.jpg # 微信收款码图片
- alipay: /images/alipay.jpg # 支付宝收款码图片
- #bitcoin: /images/bitcoin.png
配置完成后, 切记将所需要收款码图片放置在 images 文件夹下面, 否则系统找不到图片.
结果如下图所示:
打开 themes 目录下的 next 主题配置文件, 找到 Declare license on posts 标签, 将该标签下的配置改成如下形式:
- # Declare license on posts
- post_copyright:
- enable: true # 激活版权声明模块
- license: CC BY-NC-SA 3.0 # 版权许可协议
- license_url: https://compassblog.github.io/ # 声明的文章的可点击链接(域名)
配置完成后, 执行如下 主目录下打开 Git Bash 命令窗口, 执行如下命令开启 hexo 服务器:
hexo s
浏览器访问, 显示结果如下图所示:
四, 添加 Gitalk 评论系统
1, 什么是 Gitalk
Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件, 这款评论插件使用 Github 登录, 也可以快速提交评论, 其实有一款与 Gitalk 类似的评论插件叫 Gitment, 然而这款有国内大神编写的评论插件已经不再维护, 因此就只能选择国外的 Gitalk 了, 并且 Gitalk 支持移动端.
2, 为什么要用 Gitalk
我们知道 hexo 博客 的 Next 主题支持多种评论系统的继承, 例如 Disqus, 畅言, 网易云跟帖, 多说, 来比力, 友说, 红杏等评论系统, 但是这些评论系统要么不再提供服务, 要么需要科学上网才能够加载, 要么就是龟速加载, 好吧, 我想说的就是 Gitalk , 现在你明白为啥要用 Gitalk 了?
3,Gitalk 评论系统集成
(1)新建一个 GitHub 仓库, 用于存放评论的记录, 如下图所示:
(2)在 GitHub 上新建一个 OAuth application : 点击这里可以直接新建 https://github.com/settings/applications/new
新建 OAuth application 详细说明:
- Application name // 第 (1) 点建立的仓库名称
- Homepage URL // 博客地址
- Application description // 可不填
- Authorization callback URL // 博客地址
如下图所示:
完成后, 我们回获得如下图中的相关信息, 后面可能会用到:
(3)创建 Gitalk 的 swig 文件, 在博客的主目录中打开
themes/next/layout/_third-party/comments
文件夹, 新建 gitalk.swig 文件, 在文件中配置如下代码:
- {% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
- {% if theme.gitalk.enable %} //_config.yml 文件若没有添加 enable: true 可删除该判断
- {% if theme.gitalk.distractionFreeMode %}
- <link rel='stylesheet' href="https://yiyeti.cc/usr/themes/veryse/CSS/gitalk.css">
- <script src="https://yiyeti.cc/usr/themes/veryse/css/gitalk.min.js"></script>
- <script type="text/javascript">
- var gitalk = new Gitalk({
- clientID: '{{theme.gitalk.clientID}}',
- clientSecret: '{{theme.gitalk.clientSecret}}',
- id: window.location.pathname,
- repo: '{{theme.gitalk.repo}}',
- owner: '{{theme.gitalk.owner}}',
- admin: '{{theme.gitalk.admin}}',
- distractionFreeMode: '{{theme.gitalk.distractionFreeMode}}',
- })
- gitalk.render('gitalk-container')
- </script>
- {% endif %}
- {% endif %}
- {% endif %}
(4)在同样的目录下找到并打开 index.swig 文件, 在文件中配置如下代码引入 gitalk.swig 文件:
{% include 'gitalk.swig' %}
(5)在博客的主目录中打开
themes/next/layout/_partials/
文件夹, 找到并打开 comments.swig 文件, 找到最后一个 if 分支, 即下面这个分支代码:
{% elseif theme.valine.appid and theme.valine.appkey %}
<div id="vcomments"></div>
在这个 if 分支后加一个 Gitalk 的分支, 代码如下:
- {% elseif theme.gitalk.enable %}
- <div id="gitalk-container"></div>
(6)在
themes/next/_config.xml
主题配置文件中加入如下配置:
- gitalk:
- enable: true # 是否开启 Gitalk 评论
- owner: # GitHub 用户名
- repo: #仓库名称
- ClientID: ******
- ClientSecret: ******
- admin: # GitHub 用户名
- distractionFreeMode: true
到这里, Gitalk 评论系统基本就已经集成了.
后记: 最近 GitHub 限制了访问 label 的长度, 即当我们博客文章的标题标签转换成 Issue 超过 50 个字符时, Gitalk 评论系统便无法进行初始化, 即对我们博客题目有了限制. 而对于这个问题的解决, 目前的想法是可以通过 md5 转换的方式封装 id, 后续如果有好的解决办法, 再更新吧.
来源: https://www.cnblogs.com/compassblog/p/8911112.html