Hexo博客设置进阶

感谢全栈工程师Never_yu

Never_yu开放了自己的博客源码供大家参考。为表示致敬,把原本计划放到我的博客技术的内容全部写在这里。

分类 内容说明 本文是否详细说明 对应的文字或代码解释
展示生动化 在文档中增加图标 是,增加自己的理解 常见问题3
文字增加背景色块 是,增加自己的理解
图形边框效果
引用边框变色
行内代码引用
代码引用高亮和引用的引用 是,增加自己的理解
修改超链接的展示样式 7.修改文章内链接文本样式
添加居中效果
功能优化 菜单栏中标签与侧边栏中标签关联的问题 引用到其他文章
其他 github屏蔽vendors ,导致页面空白的解决方案
关于如何修改内容区域宽度
图片模式
添加音乐
添加最近访客
鼠标点击小红心的设置
背景的设置
多说评论不稳定,加载速度慢怎么办?
给 Github 添加 README
精于心的动画
附录 PS:定制的css页面

展示生动化

NexT主题极简风格给人很舒服的感觉,在其中点缀少许生动的元素,会增色不少,下面的方法在视觉上会增加许多鲜活的因素,不过并不是一味的加法就是好事情,要酌情选择。

在文档中增加图标

Hexo-NexT搭建个人博客(一)有符合主题色调的图标搭配文字,效果如下:

  •     支持Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  •     一件部署
    只需一条指令即可部署到Github Pages,或其他网站
  •     丰富的插件
    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

代码如下:

1
2
3
4
5
6
- <i class="fa fa-pencil"></i>支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。</i>
- <i class="fa fa-cloud-upload"></i><h6 style="display: inline;"> 一件部署</h6>
<i>只需一条指令即可部署到Github Pages,或其他网站</i>
- <i class="fa fa-cog"></i><h6 style="display: inline;"> 丰富的插件</h6>
<i>Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。</i>

这是在Markdown中插入了html的语句,我把第一句中的<h6>去掉了,看一下效果。至于图标,采用Font Awesome提供的默认图标,语法格式如下:

<i class="fa fa-github"></i>

<i class="fa fa-github fa-lg"></i>

<i class="fa fa-github fa-2x"></i>

Font Awesome提供了大量的应用方法说明,可以参考设置自己的博客内容。

文字增加背景色块

相信大家对下面的文字增加背景色块的显示方式并不陌生。

官方文档开篇:为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为主题配置文件
Github仓库的Readme.md中的小图标(如下图):

Join the chat at https://gitter.im/iissnan/hexo-theme-next

要想实现第二种方式,比较简单,做好对应的图片,源码如下:

1
[![Join the chat at https://gitter.im/iissnan/hexo-theme-next](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/iissnan/hexo-theme-next?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

前面是图片的地址,后面是图片点击之后的触发。

至于第一种显示,需要做两件事情,先在themes\next\source\css\_custom\custom.styl对应的文件中增加 css 样式语句,具体的语句内容见定制的CSS代码部分。在正文需要使用的地方写如下内容:

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

原理是通过Markdown文件中的id读取到了css文件中对应的样式并且直接展示出来,两者缺一不可。

图形边框效果

Hexo-NexT搭建个人博客(一)有一个非常醒目的 Download Now
文字效果。鼠标出发后还会有变色,下载git安装包。

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

这也是调用了Font Awesome的方法。

引用边框变色

左边框变色和上边框变色效果如下:

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

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

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>

原理和文字增加背景色块相同,不再赘述。

行内代码引用

这个问题困扰了我很久,类似于我是代码这样在行内引用代码。

1
`我是代码`

一直使用四个点来做代码引用,三个点也可以。

代码引用高亮和引用的引用

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

在上代码引用块的右侧增加对应的解释方法即可。

1
2
3
``` bash
git clone https://github.com/iissnan/hexo-theme-next themes/next
```

html的语言,把bash改为html。
上面的例子还解释了一个问题,如果把引用的符号也加入到引用的代码块中,因为四个符号和三个符号都可以引用代码,所以在三个引用符号之外加上四个符号,程序就能正常的配对和显示。

修改超链接的展示样式

Hexo-NexT搭建个人博客(二)中修改文章内超链接文本样式为淡蓝色。只要在主题的源码中找到对应的文件themes\next\source\css\_custom\custom.styl ,添加如下 css 样式语句:

1
2
3
4
5
6
7
8
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

注意:
    该样式是全局样式,所有用到markdown默认语法的超链接都会采用这样的方式展示。
    在Markdown列表模式下,该样式并未加载。

添加居中效果

感谢全栈工程师Never_yu

代码如下:
1
<blockquote class="blockquote-center">感谢全栈工程师[Never_yu](https://neveryu.github.io/)。</blockquote>

这是hexo默认的引用方式。

功能优化

菜单栏中标签与侧边栏中标签关联的问题

我在NexT主题个性化修改与调试方案中已经详细说明,Never_yu’s Blog也有方案,不再赘述。

其他

关于github屏蔽vendors ,导致页面空白的解决方案

暂时没有遇到

关于如何修改内容区域宽度

尚未修改

图片模式

尚未启用。

添加High一下

暂时不添加

添加最近访客

暂时不添加

鼠标点击小红心的设置

没看到效果

背景的设置

暂时不添加

多说评论不稳定,加载速度慢怎么办?

暂时不修改

给 Github 添加 README

暂时不修改

动画效果

NexT 因其 精于心,简于形 的风格,一直被广大用户所喜爱。
在CSS中找到了id=”yu-1”的部分,但是对css不了解,暂时放弃。

声明: 本文转载需标明出处,禁止用于商业目的。

ChangeLog

161123 新建

PS:定制的css页面

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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
// Custom styles.
//修改文章内链接文本样式
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
//修改不在文章内的链接文本样式
.link-blue{
color: #f36;
&:hover {
color: #f00;
}
}
//修改文章内code样式
code {color:#fff;background:#333;}
//修改文章中图片样式,改为居中
.posts-expand .post-body img {
margin: 0 auto;
}
// 下载样式
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;
}
}
//阅读全文样式
.post-more-link .btn {
position:relative;
border: 2px solid #000;
border-radius: 2px;
padding: 0 10px;
font-weight: bold;
background: transparent;
transition: all .5s ease;
&:hover {
background: #000;
color: #eee;
animation: animate-yu-1 3s ease-in;
}
}
//
//
//
// 颜色块-黄
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;
}
//动画模块
//第一篇博客中-精于心,简于形-的动画
span#yu-1 {
display:inline;
position:relative;
border-top:1px solid #222;
border-bottom:1px solid #222;
font-size:110%;
cursor:pointer;
&:hover {
background-color: #000;
color: #fff;
animation: animate-yu-1 3s ease-in;
}
}
@keyframes animate-yu-1 {
0% {
left:-10px;
top:0px;
}
10% {
left:10px;
top:0px;
}
20% {
left:-8px;
top:0px;
}
30% {
left:8px;
top:0px;
}
40% {
left:-5px;
top:0px;
}
50% {
left:5px;
top:0px;
}
60% {
left:-3px;
top:0px;
}
70% {
left:3px;
top:0px;
}
80% {
left:-1px;
top:0px;
}
90% {
left:1px;
top:0px;
}
100% {
left:0px;
top:0px;
}
}
//留言页面-[最近访客]-的样式
span#yu-2 {
display:inline;
position:relative;
border-top:1px solid #222;
border-bottom:1px solid #222;
font-size:130%;
}