Hexo建站日志 (6) - 添加文章书写样式

新文章创建:

  • 在根目录下,执行命令 hexo new "title"
  • ~/blog/source/_posts/ 下新建 .md 结尾的文件来写新的文章

文章的模版文件

我们知道执行以下命令:

hexo new post "title 用来创建新文章

hexo new page "title 用来创建新菜单页面

hexo new draft "title 用来创建新草稿

在 Hexo 中执行 hexo new "title" 命令,默认是执行 hexo new post "title" 命令。若想修改默认设置,需在 站点配置文件 中修改,如下图所示:

default_layout

执行 hexo new "title" 命令新建的文章,实际上是将 ~/blog/scaffolds/ 中的文章模板文件 post.md 复制到了 ~/blog/source/_posts/ 下。自定义此模板文件,可以使每次新建的文章都会有自定义的内容。

参考阅读 Hexo 官方文档的 Front-matter页面变量

Note tag - Bootstrap Callout

在主题配置文件 ~/blog/themes/next/_config.yml 中修改。

1
2
3
4
5
6
7
8
9
# Note tag (bs-callout).
note:
# 风格
style: flat
# 要不要图标
icons: false
# 圆角矩形
border_radius: 3
light_bg_offset: 0

效果与代码:

default

1
<div class="note default"><p>default</p></div>

或者:

1
{% note default %} default {% endnote %}

primary

1
<div class="note primary"><p>primary</p></div>

success

1
<div class="note success"><p>success</p></div>

info

1
<div class="note info"><p>info</p></div>

warning

1
<div class="note warning"><p>warning</p></div>

danger

1
<div class="note danger"><p>danger</p></div>

danger no-icon

1
<div class="note danger no-icon"><p>danger no-icon</p></div>

文字增加背景色块

文件位置:~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
// 下载样式
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-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;
}

效果:

站点配置文件
主题配置文件
站点配置文件
主题配置文件

代码如下:

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

数字标签

文件位置:~/themes/next/source/css/_custom/custom.styl

配置:

1
2
3
4
5
6
7
8
9
10
// 自定义的数字块
span#inline-toc {
display: inline-block;
border-radius: 80% 100% 90% 20%;
background-color: rgb(227, 242, 253);
color: #555;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}

效果与代码:

1.

1
<span id="inline-toc">1.</span>

图形边框效果

图形同样从 Font Awesome 调用。

效果:

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>

修改字体

字体大小

文件位置 ~/themes/next/source/css/_variables/base.styl

1
font-size-base = 16px

字体样式

中文

推荐阅读:

Web中文字体排版指南
Web 字体的选择和运用
如何优雅的选择字体(font-family)
中文字体网页开发指南
在Web内容中使用系统字体

英文

  1. Google Fonts 找自己喜欢的英文字体;
  2. 然后编辑主题配置文件,参考 NexT官方文档

文件位置:~/themes/next/_config.yml

代码示例:

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
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host: https://fonts.cat.net
# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family: Roboto Slab
# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:
# Font settings for <code> and code blocks.
codes:
external: true
family: Roboto Mono
size:

注脚(footnotes)

参考 README

Installation

在 Hexo 默认路径下运行以下代码:

1
npm install hexo-footnotes --save

Syntax

在 markdown 中的使用方法:

1
2
3
4
5
6
7
8
9
10
basic footnote1
here is an inline footnote[^2](inline footnote)
and another one3
and another one4

[^1]: basic footnote content
[^3]: paragraph
footnote
content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)

文本居中

效果:

人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!

代码:

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!
{% endcq %}

标签插件 - Tag Plugins

标签插件(Tag Plugins)和 Front-matter 中的标签不同,它们是用于在文章中快速插入特定内容的插件。

参考阅读:标签插件(Tag Plugins)

引用块 - quote

在文章中插入引言,可包含作者、来源和标题。

模板

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

样例

没有提供参数,则只输出普通的 blockquote

1
2
3
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

效果:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

效果:

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

效果:

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

引用网络上的文章

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

效果:

Every interaction is both precious and an opportunity to delight.

自定义引用块

文件位置:~/themes/next/source/css/_custom/custom.styl

配置:

1
2
3
4
5
6
7
8
9
// 自定义的引用样式
blockquote.question {
color: #555; // 文字颜色
border-left: 4px solid rgb(16, 152, 173); // 边框颜色和粗细
background-color: rgb(227, 242, 253); // 背景颜色
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 20px;
}

效果与代码:

内容
1
<blockquote class="question">内容</blockquote>

代码块 - code

模板

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

样例

普通的代码块

1
2
3
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

效果:

1
alert('Hello World!');

指定语言

1
2
3
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

效果:

1
[rectangle setX: 10 y: 10 width: 20 height: 20];

附加说明

1
2
3
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

效果:

Array.map
1
array.map(callback[, thisArg])

附加说明和网址

1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

效果:

_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

反引号代码块

另一种形式的代码块,不同的是它使用三个反引号来包裹。

自定义代码块

参考:HEXO下的语法高亮拓展修改

打开 themes/next/source/css/_custom/ 下的 custom.styl,向里面加代码(颜色可以自己定义)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

Pull Quote

1
2
3
{% pullquote [class] %}
content
{% endpullquote %}

iframe

在文章中插入 iframe。

1
{% iframe url [width] [height] %}

图片 - Image

在文章中插入指定大小的图片。

1
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

Youtube

在文章中插入 Youtube 视频。

1
{% youtube video_id %}

相关阅读

打造个性超赞博客Hexo+NexT+GithubPages的超深度优化