奔哲明的博客

本博客搭建总结的一些可供参考的技术要点 Hexo Next 修改

发表于 更新于 分类于 Disqus：

本博客使用 hexo 搭建，主题为 next，这也是国内博客现在比较常见的选择。以前已用 jekyll 搭建好了个博客，但看到网上有人说 hexo 是直接把静态资源推到 gh-pages上的，渲染更快等等，另外界面简洁许多。果断抛弃原项目，重搭了个 hexo 博客。

具体怎样部署博客就不多讲了，这里罗列下搭建本博客对原 hexo 以及 next 主题的一些细小改动。
这些改动主要是为了满足个人的一些功能需求，比如说，我需要点击图片能放大，我需要更符合 markdown 语法的注脚插件等等。其他人或许也有相似需求，简单讲下思路，没准能有启发作用。

修改 next 主题，使用 fancybox，点击时加载原始大图。

我博客里的图片都是保存在阿里云OSS上的，为了排版以及减少流量消耗，md文件中的图片名都有后缀来做自动图片缩放处理。
点击查看原始大图是多数网站很自然的一个功能，但在 hexo 博客里，即使使用 fancybox[1] 这种插件，也只会使打开图片的效果更 fancy 一点，并不会自动解析图片 url 把图片处理的后缀给去掉，于是这里就只好自己动手了。

例如下面两个 url，前一个是增加了阿里云OSS自动缩放的，后一个是原始图，也是我们在展示大图时期望的 url。

https://benzgallery.oss-cn-shanghai.aliyuncs.com/style25.png?x-oss-process=style/resize_w200h100_center_crop
https://benzgallery.oss-cn-shanghai.aliyuncs.com/style25.png

OK，那就是把 ?x-oss-process 以及之后的字符串通过正则的方式匹配再去掉就行。

接下来，从 fancybox 以及使用它的 next 主题的源代码找到相关地方，搞清楚，fancybox 是怎么调用生效、哪里是渲染原文图片的链接，哪里是渲染fancybox展示大图的链接。

这里不赘述所有修改地方，主要是按照自己的需求修改以下代码里的 imageLink 满足自己要求就行。
在我这里，其中 replace_from 为 /(\?x-oss-process=style\S+)/ ，replace_to 为 ""，从而实现正则替换的效果。replace_from，replace_to 是自己增加的参数，从 themes\next_config.yml 传递过来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# themes\next\source\js\utils.js
wrapImageWithFancyBox: function(replace_from, replace_to, with_caption) {
    $('.content img')
      .not(':hidden')
      .each(function() {
        var $image = $(this);
        var imageTitle = $image.attr('title') || $image.attr('alt');
        var $imageWrapLink = $image.parent('a');

        if ($imageWrapLink.length < 1) {
          var imageLink = $image.attr('data-original') || $image.attr('src');
          imageLink = imageLink.replace(replace_from, replace_to)
          
          $imageWrapLink = $image.wrap('<a class="fancybox fancybox.image" href="' + imageLink + '" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>').parent('a');
          
          ...

具体修改参考 : https://github.com/BenZstory/hexo-theme-next/commit/784beb7424d2693d01728a99c6ab7d061e4db7a2

hexo 增加脚本，对 md 中部分元素内容禁止渲染，从而真正隐藏该部分文本

这里借用 html 元素格式，因为网页碰到没见过的 html 元素会跳过不渲染，仿佛没存在过一样，而加上了博客脚本，会在部署渲染时完全删掉该部分内容，用起来很舒服。
例如使用一对 <hidden></hidden> 作为元素标签，在 hexo_root\scripts\hide.js 添加脚本如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo.extend.filter.register('before_post_render', function(data) {
	// do not render the content wraped in <hidden> </hidden>
	var reHideText = /(\<hidden\>[\S\s]*?\<\/hidden\>)/g
    data.content = data.content.replace(reHideText, function (match, to_hide) {
		if (to_hide.length > 10) {
			return "<p>(Hidden Content)</p>"
		} else {
			return ""
		}
    });

    return data;
});

渲染数学公式

使用 Hexo + Next 的默认渲染引擎即可，不必修改渲染引擎等，Next 主题已经附带了 mathjax 插件，Latex行内行外公式都能正常渲染，只是要注意开启方法：

next 主题文件夹下 _config.yml 配置中 enable 设为 true。并根据 pere_page 的注释正确配置，即，如果 per_page 设置为 false，每个页面都默认开启公式渲染；或者使用原默认参数 true，然后在每个用到公式的md的 Front-matter 增加 mathjax: true 配置项。

注脚

试了很多注脚插件都不太爽，要么完全渲染有问题，要么支持的语法不够灵活。

因此我在 hexo-reference 的基础上又改了一版，从原来只支持数字标记的注脚变为更符合常见 markdown 语法的 英文+数字+下滑线 注脚标记，跟我常用的 cmd markdown 编辑器语法统一起来。

已经向原作者提了 pull request。

一般编辑发布流程

个人最佳实践：

  1. 使用 cmd markdown 进行编辑、同步。

  2. 将编辑好的文章导出为 md 并增加符合 hexo 要求的头格式信息，如title、description等。

  3. 将md文件放到 Dropbox 某一文件夹中以做备份和同步，而在hexo项目文件夹中，使用软连接命令将 /source/_posts 目录映射到这个文件夹上。

    如果是在 windows 环境下，使用 mklink 命令来进行软连接，具体来说，假设 目标文件夹为 dropbox/sync_posts，执行命令
    mklink /D hexo_root\source\_posts dropbox\sync_posts

  4. 使用 hexo -s 在本地部署网站，检验是否正常。

  5. 使用 hexo -d [2]命令将网站推送并部署到预设的 github-pages 项目上。

通过以上过程，把纯净的静态网站部署到对应网站上，而代码和原md文件都没有暴露。

推荐在一个博客项目 git 下建两个分支，一个 master 分支放代码，一个 gh-pages 分支放静态网站给 github 渲染。
Github 项目名随便，在对应 repository 的 Settings - GitHub Pages 中设置好静态页面所用的 branch 就好，然后 github 会提示你网站的 url。如果你有域名的话，将 CNAME 文件丢到 _posts 文件夹中，再在域名提供商做好解析，就大功告成了。

  1. 1.hexo_next 上使用 fancybox，按此 README.md 流程即可： https://github.com/theme-next/theme-next-fancybox3 ↩
  2. 2.使用 hexo-deployer-git 插件： https://hexo.io/zh-cn/docs/deployment.html#Git ↩