基于 Hexo + GitHub Pages 搭建个人博客(三)

这个系列我们前面已经更新了两篇,点击下列链接可直接访问:

基于 Hexo + GitHub Pages 搭建个人博客(一)

基于 Hexo + GitHub Pages 搭建个人博客(二)

一、添加扫描二维码关注功能

打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式:

# Wechat Subscriber
wechat_subscriber:
  enabled: true			# 打开图片显示功能
  qcode: /images/wechat-qcode.jpg	# 需要显示的二维码图片
  description: 扫描二维码关注微信公众号,了解更多	# 在图片的底部添加描述

配置完成后,切记将所需要扫描的二维码图片放置在 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 : 点击这里可以直接新建

新建 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,后续如果有好的解决办法,再更新吧。

关注微信公众号compassblog,了解更多

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏友弟技术工作室

如何在CLI上管理密码

基于密码的认证在网络盛行的今天,你可能需要或者已经使用了某种密码管理工具来跟踪管理你正在使用的所有密码。有各种各样的在线或离线服务或者软件工具用于完成此类事情,...

51611
来自专栏散尽浮华

Linux下快速迁移海量文件的操作记录

有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,...

3197
来自专栏网络

强大的开源网络侦查工具:IVRE

IVRE简介 IVRE(又名DRUNK)是一款开源的网络侦查框架工具,IVRE使用Nmap、Zmap进行主动网络探测、使用Bro、P0f等进行网络流量被动分析,...

3747
来自专栏coding

vagrant极简教程:快速搭建centos7前言vagrant简介基本使用小结

1264
来自专栏性能与架构

查看操作系统负载

当我们系统有问题的时候,不要急于去调查我们代码 首先要看的是操作系统的报告,看看操作系统的CPU利用率,看看内存使用率,看看操作系统的IO,还有网络的IO,网络...

3636
来自专栏菩提树下的杨过

spring cloud: 使用consul来替换config server

上一篇提到了,eureka 2.x官方停止更新后,可以用consul来替代,如果采用consul的话,其实config server也没必要继续使用了,cons...

2213
来自专栏云计算教程系列

在Ubuntu 16.04上安装OpenVAS 8

OpenVAS(开放式漏洞评估系统)是一个客户端/服务器架构,它常用来评估目标主机上的漏洞。OpenVAS是Nessus项目的一个分支,它提供的产品是完全地免费...

2382
来自专栏移动开发的那些事儿

IM二分法智能心跳策略

1663
来自专栏腾讯移动品质中心TMQ的专栏

Appium:轻松玩转app+webview混合应用自动化测试

Appium这个听起来既生疏也熟悉的自动化测试工具,比起原生的UiAutomator可能是异常的不起眼,可是却是有自身独当一面的能力,可以完成许多高难度作业,完...

3.4K1
来自专栏Android先生

20分钟教你使用hexo搭建github博客

备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇...

1232

扫码关注云+社区

领取腾讯云代金券