Hexo博客搭建与个性化

发表于 阅读次数： Changyan： 本文字数： 13k 阅读时长 ≈ 12 分钟

本文解决md数学公式渲染以及图片路径问题，并包含一些有用命令和个性化技巧

安装

  • details in this site

解决md数学公式渲染问题

更新于2019-03-10，标记错误做法

采坑记录

如下方法，虽然能使公式得到部分正确渲染，但是在markdown渲染表格时出现了很大的问题，表格中的|无法用反斜线转义。导致表格错位。同时公式渲染也存在bug, 例如_不能正确渲染。

如下为错误做法

1.在blog根目录输入如下指令 

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save
2.然后修改文件

文件位置：node_modules\kramed\lib\rules\inline.js
1
2
3
4
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

正确做法

使用 hexo-render-pandoc, 步骤如下

1.安装配置hexo-render-pandoc

1
2
3
4
5
6
7
npm un hexo-renderer-marked --save
#or npm un hexo-renderer-kramed --save (如果安装的是kramed的话)

# 在安装之前，建议先删除node_modules文件夹下所有文件
# 并运行命令 npm install

npm i hexo-renderer-pandoc --save

前去官网安装pandoc，并保证能在命令行中运行 pandoc -v.

2.主题打开mathjax开关

文件位置：themes/next/_config.yml
1
2
3
4
# MathJax Support
mathjax:
  enable: true
  per_page: true

3.文章的Front-matter里打开mathjax开关(一定要打开，不然不会渲染)

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
--

至此可以完美渲染公式

例子

示例一

1
2
3
4
5
6
7
$$\begin{equation}
\begin{aligned}
a &= b + c \\
  &= d + e + f + g \\
  &= h + i
\end{aligned}
\end{equation}\label{eq2}$$

\[ \begin{equation} \begin{aligned} a &= b + c\\ &= d+ e+f+g\\ &= h+i \end{aligned} \end{equation} \]

示例二 

