当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(05)写作定制与插件

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

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）使用``标签插入图片后必须加一空行，否则会导致后面的markdown解析错乱。markdown语法写的表格前后必须加空行，否则markdown解析错乱。

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

想要在hexo中支持复选框，有两种方案可选：
1、更新hexo默认的渲染引擎  [hexo-renderer-marked](https://github.com/hexojs/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](https://github.com/hexojs/hexo-renderer-marked) 引擎渲染 MarkDown,
hexo-renderer-marked 中又使用了 [marked](https://github.com/markedjs/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 是文件最上方以 `---` 分隔的区域，用于指定个别文件的变量。
打开默认布局post`scaffolds/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>

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>

参考

上一篇 NPM使用笔记

下一篇 Jira及Confluence使用笔记

阅读
评论
3.8k字
阅读预计15分钟
创建日期 2016-04-07
修改日期 2020-08-23
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