【12】2小时还你一个集打赏、评论、RSS功能于一身的个人博客

​

本文是《程序猿叨叨叨》系列文章中的其中一篇，想要了解更多相关的文章，欢迎猛戳蓝字前往阅读。undefined 备注：该教程基于Hexo 2.x版本，目前Hexo是3.x版本，照本教程实现有可能会出现404错误，笔者目前还未找时间去解决，待笔者找时间解决该问题后，再写一篇该问题的解决教程，给各位读者带来困扰，还请多包涵！若有读者遇到类似的问题解决了，欢迎在文章的评论区评论留言，我们相互学习！

前情提要

几个月前，写过几篇关于Hexo博客搭建的教程，最近几天，发现有很多读者私信我一些Hexo搭建过程中遇到的问题，重新燃起了我对Hexo博客的兴趣，于是花了一两天的时间重新将Hexo博客搭建了一下，并通过配置实现了一些附加功能，写下此篇博客，希望可以帮助读者们深入Hexo博客的使用。

本篇教程基于NexT主题的博客配置，实现更换主题、评论、打赏等功能，接下来根据这些功能进行分点描述，附上个人博客以供比对参考：程序员技术栈。

搭建基本Hexo博客

Hexo博客基本搭建参考：《20分钟教你使用hexo搭建github博客》一文，笔者按照教程的顺序一步一步来，是没有出现错误的，如果读者们在搭建的时候遇到了问题不知如何解决，笔者会尽自己所能帮助读者，并将遇到的问题及解决方法附在文章下方。

Hexo博客绑定域名

关于Hexo博客如何绑定自己的域名，详情可参阅《hexo搭建的Github博客绑定域名》一文。

更换Hexo主题

笔者更换后的主题为NexT，其Github网址为：https://github.com/iissnan/hexo-theme-next 。首先将NexT的主题源文件下载到本地，使用Git克隆指令如下：

git clone https://github.com/iissnan/hexo-theme-next themes/next

下载后，将压缩包解压缩，复制其中名称为next的文件夹到Hexo的主题目录下，主题目录的路径为：

Hexo博客根目录/themes/

效果如下图所示：

​

​

NexT主题包

在Hexo根目录下有一个以_config.yml命名的文件（下称站点配置文件），用Sublime等文本编辑器打开，在其中找到theme属性，将其由landscape改为next。

​

​

修改主题

然后在Hexo根目录执行部署Hexo指令：

// 清理缓存
hexo clean
// 生成文件
hexo generate
// 部署
hexo deploy

便可以在远程的博客上看到修改主题后的样式了。

​

​

NexT主题样式

设置Hexo主题模式

看到上图，读者可能会产生疑问，为什么自己的主题样式和笔者的不一样，这是因为在Hexo主题中，有三种不同的模式，通过切换模式，让NexT主题显示不一样的样式。在NexT根目录下有一个同样名称为_config.yml，为了区分hexo根目录下的_config.yml，将前者称为主题配置文件，在其中找到scheme属性，如下图所示：

​

​

scheme属性

NexT主题默认使用Muse模式，读者可根据自己的喜好，选择其中一种模式。

设置预览摘要

设置完模式后，读者们会发现，尽管首页显示的是所有文章的列表，但是每一篇文章都显示了所有内容，这样感觉看起来不舒服，这时候可以启用预览摘要模式，在主题配置文件中找到auto_excerpt属性，将enable设置为true ，将length设置为想要预览到的字数，如下图所示：

​

​

设置预览摘要

设置完毕后，调用部署指令，如下：

// 清理缓存
hexo clean
// 生成文件
hexo generate
// 部署
hexo deploy

这里说明一下：上述的部署指令中hexo deploy可以换成hexo server，两者的区别在于，前者是将博客部署到远程的Github上，而后者是运行在本地，通过http://localhost:4000在浏览器中访问。后者是为了调试配置方便而使用，但是最终本地博客还是需要hexo deploy指令将其部署至Github上。

添加评论功能

NexT目前出到5.1.0版本，功能模块已经相当的丰富。NexT主题集成了评论系统，只需要设置相关的属性即可实现功能，其目前支持多说、Disqus、Facebook评论、Hyper评论、网页云跟帖等，其中“多说”是NexT推荐的评论系统，但是多说评论系统不稳定，经常会出现服务异常的问题，如下图所示：

​

​

“多说”服务异常

所以笔者查阅了网上，找到了另一款名为友言的评论系统，它也是NexT已经集成好的，可以直接拿来用的。下面对其操作进行讲解：

• 注册友言账号 打开友言官网，单击“注册”按钮后，按照套路可完成账号注册。
• 获取uid 注册完登录后，在首页单击“后台管理”按钮进入后台界面便可看到自己的用户ID，将其复制下来。

​

​

获取uid      

• 主题配置文件 设置uid 打开主题配置文件，在其中找到属性youyan_uid，然后在:后添加之前复制的uid，如下图所示：

​

​

Paste\_Image.png      

这里强调一下：所有属性的设置，其:后必须有一个空格。

然后部署一下Hexo，可以在本地或远程看到实现的评论功能，如下图所示：

​

​

友言评论功能

在笔者配置评论功能的时候，笔者遇到了一个问题：本地博客有评论功能，而远程博客却没有 。折腾了一下午，始终不知道其原因所在。后来，当笔者对博客绑定自己的域名后，发现远程的博客自动出现了评论功能，这里不清楚是域名的缘故 还是网络延迟 的缘故。若读者们遇到这个情况，可以放放，先配置其他功能。

添加打赏功能

打赏是读者对笔者支持的最大动力，作为经常写博客的笔者来说，打赏功能如果在自己的博客中出现，那真的是求之不得呀（虽然基本不会有人来打赏）！而NexT正好集成了打赏的功能，其实现的思路是放上收款二维码，让读者扫码后支付。笔者添加了微信支付和支付宝支付，所以以此为例：

• 获取微信收款二维码 微信二维码的获取途径还是比较容易的，按照这个教程即可实现，读者们也可以预先设置收款的金额。
• 获取支付宝收款二维码 笔者上网查了很多关于支付宝收款二维码的相关信息，奈何得到的结果不是版本不一致就是商家认证，找了好久，终于找到一个符合要求的教程，读者们可别被“商家平台”这几个字吓到了，普通用户一样可以开通，且不需要相关证件的认证，读者们可根据这个教程获得自己的支付宝收款二维码。
• 添加二维码图片资源 得到二维码图片资源后，读者们可将二维码图片放到NexT根目录/source/images/文件夹下。
• 开启打赏功能 找到主题配置文件，在其最后添加打赏的配置信息:

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: 图片链接或图片相对路径
alipay: 图片链接或图片相对路径

其信息如下图所示：

​

​

开启打赏功能

然后部署一下Hexo，便可实现打赏功能，效果图如下：

​

​

打赏功能效果图

设置侧边栏显示效果

鉴于个人喜好，笔者不是很喜欢在打开一篇文章的时候，刚想好好品读，却因为侧边栏的出现扰乱视觉，所以想对其进行设置。

​

​

侧边栏在文章加载好时出现

在主题配置文件中，找到sidebar的display属性，display属性有四种显示模式：分别为：

post    // 默认显示方式
always  // 一直显示
hide    // 初始隐藏
remove  // 移除侧边栏

笔者将其设置为hide模式，如下图所示：

​

​

设置侧边栏显示效果

读者们可根据个人喜好进行设置。

添加菜单选项

默认情况下，菜单导航栏有首页、归档、关于三个选项，除此之外笔者还添加了分类、标签和关于。在主题配置文件中，找到menu属性，并去掉categories、 tags、about的的注释，如下图所示：

​

​

菜单选项设置

然后在Hexo根目录执行指令如下：

// 添加分类页面
hexo new page "categories"
// 添加标签页面
hexo new page “tags”
// 添加关于页面
hexo new page "about"

执行完上述指令后，在Hexo根目录/source/文件夹下创建三个文件夹，命名分别为：categories、tags、about文件夹，在这些文件夹中分别会创建一个以index命名的Markdown文件，对这三个Markdown文件内容进行修改，使之分别为：

---
title: categories
date: 2017-03-12 22:06:24
type: "categories"
---

---
title: 标签
date: 2017-03-12 17:27:16
type: "tags"
---

---
title: about
date: 2017-03-12 22:07:26
type: "about"
---

完成文件的修改，然后部署Hexo即可完成菜单选项的添加。

添加搜索功能

​

​

导航菜单栏

完成了上述菜单选项的添加后，读者们可以看到菜单栏中还有搜索一项，搜索的功能源于第三方服务——Algolia，接下来看看配置的步骤：

• 注册Algolia，创建Index 在Algolia官网注册一个账户，完成账户注册后，创建一个Index，如下图：

​

​

创建Index    

