some config on next theme

Posted on

上次配置了hexo+github的个人博客，这次我做了一些偏好的配置。

更换主题为next

因为网上很多关于主题配置的博客都是基于next主题的，所以我先将主题换为了next主题：

1、先下载主题到本地

1
2
3
$ cd ~
$ cd GitBlog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

2、更改站点的config文件来使用主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

3、更改theme/next的config文件(/theme/next/_config.yml):

1
2
3
4
5
6
7
8
9
10
11
12
# 修改主题模式为Gemini
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

#修改侧边栏头像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: https://wx2.sinaimg.cn/large/0070VybLly1fx5b09mly4j30kx0i14kq.jpg

添加搜索功能

下载hexo搜索插件hexo-generator-search
然后修改站点的config文件启动搜索功能：

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#在插件位置插入搜索模块使能插件
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

添加渐变更换的壁纸

效果比较像忧郁的弟弟(额马上就是loli了)背景效果。

1、在/theme/next/source/css/_custom/中修改_custom.styl，添加css3动画特效：

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
body {
background: #000;
background-attachment: fixed;
word-wrap: break-word;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat
}
 
ul {
list-style: none
}
 
.cb-slideshow li:nth-child(1) span {
background-image: url(https://wx3.sinaimg.cn/large/0070VybLly1fx5b098is8j31hc0u0jzz.jpg)
}
 
.cb-slideshow li:nth-child(2) span {
background-image: url(https://wx3.sinaimg.cn/large/0070VybLly1fx5b095t28j31hc11hdph.jpg)
}
 
.cb-slideshow li:nth-child(3) span {
background-image: url(https://wx2.sinaimg.cn/large/0070VybLly1fx5b09b17xj31hc0z2tim.jpg)
}
 
.cb-slideshow li:nth-child(4) span {
background-image: url(https://wx4.sinaimg.cn/large/0070VybLly1fx5b09474xj31hc0x6jy5.jpg)
}
 
.cb-slideshow li:nth-child(5) span {
background-image: url(https://wx2.sinaimg.cn/large/0070VybLly1fx5b08weitj31hc11otga.jpg)
}
 
.cb-slideshow li:nth-child(6) span {
background-image: url(https://wx3.sinaimg.cn/large/0070VybLly1fx5b1eraokj31hc0u0gp9.jpg)
}
 
.cb-slideshow,.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2
}
 
.cb-slideshow:after {
content: ''
}
 
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: -2;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s
}
 
.cb-slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s
}
 
.cb-slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s
}
 
.cb-slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s
}
 
.cb-slideshow li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s
}
 
.cb-slideshow li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s
}
 
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in
}
 
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out
}
 
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(0)
}
 
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(0)
}
 
100% {
opacity: 0
}
}

2、在/theme/next/layout/中修改_layout.swig，在标签中加入下述代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="cb-slideshow">
		<li>
		<span>1</span></li>
		<li>
		<span>2</span></li>
		<li>
		<span>3</span></li>
		<li>
		<span>4</span></li>
		<li>
		<span>5</span></li>
		<li>
		<span>6</span></li>
  </ul>

在Markdown内添加html锚点来实现页面内跳转

在跳转的目的地放置如下锚点：

1
<span id="jump">跳转到的地方</span>

在跳转的出发点，就是希望点一下跳转的地方放置锚点的链接：

1
[点击跳转](#jump)

在Markdown内使用Latex格式公式

1、更换渲染引擎，从marked更换为kramed

1
2
$ npm uninstall hexo-renderer-marked --save
$ npm install hexo-renderer-kramed --save

2、修改主题配置文件/theme/next/_config.yml，开启mathjax功能，并修改cdn值

1
2
3
4
5
mathjax:
  enable: true
  per_page: true
# cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
  cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

3、解决语义冲突，在hexo目录下找到文件node_modules/kramed/lib/rules/inline.js，找到如下位置进行修改：

1
2
3
4
5
6
7
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

...

//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

4、在写blog时候，在tags:下一行添加：

1
2

mathjax: true