Hexo博客(05)写作定制与插件

发布于: 2016-04-07 17:07:55 更新于: 2020-08-23 14:26:32 分类： 开 发 标签： Tag(name='Hexo', count=31) Tag(name='HTML', count=18) Tag(name='前端', count=22)

hexo 写作、配置总结

写作

乱码问题

如果用notepad++编辑md文件，记得保证格式为utf-8，最好无BOM，经测试有BOM也没问题。

中文标题

永久链接中的:title变量是md文件名，在文章Front-matter的title变量才是显示在文章顶部的标题，所以可以实现文章的链接是英文而标题是中文

文章预览

在文章合适位置加上<!-- more -->，则首页会显示之前的内容为预览，这个是hexo提供的方式，任何主题都适用。 注意，<!-- more -->不能出现在文章开头，否则就会被视为无效。

代码高亮

freemind主题中使用Highlight.js实现代码高亮，但我博客上只是有黑色代码框，并没有根据语法注释而高亮。 研究后改为使用google-code-prettify代码高亮，参见： Hexo博客(12)使用google-code-prettify代码高亮 http://masikkk.com/article/hexo-12-google-code-prettify/

公式支持

参见Hexo博客(13)添加MathJax数学公式渲染 http://masikkk.com/article/hexo-13-MathJax/

遇到的问题

（1）配置项冒号后要加一个空格，否则generate时会出错：

$ hexo g
FATAL end of the stream or a document separator is expected at line 11, column 9:
    timezone:
            ^
YAMLException: end of the stream or a document separator is expected at line 11, column 9:
    timezone:

（2）错误：TypeError: Cannot set property 'lastIndex' of undefined hexo g生成博客时遇到错误：

TypeError: Cannot set property 'lastIndex' of undefined

刚开始上百度查，总是查不到点上，后来用了新出的搜狗英文搜索，一击命中。 解决方法是在配置文件_config.yml中将highlight选项的auto_detect设为false，完美解决。参考Hexo 3.2.0-beta.2 test result report #1627

（3）文章中的特殊字符导致生成失败 hexo g生成博客时遇到错误：

$ hexo g
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
  Error: expected end of comment, got end of file

原因：文章中有

