分享几个实用的HEXO博客功能插件

2017-05-16 by Liuqingwen | Tags: Hexo | Hits

一、前言

即使是作为一名前端完全新手,也不希望自己的博客页面功能过于简单,虽然花哨的功能不需要,但是一些最基本的大众化模块还是要有吧,我的 Hexo 博客使用的主题 Phantom (下文中提到的主题文件夹也就是这个文件名,但是我会写成 ${theme_dir}就是属于功能模块比较简单的那种主题,借助 Hexo 强大的功能扩展能力,自己动手整合了一些有用的插件到我的博客中,主要包括:非插件化的 CSS 样式控制、文章表情符 emoji 显示、博客 RSS 订阅功能、文章图片懒加载显示、静态搜索 search 功能等!

添加了这些功能后,感觉踏实多了, grimacing 可折腾我不少时间了,现在我把这些功能添加的过程大致的分享一下,作为自己的备忘,也希望帮助到其他有需求的前端小白们更好地使用 Hexo 博客构筑,如果是大神的话,你可以忽略了。 grimacing

二、功能模块

我这里主要使用也是推荐应用的功能模块主要就以下几个:

  1. Markdown 中自定义 CSS 样式
  2. 添加博客 RSS 订阅功能
  3. 文章添加 emoji 表情符
  4. 文章里图片的懒加载功能
  5. 强大的静态搜索功能插件

1. Markdown 中自定义 CSS 样式

有时候写文章需要一些特殊的字体或者颜色表现样式,这其实很简单,不需要任何插件,直接在 md 文章文件中使用 HTMLCSS 样式就可以了,就像这样:

1
2
3
4
<p markdown="1" style="
color: red;
font-weight: bold; "
>PS: (2017-05-15更新)更新的内容如下......</p>

PS: (2017-05-15更新)更新的内容如下……

另外 Hexo 官方说明的方式是添加 ` 和 ` 标签块,结果和上面不使用标签块是一样的:

1
2
3
4
5
6
{% raw %}
<p markdown="1" style="
color: red;
font-weight: bold; "
>PS: (2017-05-15更新)更新的内容如下......</p>
{% endraw %}

尽情的在 style="" 中添加你想要的样式吧。 grin

2. 添加博客 RSS 订阅功能

虽然这个功能有点鸡肋,但是如果你是一位优秀的博主,日志文章被大量客户访问阅读,那么你必定需要 RSS 订阅模块,为那些有需求的客户提供日志订阅的功能。我的博客 RSS 订阅就是一个 XML 文件的链接,这个 XML 文件需要由插件自动生成,这个插件是: hexo-generator-feed ,在 GitHub 上有相关应用说明:hexojs/hexo-generator-feed 。直接安装这个 Hexo 插件:

1
$ cnpm install hexo-generator-feed --save

安装好之后,每次 hexo g 命令或者启动服务都会自动生成 atom.xml 文件(你也可以设置成 rss2.xml 文件,具体设置参考官网吧),然后把 RSS 订阅的地址链接到这个文件即可! So easy! laughing

3. 文章添加 emoji 表情符

表情符这么重要的写作功能怎么能不具备呢?习惯了在微信、 QQ 上聊天的表情符号,写作也必须来几桶表情符是吧?! sunglasses

其实表情符都是一些小图片,如果直接在写文章的时候像插入图片一样插入表情符,那会比较痛苦,所以我们需要安装一个表情符简写渲染的插件: hexo-filter-github-emojis

1
$ cnpm install hexo-filter-github-emojis --save

安装后在根目录下的配置文件 _config.yml 中进行具体配置,还可以添加自定义的表情符(我已经把网站上的部分表情符下载到本地改成自定义表情符了 laughing ):

1
2
3
4
5
6
7
8
9
githubEmojis:
enable: true
className: github-emoji
unicode: false
localEmojis:
your_emoji_1:
src: http://your/emoji/path/img1.png
your_emoji_2:
src: http://your/emoji/path/img2.png

这样你在写文章的时候可以直接简单地用这种格式表达表情符: :your_emoji_1: :your_emoji_2: ,最后文章渲染显示就是类似这样的表情图片了: wink yum stuck_out_tongue_winking_eye smiley joy sunglasses

具体说明可以到插件地址查看: hexo-filter-github-emojis ,内有详细使用配置说明。

4. 文章里图片的懒加载功能

这是我很喜欢的一个功能,也是折腾我最久的,毕竟新手加小白 joy 。图片的懒加载在很多地方都能看到,比如微信订阅号的文章就是采用图片懒加载的方式显示,这是一个流量为王和手机阅读的时代,大量的图片容易造成不必要的流量耗费,不过懒加载并不是减少流量使用,而是当不需要显示的时候就不要耗费多余的流量了,增加用户体验吧。

实现这个功能对我来说有点繁琐,首先需要安装渲染插件: hexo-renderer-marked-lazy ,然后还需要一个 JS 库: Echo.js ,最后需要手动写一点点 JS 代码,一步一步的来:

1
$ cnpm install hexo-renderer-marked-lazy --save

上面安装插件之后,在根目录配置的文件 _config.yml 中添加以下配置:

1
2
3
marked:
lazyAttr: data-echo
blankSrc: http://your/loading/path/blankSrc.gif

配置原理我等下说,接着需要在生成文章的页面添加相关 JS 脚本,我直接下载了 echo.js 这个脚本(连接:echo.js ),保存在博客主题下的文件夹中:${theme_dir}/source/scripts/echo.js ,接下来在主题文件夹下的模板文件 ${theme_dir}/source/after-footer.ejs 中添加应用 JS 代码,这样生成的每篇文章都会包含这个 JS 脚本:

1
2
3
4
5
6
7
8
9
10
11
12
<%- js('scripts/echo.js') %>
<script>
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
// echo.render(); is also available for non-scroll callbacks
</script>

学过前端的朋友应该一眼就能看清楚这是怎么实现的,他的基本原理就是利用 hexo-renderer-marked-lazy 插件把 md 文章中的图片标记: ![real image](http://url/to/real/img.jpg) 渲染成带有 data-echo 标签的 HTML : <img src="blankSrc.gif" data-echo="http://url/to/real/img.jpg" alt="some desc"> ,这样显示的不是真实的图片,而是你在配置文件中配置的 blankSrc 所指向的临时图片,最后由 echo.js 脚本替换临时图片 srcdata-echo 表示的真实链接并加载真实的图片。

怎么样?也比较简单吧,确实折腾了我很久,需要的就 Add 上吧!

5. 强大的静态搜索功能插件

现在哪个页面没有搜索功能?内容为王的前提下,搜索功能显得尤为重要!此乃必不可少的功能,大牛、 dalao 有的组件,我们小菜也要有! grimacing

关于 Hexo 博客搜索功能,我参考了不少文章,但是要么比价复杂,要么需要技术支持,折腾了我一天!最后在这篇文章:完美解决Hexo静态博客搜索问题中找到了引荐的静态搜索开源项目: Tipue Search ,但是这篇文章不适合我等新手,而这篇官方文章: hexo-generator-tipue-search-json 给了我足够的安装指导!

参考了 hexo-generator-tipue-search-json 这个插件的官方说明后,我也是按部就班地尝试,但是也有稍微不一样的地方,如果你需要这个功能,按照说明不能解决的话,那就按我的做吧, laughing 先安装插件:

1
$ cnpm install hexo-generator-tipue-search-json --save

这个插件主要用来生成搜索引擎需要的 JSON 数据,会保存在搜索引擎目录 tipuesearch/tipuesearch_content.json 文件中。安装好插件后,还要下载 Tipue 搜索插件的源码:Tipue Search 点击下载 ,下载完把压缩包里的 tipuesearch 文件夹复制到你的主题目录${theme_dir}/source 下,然后修改主题文章模板文件 article-full.ejs 的内容(这些 ejs 文件一般都在 ${theme_dir}/layout/_partial 下,自己找一下吧),添加如下搜索功能的代码,它的作用大概是相当于收录文章转化数据的意思吧:

1
2
3
4
5
<div id="tipue_search_content" style="display: none"></div>

<!-- 下面的是之前有的,上面的代码是添加的 -->
<!-- Content -->
<%- item.content %>

接着需要在有搜索功能的页面加入 JS 和 CSS 引用,在主题根部模板文件 after-footer.ejs 中添加以下引用和脚本,使 JS 发挥搜索的作用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link href="<%- config.root %>tipuesearch/css/tipuesearch.css" rel="stylesheet">
<script src="<%- config.root %>tipuesearch/tipuesearch_set.js"></script>
<script src="<%- config.root %>tipuesearch/tipuesearch.js"></script>
<!-- 这里可能有一些其他原来文件里的代码,也可以没有 -->
<script>
$(document).ready(function () {
var searchInput = $('#tipue_search_input');
searchInput.tipuesearch({
'mode': 'json',
'minimumLength': 2,
'contentLocation': '<%- config.root %>tipuesearch/tipuesearch_content.json',
highlightEveryTerm: true
});

$('#search-form').on('submit', function (e) {
e.preventDefault();
$('#tipue_search_content').show();
$('#content').hide();
});

searchInput.keyup(function () {
var length = $(this).val().length;
if (length < 1) {
$('#tipue_search_content').hide();
$('#content').show();
}
});
});
</script>

最后,在主题页面模板文件 article-page.ejs 中添加搜索内容显示框( div )的 HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
<% if(item.addSearch) { %>
<form id="search-form">
<div class="tipue_search_left"><img src="<%- config.root %>tipuesearch/search.png" class="tipue_search_icon"></div>
<div class="tipue_search_right" style="width:80%;"><input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="<%= __('search') %>" style="width:80%;" /></div>
</form>
<div id="tipue_search_content"></div>
<% } %>

<!-- 下面的是之前有的,上面的代码是添加的 -->
<!-- Content -->
<%- item.content %>

这里有必要说明一下,我这里使用了 <% if(item.addSearch) { %> 这样的 ejs 语法块,其实很简单你也能看的懂,我是在 md 文章的开头 Front-matter 中添加了一个 addSearch 的变量,值为 true 表示生成的这个页面是带搜索功能的页面,值没有或者为 false 表示这个页面不会添加搜索引擎和显示搜索结果,关于 Front-matter 的解释就是每篇文章的开头 --- 包含的代码部分,就像这样:

1
2
3
4
5
6
7
8
9
---
title: 分享几个实用的HEXO博客功能插件
subtitle: Share several extra useful functionality of Hexo blog via plugins or code
date: 2017-05-16 13:39:19
tags: [Hexo]
cover_index: cover.png
cover_detail:
addSearch: false
---

完成了所有配置,这时候你只需要新建一个提供搜索的页面即可,就像你创建 Tags About Category 页面一样:

1
$ hexo new page search

如果你和我的一样设置,记得在 source/_post/search 文件夹下的 index.md 中的 Front-matter 添加 addSearch: true 参数。好了,就这样OK了,希望你能理解吧。 blush

三、总结

越到后面确实有点小复杂,我也是折腾了不少时间啊,主要是对于前端我几乎完全门外汉,没办法,只能自己琢磨了。不求花哨,但求够用。 grin

最后,在这里还是需要提醒一下,如果博客配置文件 _config.yml 中指定博客地址有根目录的话,比如我的博客根目录是 root: /blog/ ,那么有很多地方需要加上 config.root 才能正确显示相关的链接(也包括资源的引用,你可以看到我的代码中不少包含了 config.root ),我设置了根目录,所以直接使用 Tipue 搜索引擎的时候搜索出来的文章显示的链接少了 /blog ,那样都是错误的地址,这时候就要手动更改一下 hexo-generator-tipue-search-json 这个插件的源码使它在生成的 JSON 数据的链接里加入 /blog ,修改按以下步骤:

  1. 找到博客根目录下 node_modules/hexo-generator-tipue-search-json/index.js 文件
  2. 打开并找到这行代码: case 'url': return actualPost[item] = post['path'];
  3. 修改代码添加上根目录: case 'url': return actualPost[item] = hexo.config.root + post['path'];

好了,希望对你有帮助。 sunglasses

参考资料:
Hexo Tag Plugins: https://hexo.io/docs/tag-plugins.html
Tipue Search: http://www.tipue.com/search/
Plugin: hexo-generator-tipue-search-json: https://www.npmjs.com/package/hexo-generator-tipue-search-json
Plugin: hexo-filter-github-emojis: https://www.npmjs.com/package/hexo-filter-github-emojis
Plugin: hexo-filter-github-emojis (Github): https://github.com/crimx/hexo-filter-github-emojis
Plugin: hexo-generator-feed: https://github.com/hexojs/hexo-generator-feed
Plugin: hexo-renderer-marked-lazy: https://www.npmjs.com/package/hexo-renderer-marked-lazy
Echo.js: https://github.com/toddmotto/echo/


Comments: