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

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

扫描二维码关注微信公众号,了解更多

---------------------------------------------

基于 Hexo + GitHub Pages 搭建个人博客(三)的更多相关文章

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

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

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

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  3. 基于Hexo+Github Pages搭建的博客

    概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...

  4. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  5. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  6. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  7. 使用github pages搭建个人博客

    一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...

  8. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  9. 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客

    准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm i ...

随机推荐

  1. jwt验证登录信息

    为什么要告别session?有这样一个场景,系统的数据量达到千万级,需要几台服务器部署,当一个用户在其中一台服务器登录后,用session保存其登录信息,其他服务器怎么知道该用户登录了?(单点登录), ...

  2. PHP类的自动加载

    spl_autoload_register(function ($className) { require str_replace('\\', '/', $className '.php'); }) ...

  3. linux下xargs和管道的区别

    管道将前面的标准输出作为后面的标准输入,xargs则将标准输入作为命令的参数 一.简介 1.背景 之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了x ...

  4. 开源软件:NoSql数据库 - 图数据库 Cassandra

    转载原文:http://www.cnblogs.com/loveis715/p/5299495.html Cassandra简介 在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了 ...

  5. jQuery ajax方法success()中后台传来的四种数据类型

    1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async : false, cac ...

  6. c语言文件中关于while(!feof(fp)) 循环多输出一次的问题

      文件中关于while(!feof(fp)) 循环多输出一次的问题   feof(fp)有两个返回值:如果遇到文件结束,函数feof(fp)的值为1,否则为0.   当读到文件末尾时,文件指针并没有 ...

  7. [python]_ELVE_pip2和pip3如何共存

    作者:匿名用户链接:https://www.zhihu.com/question/21653286/answer/95532074来源:知乎著作权归作者所有,转载请联系作者获得授权. 想学习Pytho ...

  8. lsdyna进阶教程-弹性球撞击刚性平板

    在lsdyna基础教程中,我们做了一个关于刚性球撞击弹性平板的粒子,现在我们考虑另外一个问题,如果用弹性球撞击刚性地面该怎么做呢?是不是要从头开始建模,操作步骤是不是一样呢?其实很简单,将球和地面的材 ...

  9. .Net Core 部署在win10 的IIS上注意问题。

    事项一:_Layout.cshtml页面中<environment include="Development"></environment>里应用的样式无用 ...

  10. 一 Django模型层简介(一)

    模型 django提供了一个强大的orm(关系映射模型)系统. 模型包含了你要在数据库中创建的字段信息及对数据表的一些操作 使用模型 定义好模型后,要告诉django使用这些模型,你要做的就是在配置文 ...