Hexo踩坑全记录

发表于

本文内容原来是安排在另一篇文章《博客搭建小记》中，但是坑越踩越多(｡ŏ_ŏ)，原文越来越臃肿(￣ー￣)，于是专门开了一篇文章当垃圾桶╮(─▽─)╭

添加目录

安装hexo-toc

1
npm install hexo-toc --save

在需要添加目录的地方添加

1
<!-- toc -->

在博客根目录下的 _config.yml 中如下配置：

1
2
toc:
  maxDepth: 3 //表示目录深度最大3

Hexo辅助函数#toc

Hexo现在已经支持生成文章目录的辅助函数#toc，在文章页模版中，插入调用辅助函数的代码即可。

1
2
3
4
<%- toc(page.content, {
        class: 'post-toc',
        list_number: true
    }) %>

主页隐藏部分文章

修改主题文件next\layout\index.swig，搜索字段

1
{{ post_template.render(post, true) }}

修改为

1
2
3
{% if post.visible  !== 'hide' %}
    {{ post_template.render(post, true) }}
{% endif %}

在文章中添加visible: hide字段即可在首页隐藏文章。

特殊字符的转义

在使用Hexo时，对于特殊字符使用\转义有时会不成功，还可以直接使用特殊字符的编码，对应如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
! &#33; — 惊叹号Exclamation mark 
” &#34; " 双引号Quotation mark
# &#35; — 数字标志Number sign
$ &#36; — 美元标志Dollar sign 
% &#37; — 百分号Percent sign 
& &#38; & Ampersand 
‘ ' — 单引号Apostrophe 
( &#40; — 小括号左边部分Left parenthesis 
) &#41; — 小括号右边部分Right parenthesis 
* &#42; — 星号Asterisk 
+ &#43; — 加号Plus sign 
- &#45; &minus; — 减号
< &#60; < 小于号Less than 
= &#61; — 等于符号Equals sign 
> &#62; > 大于号Greater than 
? &#63; — 问号Question mark 
@ &#64; — Commercial at 
[ &#91; --- 中括号左边部分Left square bracket 
\ &#92; --- 反斜杠Reverse solidus (backslash) 
] &#93; — 中括号右边部分Right square bracket 
{ &#123; — 大括号左边部分Left curly brace 
| &#124; — 竖线Vertical bar 
} &#125; — 大括号右边部分Right curly brace

插入视频/音乐

使用HTML标记

参考W3School

使用video标签

1
2
3
<video style="width: 100%; height: auto;" controls>
<source src="video/Make_America_Great_Again.mp4">
</video>

使用audio标签

1
2
3
<audio src="audio/孤单光量子.mp3" controls="controls">
您的浏览器不支持 audio 标签。
</audio>

使用embed标签

1
<embed src="video/game.swf" style="width:640px; height: 480px;" quality="high" align="center" allowScriptAccess="always" mode="transparent" type="application/x-shockwave-flash"></embed>

使用iframe标签

1
<iframe height=100% width=auto src="https://www.youtube.com/embed/BVzQuGmZfNQ?ecver=2" frameborder=0 allowfullscreen></iframe>

使用Hexo插件

视频插件DPlayer

项目地址：hexo-tag-dplayer

在线演示：http://dplayer.js.org/

安装

1
npm install hexo-tag-dplayer

使用

1
{% dplayer "url=/demo/video/physics.mp4" "api=http://dplayer.daoapp.io" "pic=/demo/video/physics.png" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

音频插件APlayer

项目地址：hexo-tag-aplayer

在线演示：http://login926.github.io/loginabout/

安装

1
npm install hexo-tag-aplayer

使用

1
{% aplayer "新年大吉" "长者" "/demo/audio/zhangzhe.mp3" "/demo/audio/zhangzhe.png" %}

比较

项目 使用难度 是否支持https 是否使用 html5
插入 html 语言 小 大部分不支持 大部分使用 Flash
使用 Hexo 插件 中等 支持 使用 html5