hexo主题和添加评论、打赏、搜索、阅读量等功能

简介

以下绝大部分转载于【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能,原文真是满满的干货,看完学习了许多许多,受益匪浅,在这里感谢下作者,写得太好了,以下是原文加上我自己操作中的一些东西。

更换Hexo主题

安装Hexo默认主题是landscape,长这样:

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

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

下载后,复制其中名称为next的文件夹到Hexo的主题目录下,主题目录的路径为:

1
Hexo根目录/themes/

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

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

1
2
3
hexo clean
hexo g
hexo d

然后就可以看到修改后的主题:

设置NexT的主题模式

Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式。在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config.yml,将前者称为主题配置文件,在其中找到scheme属性,如下图所示:

默认的是Muse模式,我设置的是Mist,在NexT的GitHub主页上展示的是这种模式,很简洁。读者可根据自己的喜好,选择其中一种模式。

设置预览摘要

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

设置方面的修改完成之后,最好都重新clean->generate->deploy一下。

添加评论功能

NexT目前出到5.1.0版本,功能模块已经相当的丰富。NexT主题集成了评论系统,只需要设置相关的属性即可实现功能,其目前支持多说、Disqus、Facebook评论、Hyper评论、网页云跟帖等。这里我们使用的是另一款名为友言的评论系统,它也是NexT已经集成好的,可以直接拿来用的。打开友言官网,注册账号,进入“后台管理”,可以看到自己的用户ID。

打开hexo根目录/themes/next/_config.yml,我们称这个为“主题配置文件”,找到下面这项:

将刚才的用户ID填进去。在这里不得不感叹下NexT的精妙,可供使用者修改的地方非常多,修改添加的时候又特别方便,添加的时候只要去掉注释就好了。

效果如下:

添加打赏功能

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

获取微信收款二维码

微信二维码的获取途径还是比较容易的,按照这个教程即可实现,读者们也可以预先设置收款的金额。

获取支付宝收款二维码

在支付宝首页的“收款”,截图即可得到二维码。

添加二维码图片资源

得到二维码图片资源后,读者们可将二维码图片放到NexT根目录/source/images/文件夹下。

开启打赏功能

找到主题配置文件,在其最后添加打赏的配置信息:

部署后,效果如下:

设置侧边栏显示效果

在主题配置文件中,找到sidebardisplay属性,display属性有四种显示模式:分别为:

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

我设置为hide模式,如下图所示:

添加菜单选项

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

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

1
2
3
4
5
6
// 添加分类页面
hexo new page "categories"
// 添加标签页面
hexo new page “tags”
// 添加关于页面
hexo new page "about"

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
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,如下图:

安装Hexo Algolia

在Hexo根目录执行如下指令,进行Hexo Algolia的安装:

npm install --save hexo-algolia

执行完指令后,读者们可能会发现安装失败,或发现安装成功后实现的搜索功能可以搜索但是不可以点击搜索到的文章,这是因为5.1.0版本NexT在package.json文件的配置中存在错误。

到Hexo的根目录,在其中找到package.json文件,修改其中的hexo-algolia属性值为^0.2.0,本来为^0.1.1,如下图所示:

"hexo-algolia": "^0.2.0"

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

获取Key,修改站点配置

完成Hexo Algolia后,回到Algolia官网的Dashboard,在左侧导航栏选择API Keys一项,跳转到如下图所示的页面:

基于这个页面的Key,编辑站点配置文件,在文件内容最后添加如下图所示的信息,包括 ApplicationIDSearch-Only API KeyAdmin API KeyindexName,其中apiKey就是Search-Only API Key

更新Index

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

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

启用配置搜索功能

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

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

添加阅读次数统计

阅读次数统计是基于第三方服务——LeanCloud实现的,步骤如下:

创建LeanCloud账号

进入LeanCloud官网,注册。

创建应用

注册并登录LeanCloud后,进入控制台,单击“创建应用”按钮进行应用的创建,输入新应用名称,选择开发版,单击“创建”按钮完成创建,如下图所示:

创建Class

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

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

配置Key

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

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

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

添加RSS

安装 hexo-generator-feed 插件

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

npm install hexo-generator-feed --save

配置feed信息

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

feed属性下的各个子属性的含义借用feed官方英文解释如下:

1
2
3
4
5
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按钮,跳转如下界面:

添加社交链接

希望在个人博客中加入自己的邮箱和Github,接下来了解一下社交链接如何添加:

添加链接

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

社交平台名称:链接

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

添加链接图标

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

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

如下图所示:

添加友情链接功能

这次搭建自己的Hexo博客参考了很多大牛的博客,很感谢他们,我想在自己的博客上添加他们的博客链接。接下来看一下如何实现这个功能:

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

博客名称: 博客链接

如下是笔者的配置信息:

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

头像设置

编辑主题配置文件,找到字段avatar,值设置成头像的链接地址。
其中,头像的链接地址可以是:

地址
完整的互联网 URL https://balabala(就举个例子)
站点内的地址 /uploads/avatar.jpg - 需要将你的头像图片放置在 站点的 source/uploads/ (可能需要新建uploads目录)
/images/avatar.jpg - 需要将你的头像图片放置在 主题的 source/images/ 目录下

头像设置示例:

设置完,部署后,就可以看到头像:

编辑网站缩略图

在主题配置文件里,可以看到:

将图标命名为favicon.ico,然后将ico放进Hexo/source/即可。

总结

在这里感谢原作者,真的很感谢,对我很有帮助,然后自己也添加了点自己的东西。

一分一毛也是心意