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

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

一、前言

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

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

二、功能模块

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

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

1. Markdown 中自定义 CSS 样式

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

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

PS: （2017-05-15更新）更新的内容如下……

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

{% raw %}
<p markdown="1" style="
    color: red; 
    font-weight: bold; "
>PS: （2017-05-15更新）更新的内容如下......</p>
{% endraw %}

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

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!

3. 文章添加 emoji 表情符

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

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

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

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

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: ，最后文章渲染显示就是类似这样的表情图片了：

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

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

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

实现这个功能对我来说有点繁琐，首先需要安装渲染插件： 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 脚本：

<%- 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 脚本替换临时图片 src 为 data-echo 表示的真实链接并加载真实的图片。

怎么样？也比较简单吧，确实折腾了我很久，需要的就 Add 上吧！

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

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

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

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

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 下，自己找一下吧），添加如下搜索功能的代码，它的作用大概是相当于收录文章转化数据的意思吧：

<div id="tipue_search_content" style="display: none"></div>

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

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

<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 代码：

<% 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 的解释就是每篇文章的开头 --- 包含的代码部分，就像这样：

---
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了，希望你能理解吧。

三、总结

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

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

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

好了，希望对你有帮助。

参考资料：
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/

Hexo

我为何早先于你学习并应用Kotlin 记一次Unity3D中WWW加载本地图片很慢的BUG