1
$state \overset{NN}{\rightarrow}\left\{ \begin{aligned} &action1 \_ value \\ &action2 \_ value \\ &...\end{aligned} \right.$
\(state \overset{NN}{\rightarrow}\left\{ \begin{aligned} &action1 \_ value \\ &action2 \_ value \\ &...\end{aligned} \right.\)

示例三

1
2
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

When \(a \ne 0\), there are two solutions to (ax^2 + bx + c = 0) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

解决md图片路径问题

通过插件hexo-asset-image进行图片路径转换即可解决

安装插件

npm install hexo-asset-image --save

修改配置文件

将主题配置文件_config.yml中设定修改为 post_asset_folder: true

打开此设定后，Hexo新建文章时会自动在同级目录中创建一个同名文件夹，用于放图片等资源

使用

1.将图片放入与文章同名的文件夹下

2.用相对路径在md文件引用图片

例子

[目录结构]
1
2
3
4
5
post
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
post.md

在文章中添加![logo](./post/logo.jpg)即可

注意事项

在安装或卸载其他插件后，此插件可能会被误伤删除。

因此出现图片出错情况不要急，再运行一遍安装命令就正常了。

常用命令

(全部在根目录下执行)，并且要在 git bash中执行

1.hexo clean && hexo g && hexo d 一次性执行了，清空、刷新、部署三个命令，写完博客后执行此命令即可发布新博客

2.备份整个博客到githubgit add * && git commit -m 'update hexo' && git push origin hexo，暂存，提交和推送到github三个命令

3.自定义命令如下

注意事项:要在Git bash中运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 创建文件以自定义bash环境
touch ~/.bashrc
touch ~/.bash_profile

# 将设定导入文件中
echo 'if [ -f ~/.bashrc ]; then . ~/.bashrc; fi' >> ~/.bash_profile
echo 'alias hexogo="hexo clean && hexo g && hexo d"' >> ~/.bashrc
echo 'alias hexotest="hexo clean && hexo g && hexo s"' >> ~/.bashrc
echo 'alias hexogit="git add * && git commit -m \"update hexo\" && git push origin hexo"' >> ~/.bashrc

#使设定在立即生效
. ~/.bashrc

#之后只需三条命令
# 发布 hexogo
# 测试 hexotest
# 备份hexo项目 hexogit

hexo在Ubuntu18.04 运行

1.安装node7.0.0

2.安装hexo:npm install hexo-cli -g

3.同步blog仓库，注意目录结构，可参考我的仓库, 记得删除主题的.git,.git*

4.运行npm install, 若安装无报错即可正常运行

5.mozjepg安装出错解决办法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
sudo apt-get install autoconf libtool pkg-config nasm build-essential


sudo apt-get -y install build-essential cmake libtool autoconf automake m4 nasm pkg-config
sudo ldconfig /usr/lib
cd ~
wget https://github.com/mozilla/mozjpeg/archive/v3.1.tar.gz
tar -xvzf v3.1.tar.gz
cd mozjpeg-3.1/
autoreconf -fiv
mkdir build
cd build
sh ../configure
sudo make install

常用设置与技巧

这里记录了一些简单设置和技巧

Hexo内置标签与标记

居中引用

Less is More

1
{% cq %}Less is More{% endcq %}

NexT自带tag

详细介绍

1.note

1
2
3
4
5
6
7
8
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

2.button

1
2
3
4
5
6
7
8
9
10
11
{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

url     : Absolute or relative path to URL.
text    : Button text. Required if no icon specified.
icon    : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
          Optional parameter.
[title] : Tooltip at mouseover.
          Optional parameter.

3.label

1
2
3
4
5
6
{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

4.video

1
{% video url %}

5.pdf

Settings

next/_config.yml
1
2
3
4
5
6
7
8
9
pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject:
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js
Usage

1
2
3
4
{% pdf url [height] %}

[url]    : Relative path to PDF file.
[height] : Optional. Height of the PDF display element, e.g. 800px.

文章摘要

在摘要后添加<!-- more -->， 即可设置前半部分加入摘要，产生阅读原文选项

版权信息

在主题文件themes/next/_config.yml找到copyright选项并打开

文章结束标签

1.在next/_macro添加文件passage-end-tag.swig,内容如下

1
2
3
4
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
    ------ 本文结束，感谢您的阅读 ------</div>
{% endif %}

2.在next/_macro/post.swig添加如下语句

1
2
3
4
5
6
7
8
9
{#####################}
{### END POST BODY ###}
{#####################}

{% if not is_index %}
<div>
    {% include 'passage-end-tag.swig' %}
</div>
{% endif %}

3.在next\_config.yml添加如下语句

1
2
passage_end_tag:
  enabled: true

增加网站地图入口

在next/_partials/footer.swig 增加网站地图入口

1
2
3
4
<div class="copyright">
...
&nbsp;&nbsp;|&nbsp;&nbsp;<span><a href="/sitemap.xml">网站地图</a></span>
</div>

为标题增加序号

使用hexo-heading-index插件

安装

·npm install hexo-heading-index --save

配置

文件位置:_config.yml
1
2
3
4
5
6
7
heading_index:
  enable: true
  index_styles: "{1} {1} {1} {1} {1} {1}"
  connector: "."
  global_prefix: ""
  global_suffix: ". "
# 这个配置会生成1.2.3.4.的序号

序号命名规则如下

1
<全局前缀 (global_prefix)><h1序号>[<连接符 (connector)><h2序号><连接符 (connector)>...<h6序号>]<全局后缀 (global_suffix)>

对于每一个单独的序号

1
<前缀>{序号类型[:样式:序号宽度]}<后缀>

修改主题配置，避免重复生成序号

文件位置:themes/next/_config.yml
1
2
3
4
5
# Table Of Contents in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: false

序号样式

类型 含义
0 从0开始的数字序号
1 从1开始的数字序号
i 小写的罗马字符
I 大写的罗马字符
a 小写的英文字符（最大到z，如果序号大于26，那么就会被转化成z）
A 大写的英文字符（最大到Z，如果序号大于26，那么就会被转化成Z）

另外对于序号”0”和”1’，还有一些额外的样式：

  • x: 以小写16进制输出序号
  • X: 以大写16进制输出序号

”0”和”1”类型的序号还能指定宽度，比如，如果指定宽度为2，那么序号3就会输出成03

示例

为了更好的说明这些配置的作用，这里再举一个例子。很多人写技术文章喜欢使用”0x00 0x01: “这类的序号，那么只需要这样配置即可：

1
2
3
4
5
6
heading_index:
  enable: true
  index_styles: "0x{0:X:2} 0x{0:X:2} 0x{0:X:2} 0x{0:X:2} 0x{0:X:2} 0x{0:X:2}"
  connector: " "
  global_prefix: ""
  global_suffix: ": "

额外的方法

如果不想用插件，也可用css方式实现,只需修改主题的自定义css风格

文件位置:themes\next\source\css\_custom\custom.styl
1
2
3
4
5
6
7
8
9
//文章标题增加序号
.post-body {counter-reset:section}
.post-body h2{counter-reset:sub-section}
.post-body h3{counter-reset:composite}
.post-body h4{counter-reset:detail}
.post-body h2:before{content:counter(section) " ";counter-increment:section}
.post-body h3:before{content:counter(section) "." counter(sub-section) " ";counter-increment:sub-section}
.post-body h4:before{content:counter(section) "." counter(sub-section) "." counter(composite) " ";counter-increment:composite}
.post-body h5:before{content:counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";counter-increment:detail}

深度美化与优化

显示pdf

安装插件hexo-pdf[^3]

1
npm install --save hexo-pdf

使用方法

1
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

或者,将pdf放入同级目录后

1
{% pdf ./bash_freshman.pdf %}

示例

博文压缩

使用hexo-neat1 和 hexo-imagemin2,安装指令如下:

1
2
npm install hexo-neat --save
npm install hexo-imagemin --save

并增加博客配置如下(跳过一些文件以提高压缩效率)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# hexo-neat
neat_enable: true

neat_html:
  enable: true
  exclude:
  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'

neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js' 

imagemin:
  enable     : true
  interlaced : false
  multipass  : false
  optimizationLevel: 2
  pngquant   : false
  progressive: false

代码块深度优化

修改styl文件即可

额外注意的是：如果latex不高亮，将语言改为tex即可

文件路径:themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 代码块调整
//代码块头部字体颜色适配
.highlight figcaption{
    color:#63ce4b;//#b10707;
    background-color: #21252b;
    border-bottom: 0px;
    padding-left: 0.8em;
    padding-top: 0.7em;
}

.highlight figcaption::before{
    content: "》";
    display: unset ;    
}
.highlight figcaption span::before{
    content: "【";
    display: unset ;    
}
.highlight figcaption span::after{
    content: "】";
    display: unset ;    
}

//代码块圆角矩形
.highlight {
    border-radius: 5px;
    box-shadow: 5px -5px 7px -1px rgba(128, 129, 130, 0.61);    
}

// 滑条样式调整
// 设置滚动条的样式
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
//滚动槽
::-webkit-scrollbar-track {
background: #eee;
}
//滚动条滑块
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(247, 149, 51);
}

个性化样式

1.为next主题主页文章添加阴影效果,在themes/next/source/css/_custom/custom.styl文件添加:

1
2
3
4
5
6
7
.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }

2.好玩的样式, 在themes/next/source/css/_custom/custom.styl增加如下样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
// 下载样式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
/ /颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}

2.1文字增加背景色块 站点配置文件,主题配置文件

1
2
<span id="inline-blue">站点配置文件</span>, 
<span id="inline-purple">主题配置文件</span>

2.2引用边框变色

如果没有安装成功, 那可能就是墙的原因. 建议下载 Node.js 直接安装.

关于更多基本操作和基础知识, 请查阅 Hexo 与 NexT 官方文档. 

1
2
<p id="div-border-left-red">如果没有安装成功, 那可能就是墙的原因. 建议下载 `Node.js` 直接安装. </p>
<p id="div-border-top-blue">关于更多基本操作和基础知识, 请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.</p>

2.3图形边框效果

Download Now 
1
2
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span>
</a>

更多tips可参考 blog

  1. hexo-neat 项目主页↩︎

  2. hexo-imagemin 项目主页 [^3 ]: hexo-pdf 主页↩︎