• 安装Hexo Algolia 在Hexo根目录执行如下指令，进行Hexo Algolia的安装：

npm install --save hexo-algolia

执行完指令后，读者们可能会发现安装失败，或发现安装成功后实现的搜索功能可以搜索但是不可以点击搜索到的文章，这是因为5.1.0版本NexT在package.json文件的配置中存在错误。 到Hexo的根目录，在其中找到package.json文件，修改其中的hexo-algolia属性值为^0.2.0，如下图所示：

​

​

修改package.json文件

"hexo-algolia": "^0.2.0"

然后再执行上述的安装指令。

• 获取Key，修改站点配置 完成Hexo Algolia后，回到Algolia官网的Dashboard，在左侧导航栏选择API Keys一项，跳转到如下图所示的页面。

​

​

获取Key

基于这个页面的Key，编辑站点配置文件，在文件内容最后添加如下图所示的信息，包括 ApplicationID、Search-Only API Key、 Admin API Key和indexName，其中apiKey就是Search-Only API Key：

​

​

Algolia配置信息

• 更新Index 配置好Key后，在Hexo根目录执行hexo algolia来更新Index，若出现如下图所示，则表示更新成功：

​

​

更新Index

若更新失败，则返回上面安装Hexo Algolia的步骤，查看一下hexo-algolia是否安装成功，并核实一下package.json信息是否正确。

• 启用配置搜索功能 修改主题配置文件，在其中找到algolia_search属性，将其enable子属性改为true，然后再看其labels子属性，修改相应的提示文本，使之更加适合自己的风格，属性配置如下图所示：

​

​

启用配置搜索功能    

经过上述的操作后，部署Hexo，便可在博客中添加搜索功能，其效果图如下：

​

​

找到搜索结果

​

​

未找到搜索结果

添加阅读次数统计

笔者以为，写技术博客一方面作为个人知识积累外，更重要的是让读者通过阅读有所收获，而阅读数量作为一篇文章质量好坏的重要参考因素，可以为作者继续文章创作带来信心。抱着这份理解，笔者给自己的博客添加了查看阅读数量的功能。阅读次数统计是基于第三方服务——LeanCloud实现的，其配置详情如下：

• 创建LeanCloud账号 进入LeanCloud官网，按照套路完成注册，这里不做赘述。
• 创建应用 注册并登录LeanCloud后，进入控制台，单击“创建应用”按钮进行应用的创建，输入新应用名称，选择开发版，单击“创建”按钮完成创建，如下图所示：

​

​

创建应用      

• 创建Class 进入到刚刚创建的应用中，选择左侧导航栏的“存储”，然后点击“创建Class”，为了与NexT形成配置关系，将Class名称填为Counter，并选择无限制选项，然后单击“创建Class”按钮完成Class的创建，如下图所示：

​

​

创建Class      点击刚刚创建的Counter，其实质是一张结构表，用来记录文章的浏览量，如下图所示，这里的表可以直接对文章阅读次数进行修改，所以如果想要追求阅读次数的读者可以在表上直接进行修改。      

​

​

Counter表      

• 配置Key 在左侧导航栏的设置界面，单击“应用Key”可以看到应用的App ID和App Key。

​

​

Key      复制ID和Key，然后将其配置到**主题配置文件**中，在文件中找到`leancloud_visitors`属性，将`enable`设置为`true`，然后将之前复制的ID和Key粘贴到相应的属性中。      

​

​

配置ID和Key      

至此，阅读次数统计添加完成，其效果图如下所示：

​

​

添加阅读次数统计

添加RSS

笔者之前虽听过RSS这个名词，但至今不知其为何物、何以用之，望知晓的读者在文章下方留言评论，指点一二。笔者表示对RSS不明觉厉，觉得有必要添加上，提升一下逼格，所以接下来看看RSS功能的添加：

• 安装 hexo-generator-feed 插件 RSS需要有一个Feed链接，而这个链接需要靠hexo-generator-feed插件来生成，所以第一步需要添加插件，在Hexo根目录执行安装指令：

npm install hexo-generator-feed --save

• 配置feed信息 在站点配置文件中追加如下图所示的信息：

​

​

RSS配置      `feed`属性下的各个子属性的含义借用feed官方英文解释如下： 