echo ${#string}

导致hexo g失败，解决方法是将其放入3个反引号中成为代码块。

（4）使用<img>标签插入图片后必须加一空行，否则会导致后面的markdown解析错乱。markdown语法写的表格前后必须加空行，否则markdown解析错乱。

Hexo中增加CheckBox/复选框/待办事项支持

想要在hexo中支持复选框，有两种方案可选： 1、更新hexo默认的渲染引擎 hexo-renderer-marked 到 0.3.0 及以上即可。 https://github.com/ahonn/hexo-theme-even/issues/135 https://github.com/hexojs/hexo-renderer-marked/issues/30 最新版hexo中默认的 hexo-renderer-marked 已包含此功能，不用单独升级 hexo-renderer-marked 版本。 2、更换markdown引擎为markdown-it，然后安装 markdown-it-checkbox 就可以了，命令是npm install markdown-it-checkbox，然后在配置文件启用这一扩展

渲染

markdown渲染引擎

Hexo默认先使用 hexo-renderer-marked 引擎渲染 MarkDown, hexo-renderer-marked 中又使用了 marked 引擎

解决 hexo g 已杀死

博客文章达到 500 多时，经常 hexo g 时被杀死，网上搜了搜说增加 swap 交换文件，我 vps 是 2g 内存，加了 2g 的交换文件，还是不行。 使用 strace 命令跟踪了 hexo g 进程是被那个进程发送的 kill 信号，结果是

22:22:17.564343 +++ killed by SIGKILL +++

也看不出来。 后来猜想是被 linux 的 oom killer 杀死的 详细了解了一下 linux 的 oom killer 机制，把内核参数 vm.overcommit_memory 改为 1 表示总是允许 overcommit， vm.overcommit_ratio 改为 100

sysctl vm.overcommit_memory=1
sysctl vm.overcommit_ratio=100

系统重启后会失效，需要重新配置

我的进程去哪儿了，谁杀了我的进程 https://www.cnblogs.com/xybaby/p/8098229.html

What killed my process and why? https://stackoverflow.com/questions/726690/what-killed-my-process-and-why

解决hexo g生成的index.html页面是0kb空白

参考 解决hexo generate 生成的时候index.html为0kb空白的问题 https://blog.tcs-y.com/2020/04/26/hexo-index-0kb/

一开始我以为是 nginx 配置有问题，无权限读取 hexo 生成的页面之类的问题，后来发现 index.html 大小为 0kb 也就是 hexo g 生成的页面本身就是空白的。

原因就是上面文章中提到的， nodejs 有问题，降级为稳定版即可。 我出问题的 nodejs 版本是 v14.8.0，降级为稳定版 v12.18.3 后解决问题。

1 sudo npm install n -g 安装 node 版本管理模块 n

2 sudo n stable 安装最新稳定版 node 我这里安装的稳定版是 12.18.3 安装后可能由于缓存不会立即生效，node -v 查看默认node版本还是之前的，登出系统后再登入即可。

跳过渲染指定文件

总结： 1、不能发表为博客的私人 markdown 文档统一放到下划线 _ 开头的文件夹中，不想发表为博客的单个 markdown 文件以下划线 _ 开头命名，会被 hexo 忽略。 2、自己生成好的 html 放到 source 目录中，通过配置 skip_render 跳过渲染，会被直接拷贝到 public 文件夹中。

在_config.yml中配置skip_render

在_config.yml中配置 skip_render 来跳过指定文件或文件夹的渲染。被跳过的文件会被原封不动的拷贝到public文件夹中。 只有source目录（严格来说是source_dir配置项对应的目录）下的文件才会被渲染并生成到public文件夹中，因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。

skip_render 适合用来跳过source目录中本身已经是html内容的，比如我自己制作好的简历网页，不需要再渲染，可直接配置跳过。

skip_render 参数支持 glob 表达式来匹配路径。

  • skip_render: test/* 单个文件夹下全部文件
  • skip_render: test/** 单个文件夹下全部文件以及子目录

  • skip_render: test/*.md 单个文件夹下指定类型文件

  • skip_render: 'demo/other/baidu.html' 排除单个文件demo/other/baidu.html

排除source目录下的所有html文件，以及demo/other/3.html文件

skip_render:
  - '*.html'
  - 'demo/other/3.html'

排除source目录下的所有html文件，以及整个source/demo目录

skip_render:
  - '*.html'
  - 'demo/**'

在.md文件中加layout:false

在.md文件头部Front-matter中加layout: false，也就是在头部加：

---
layout: false
---

可使hexo跳过对此文件的处理。 和配置skip_render不同的是，添加了此配置项的.md文件不会按layout渲染，直接生成index.html文件。

不要处理我的文章 如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。 https://hexo.io/zh-cn/docs/writing

放到下划线_开头的文件夹中

hexo g生成html文件时，源文件的选择规则是： source文件夹（严格来说是source_dir配置项对应的目录）中，除 _posts 文件夹之外，以下划线_开头的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

所以我们可以利用这一特性，把私人文档统一放到一个下划线_开头的文件夹中。

Hexo Docs - 建站 https://hexo.io/zh-cn/docs/setup

个性化定制

定制默认布局post中的Front-matter项

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。 打开默认布局postscaffolds/post.md，可以看到其中有三个Front-matter项，我们可以添加想要的Front-matter项，以后使用此布局新建文章时会自动生成这些Front-matter项。

---
title: {{ title }}
date: {{ date }}
tags:
---

设置默认类别

修改hexo项目的_config.yml配置文件里的default_category配置项： default_category: 开发

多标签tags

多标签格式[tag1,tag2,tag3]

标签和类别映射

如果想在博客中显示中文类别和标签，同时链接中的类别和标签想显示为英文，可以做如下映射：

category_map:
开发: dev
生活: life
科研: research
tag_map:
健身: fitness

以后文章的Front-matter中使用前面的中文进行分类和标签，链接中会自动显示映射的英文。 如果映射后发现之前的英文标签还在博客中，可以执行hexo clean清除生成的静态文件(public目录中)

设置网站根目录

如果想将hexo博客网站的根目录设置为yoursite.com/blog，可以在_config.yml配置文件里修改root配置项为 root: /blog/ 此后主页变为yoursite.com/blog，比如hexo s预览时主页为localhost:4000/blog/

定制文章永久链接

修改hexo项目的_config.yml配置文件里的permalink配置项，hexo默认值为 :year/:month/:day/:title/，在url中加入了日期，由于我的md文件名都是见名知意的，没必要在url中加入日期，反而很乱，所以改为： permalink: article/:title/ 此后所有文章的链接变为yoursite.com/article/:title/，这里的:title指的是md文件的文件名，建议md文件名为英文，这样链文章链接也是英文，至于文章的中文标题，在每篇文章的Front-matter中的title: {{ 中文标题 }}中设置中文标题。 permalink:配置项中可用的变量参见：https://hexo.io/zh-cn/docs/permalinks.html

网站根目录与永久链接对url影响的区别

网站根目录针对整个网站的url，例如根目录设为/blog/，则所有页面的链接都会有前缀/blog/，包括归档、类别、标签这些非文章(非post)页面的链接。 永久链接只针对文章的url，不包括非post页面的url 假如根目录设为/blog/，permalink也设置为blog/:title，则所有文章的url会有两个blog前缀，即yoursite.com/blog/blog/:title 配置建议： 如果你的域名除了博客还有其他用处，比如域名主页是各功能索引，子目录/blog/是博客，/bbs/是自建的论坛，/private/是只能自己看的私有内容，则可以将网站根目录配置为/blog/，这样hexo博客只使用子目录/blog/ 如果域名只做博客用，个人感觉没必要设置网站根目录，也不必考虑以后的功能扩展，待要扩展时再配置网站根目录重新生成一下即可。

设置归档页无需分页

hexo安装后自带一个叫hexo-generator-archive的插件，负责生成按年份、月份等归档的页面，即public/archives/中的2017,2016,...等目录中的页面，这些页面中只是文字标题列表，如果还分页会很麻烦，在根目录_config.yml中将per_page设为0即可，如下：

archive_generator:
  per_page: 0  # 将每页文章数设为0，表示不需分页
  yearly: true
  monthly: true
  daily: false

自定义网站页脚footer

一般主体的页脚都由themes/你的主题/layout/_partial/footer.ejs定义，编辑footer.ejs文件，改为自己想要的显示方式。

<p><% if (config.author){ %>
  &copy; <%= new Date().getFullYear() %> <%= config.author %>
  <% } else { %>
  &copy; <%= new Date().getFullYear() %> <%= config.title %>
  <% } %>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a> and <a href="http://getbootstrap.com/" target="_blank">Twitter Bootstrap</a>. Theme by <a href="http://github.com/wzpan/hexo-theme-freemind/">Freemind</a>.
</p>

Hexo博客添加归档侧边栏插件

Hexo提供了一个list_archives辅助函数，可以利用他生成按年份或月份归档的侧边栏插件。 list_archives辅助函数用法见 https://hexo.io/zh-cn/docs/helpers.html#list-archives

新建一个Widget插件，代码贴在里面，然后加载此插件即可。 在themes\free2mind\layout_widget目录下新建archive.ejs，将下面代码复制进去，与主题自带的其他Widget保持样式一致，然后在主题的_config.yml配置文件中的widgets:项添加archive插件即可启用。 我的代码如下，按年份归档：

<% if (site.posts.length){ %>
  <div class="widget">
    <h4><%= __('归档') %></h4>
    <%- list_archives({type: "yearly", format: " YYYY年 "}) %>
  </div>
<% } %>

Hexo博客添加豆瓣侧边栏

登录豆瓣账号后，可以在豆瓣收藏秀 中看到自己豆瓣的一个脚本，还能定制显示内容和显示格式，把这段脚本添加到想要显示的地方即可。

比如我们想添加到博客首页的侧边栏，在我使用的freemind主题中，侧边栏都是Widget，所以我们新建一个Widget。在/themes/freemind/layout/_widget目录下新建douban.ejs，把豆瓣收藏秀的代码复制进去，然后在主题的_config.yml配置文件中的widgets:项添加douban插件即可启用。

如果想要豆瓣侧边栏和主页上主题自带的侧边栏的样式一样，可以查看_widget文件夹下的其他插件脚本，参考其样式来美化一下豆瓣侧边栏，比如我最终的douban.ejs是这样的：

<div class="widget">
    <h4><%= __('我的豆瓣') %></h4>
    <ul class="blogroll list-unstyled">
    <script type="text/javascript" src="http://www.douban.com/service/badge/masikkk/?selection=latest&amp;picsize=small&amp;show=collection&amp;n=6&amp;hidelogo=on&amp;cat=drama%7Cmovie%7Cbook%7Cmusic&amp;columns=3"></script>
    </ul>
</div>

  • bo-blog/WordPress 等各种博客 增加豆瓣侧边栏 html http://www.iamle.com/archives/65.html

  • Octopress侧边栏及评论系统定制 http://812lcl.com/blog/2013/10/26/octopressce-bian-lan-ji-ping-lun-xi-tong-ding-zhi/

  • 豆瓣收藏秀 https://www.douban.com/service/badgemakerjs

Hexo博客添加Flag Counter插件

Flag Counter插件可以统计各个国家访问你网站的IP计数，并以国旗的形式展示。 在http://s09.flagcounter.com/index.html 网站上自定义展示方式，不用注册即可免费获取代码。

新建一个Widget插件，代码贴在里面，然后加载此插件即可。在themes\free2mind\layout\_widget目录下新建flag_counter.ejs，将Flag Counter官方给出的代码复制进去，与主题自带的其他Widget保持样式一致，然后在主题的_config.yml配置文件中的widgets:项添加flag_counter插件即可启用。

最终我的flag_counter.ejs内容如下：

<div class="widget">
    <h4><%= __('Flag Counter') %></h4>
    <ul class="blogroll list-unstyled">
    <a href="http://info.flagcounter.com/gJyR"><img src="http://s10.flagcounter.com/count2/gJyR/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_12/viewers_0/labels_0/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
    </ul>
</div>

参考

  • Hexo常见问题解决方案 https://xuanwo.org/2014/08/14/hexo-usual-problem/

  • Hexo折腾记——基本配置篇 把类别加入文章永久链接的方法 https://joway.wang/posts/Hexo/2016-03-18-hexo-base.html

  • Hexo折腾记——性能优化篇 搜索引擎优化(SEO)，添加百度主动推送代码，让搜索引擎最快发现文章 https://joway.wang/posts/Hexo/2016-03-19-Hexo-optimize.html

  • 针对hexo静态博客的简单SEO技巧(1) http://www.rudy-yuan.net/archives/hexo-seo-meta-nofollow/