Hexo 搭建博客踩坑记录

博客迁移这个事早就想做了，但到现在才有时间和精力来完成。以前太年轻，写的博客系统并不方便维护，迁移的动力主要有以下几个：

原博客更新、维护较麻烦。以前的博客是用PHP写的，之前的写作方式是用Markdown写好导出HTML，再修改HTML代码使得静态资源（图片等）加载正确，这就使得修改博客很麻烦；更换主题也很麻烦，博客的主题和Markdown的主题通常会有冲突，所以想换个样式就要改半天CSS。
觉得UI有些难看，想要简洁一些；
安全问题。

现在的解决方案是Github Pages + Hexo，主题选的是Hacker，迁移了两天终于搞完了，在此简单记录一下遇到的坑。

数学公式渲染

由于这款主题并不是原生支持数学公式的，所以要添加些代码来使其支持Mathjax，参考http://searene.me/2016/10/01/Let-hexo-support-mathjax/。

首先在主题的layout目录下新建mathjax.ejs，文件内容如下：

<% if (theme.mathjax.enable){ %>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        processEscapes: true
      }
    });
  </script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
        tex2jax: {
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
  </script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Queue(function() {
          var all = MathJax.Hub.getAllJax(), i;
          for(i=0; i < all.length; i += 1) {
              all[i].SourceElement().parentNode.className += ' has-jax';
          }
      });
  </script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<% } %>

坑1：之前在网上查到的代码给的MathJax.js的链接多是过期的，如https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML，然后就被坑了。

然后在layout.ejs中加上<%- partial('mathjax') %>，文件整体内容为：

<!DOCTYPE HTML>
<html>
<%- partial('components/head') %>

<body>
  <div class="blog">
    <div class="content">

      <%- partial('components/header') %>

      <main class="site-main posts-loop">
        <%- body %>
      </main>

      <%- partial('components/footer') %>
      <%- partial('components/googleanalytics') %>
      <!-- 新加的 -->
      <%- partial('mathjax') %> 
    </div>
  </div>
</body>

</html>

最后在主题的_config.yml中加上：

1 2	mathjax: enable: true

如果没有安装MathJax插件的话需要安装一下：

1	npm install hexo-math --save

重新生成一下应该就可以渲染数学公式了。

不过还有些问题，就是你写在数学公式里的下划线(_)、反斜杠(\)、和星号(*)会被当作普通Markdown来处理，比如把下划线(_)和星号(*)替换成<em>标签等导致公式渲染错误。

解决方案来自https://zhuanlan.zhihu.com/p/33857596，打开nodes_modules/marked/lib/marked.js:

找到下面的代码:

1	escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

改为：

1	escape: /^\\([`*{}\[\]()# +\-.!_>])/,

找到em的符号:

1	em: /^\b((?:[^]\|_)+?)\b\|^((?:\|[\s\S])+?)(?!*)/,

改为：

1	em:/^\((?:\\\|[\s\S])+?)\(?!\*)/,

这样就去掉了_的斜体含义，在公式里使用_就没有问题了，不过要使用*的话要用\ast替代。

Hacker这款主题支持两种评论方式，分别是Gitment和Disqus。一开始试了试Gitment，配置好之后发现不能用，其原因是有一个服务过期了而作者也弃坑了没人管，我也懒得折腾就转向了Disqus，注册了之后就可以直接使用，十分方便，但是国内要翻墙才能访问。

最后换成了来必力评论，国内可以正常访问，虽然主题没有内置支持，但是操作很简单，只需把安装代码放到 layout/components/comment.ejs 里即可。

搜索

主题内置不支持搜索，需要自己动手，丰衣足食。

首先安装生成搜索内容的插件：

1	npm install hexo-generator-search --save

然后在_config.yml进行如下配置：

search:
  path: search.xml
  field: post
  content: true

配置项具体含义参考这里，这个网站还说了应该怎么用这个插件来在博客中支持搜索并且给了demo，分为三步：

创建搜索框
编写搜索脚本
在 Hexo 主题中把两部分结合起来

创建搜索框

我的打算是把“搜索”放在顶部，和“主页”、“目录”等一排，是一个单独的页面。所以要先创建新界面：

1	hexo new page "search"

修改 search 目录下的 index.md：

---
title: 搜索
date: 2018-11-23 14:42:39
layout: "search"
---

在主题的 _config.yml 中加上：

1
2
3

menu:
  ...
  搜索: /search

在主题的 layout 目录下创建 search.ejs：

<article>
    <h2 class="article-title <% if (page.category){ %> category<% } else if (page.category){ %> category<% } %>">
        <%= page.title || config.title %>
    </h2>

    <div id="site_search">
        <div class="form-group">
            <input type="text" id="local-search-input" name="q" results="0" placeholder="输入关键词" class="st-search-input st-default-search-input form-control" />
        </div>
        <div class="archive">
            <div id="local-search-result"></div>
        </div>

    </div>
</article>

重新build就应该可以看到“搜索”标签和搜索框了。

编写搜索脚本

在主题目录下创建source/js/search.js，源码照 https://github.com/wzpan/hexo-theme-freemind/blob/master/source/js/search.js 稍作修改。同时也下载jquery到js文件夹。

然后在 layout/components/head.ejs中添加：

1 2	<script type="text/javascript" src="<%- config.root %>js/search.js"></script> <script type="text/javascript" src="<%- config.root %>js/jquery.min.js"></script>

结合

在 layout/search.ejs里添加

<script type="text/javascript">
    var search_path = "<%= config.search.path %>";
    if (search_path.length == 0) {
        search_path = "search.xml";
    }
    var path = "<%= config.root %>" + search_path;
    searchFunc(path, 'local-search-input', 'local-search-result');
</script>

这样就完全实现了搜索功能！

其他

分割线

Hexo中写作不能使用___（三个下划线）来实现分割线，用了的话会generate失败，而且提示的错误很迷，曾经困扰了我很久。如果要用分割线的话需要四个下划线。

修改网站Icon

在主题中找到head.ejs文件，其中有一行：

1	<link href="<%- config.root %>favicon.ico" rel="icon">;

按理来说只要往根目录（source）下放一个favicon.ico的文件即可。

可是我的就不行，不知道什么原因，把文件名换了就可以了，所以我改成了：

1	<link href="<%- config.root %>icon.png" type="image/png" rel="icon">

然后往根目录下放一个icon.png，解决。

分享接口使用Share.js，只需引入相应的css和js文件，照文档使用即可。