• type - Feed type. (atom/rss2)
• path - Feed path. (Default: atom.xml/rss2.xml)
• limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
• hub - URL of the PubSubHubbub hubs (Leave it empty if you don't use it)
• content - (optional) set to 'true' to include the contents of the entire post in the feed.

​

如此这般，RSS功能添加完成，效果图如下：

​

​

RSS效果

单击RSS按钮，跳转如下界面：

​

​

RSS跳转结果

添加社交链接

笔者希望在个人博客中加入自己的简书和Github链接以提高访问量，接下来了解一下社交链接如何添加：

• 添加链接 在主题配置文件中找到social属性，在其下方添加社交链接，其格式为：

社交平台名称：链接

笔者添加的内容如下图所示：

​

​

添加社交链接

• 添加链接图标 读者们可根据自己喜好，启用显示链接的图标，链接的图标全部来自于Font Awesome ，其配置方式也很简单，在主题配置文件中找到social_icons，修改其状态值为true，然后配置对应链接的图标，其格式为：

社交平台名称: Font Awesome中的图标的名字（区分大小写）

如下图所示：

​

​

添加链接图标

如笔者添加的社交链接中有简书，但是Font Awesome平台没有简书的图标，这时候就会显示默认的图标：

​

​

默认图标

这里笔者遇到了一个问题，就是笔者启用了图标以后，发现不论Font Awesome平台有没有对应的社交平台的图标，最终显示效果都是默认的图标，若遇到相同问题的读者们解决了这个问题，望可以在文章下方评论留言，感谢！

​

​

全部显示默认图标的社交链接

添加友情链接功能

笔者身边有很多志同道合的好友，也都有用其他博客搭建工具如wordpress、jekyll等来搭建自己的博客，写的文章多了，当然希望可以收获更多的流量，这时候好友之间就会互相帮忙，在自己的博客上添加好友的博客链接。接下来看一下如何实现这个功能：

在主题配置文件中找到links属性，修改links_title属性的值为“友情链接”（也可以是其他文案），然后添加上好友的博客名称和博客地址，其格式如下：

博客名称: 博客链接

如下是笔者的配置信息：

​

​

Paste_Image.png

配置完成后部署Hexo，即可实现友情链接的效果，附图如下：

​

​

友情链接

写在后面

其实笔者本篇文章是在阅读完NexT的官方配置文档后编写的，考虑到文档内容较多，且其中很多功能一般用不到，就挑选了其中比较常用的功能。在阅读官方文档的时候，发现文档中有些地方将主题配置文件与站点配置文件弄混了，因此本篇文章也算是对官方文档中的错误进行更正吧！当然本文肯定有描述不够清楚的地方，读者们有疑问的话，欢迎在文章下方留言，亦可参阅官方文档进行对比配置，最后附上官方文档的链接供读者们参阅： http://theme-next.iissnan.com/

疑难解答

• 密钥生成的位置在哪里？ Windows平台：C:/Users/用户名/.ssh/ Mac OS平台：~/.ssh/
• .ssh文件找不到 .ssh文件以.开头，在一些操作系统中是隐藏文件，需要将隐藏文件设置可见。
• npm install时，出现npm error: RPC failed错误 开启访问外国网站软件，或将重新设置npm镜像为淘宝的npm镜像，修改操作详见：http://blog.csdn.net/zhy421202048/article/details/53490247
• 执行**hexo deploy**指令是出现Deployer not found: git错误 在终端或命令行执行指令：

npm install hexo-deployer-git --save

然后执行heo deploy指令。

• 第一次hexo deploy以后，远程的博客报出404错误 Github中仓库的命名没有按照Github昵称+.github.io的规则来。
• hexo deploy以后，远程的博客没有更新 原因是部署延迟后执行hexo deploy指令前为执行hexo generate指令。

更新20170314

• 关于**hexo**指令简写 文中提到的hexo指令可以简写，其简写方式如下：

hexo generate --- hexo g
hexo deploy --- hexo d
hexo server --- hexo s

更新20170722

• themes**文件夹下的**nexT**文件夹里的内容无法上传到Github** 将nexT文件夹压缩，以压缩文件的形式上传到Github进行备份。
• 关于RSS的使用 最近有读者私信我，发现使用Safari订阅的文章无法访问：

​

​

      笔者尝试了一下，发现了RSS的作用，之前文章中提到的RSS：      

​

​

      点击RSS后，会在浏览器的订阅栏中出现博客最新的5篇文章，而读者访问不了订阅文章的原因是配置RSS的时候，笔者使用的是inerdstack.com的域名，后来笔者更换了域名，RSS没有更新，所以文章无法访问，只需要在站点配置文件中将url改为更新后的域名即可。

更新20170912

​