hexo学习实用技能github博客

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

2017-03-13  本文已影响11626人  代码咖啡

本文是《程序猿叨叨叨》系列文章中的其中一篇，想要了解更多相关的文章，欢迎猛戳蓝字前往阅读。

备注：该教程基于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已经集成好的，可以直接拿来用的。下面对其操作进行讲解：

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

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

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

添加打赏功能

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

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，接下来看看配置的步骤：

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

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

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

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


找到搜索结果
未找到搜索结果

添加阅读次数统计

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

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

添加阅读次数统计

添加RSS

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

npm install hexo-generator-feed --save

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

RSS效果

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

RSS跳转结果

添加社交链接

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

社交平台名称：链接

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


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

如下图所示：


添加链接图标

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


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

添加友情链接功能

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

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

博客名称: 博客链接

如下是笔者的配置信息：


Paste_Image.png

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

友情链接

写在后面

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

疑难解答

npm install hexo-deployer-git --save

然后执行heo deploy指令。

更新20170314

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

更新20170722

更新20170912

上一篇下一篇

猜你喜欢

热点阅读