Hexo-NexT魔改系列-04-进阶设置

没有退路的时候,正是潜力发挥最大的时候。
Hey~ 这里有你不知道的一些进阶 CSS 配置哦~ 来这里看看吧!
完结撒花!!!


页脚美化

首先来康康效果图哟:

footer

接下来将一步步带领大家美化你的页脚!

在我的 这篇博客 已经有对即将要修改的文件的初始操作,还请各位小伙伴首先阅读链接中的博客哦

跳动的心

首先编辑你的博客中的 主题配置文件 修改 footer 值:

1
2
footer:
icon: heart

然后编辑 /themes/next/layout/_partials/footer.swig 文件,找到 <span class="with-love"> 将其修改为:

1
<span class="with-love" id="heart">

再编辑 /themes/next/source/css/_custom/custom.styl 文件,加入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 自定义页脚跳动的心样式 */
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(255, 113, 168);
}

其中,color 的值可以设置成你喜欢的值,灵感来自 DIYgod 大佬的博客,CSS代码参考 这篇文章

最新版本的 NexT 主题已经内嵌支持,无需添加代码,详情参考 这里

页脚样式美化

修改 /themes/next/layout/_partials/footer.swig 文件,将 <div class = "copyright"></div> 改为:

1
<div class="copyright custom-footer">

这里就是加上一个 class 然后你就可以在 /themes/next/source/css/_custom/custom.styl 文件中写下你喜欢的样式了~ 这里贴上我的样式作为参考:

1
2
3
4
5
6
7
.custom-footer {
color: rgba(52, 52, 52, 1.0);
border-top: 3px solid #9370db;
background-color: rgba(255, 255, 255, 0.75);
padding: 10px 0;
font-size: 15px;
}

SideBar美化

Side Title

/themes/next/source/css/_custom/custom.styl 文件中加入以下样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.site-title:hover {
webkit-background-clip: text;
-webkit-text-fill-color: #000;
-webkit-text-stroke: 1px #ddd;
}

.site-title {
display: inline-block;
vertical-align: top;
line-height: 36px;
font-size: 21px;
font-weight: 700;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
text-shadow: 5px 5px 3px rgba(47, 138, 216, 0.47);
color: #329edc;
}

这个是修改了你的博客左上角的主页按钮,简介的话之前有说,可以使用 <font> 来修改颜色。

友情链接

修改 主题配置文件,找到 Blog rolls,修改为如下:

1
2
3
4
5
6
7
8
9
# Blog rolls
links_icon: thumbs-o-up
links_title: 哥哥们的博客
links_layout: block
#links_layout: inline
links:
#Title: http://example.com/
【全能选手Hang_ccccc】: https://hangcc.cn
【金牌选手LuKe】: https://www.cnblogs.com/317zhang/

就可以啦!


自定义样式

众所周知 MarkDown 可以变成 HTML5,那么我们可以加上自己设置的样式来美化文章,打开 /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
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
// Custom styles.
/* 文章内链接文本样式 */
.post-body p a,
.post-body li a {
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;

&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

/* 主页文章添加阴影效果 */
.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);
}

/* 背景图片透明度 */
.backstretch {
opacity: .85;
}

/* 页面透明度 */
.content-wrap, .sidebar {
opacity: .9 !important;
}

.header-inner {
background: rgba(255, 255, 255, 0.9) !important;
}

/* 去掉图片边框 */
.posts-expand .post-body img {
border: none;
padding: 0;
}

.post-gallery .post-gallery-img img {
padding: 3;
}

.euphoria-footer {
color: rgba(52, 52, 52, 1.0);
border-top: 3px solid #9370db;
background-color: rgba(255, 255, 255, 0.75);
padding: 10px 0;
font-size: 15px;
}

/* 自定义页脚跳动的心样式 */
@keyframes heartAnimate {
0%, 100% {
transform: scale(1);
}
10%, 30% {
transform: scale(0.9);
}
20%, 40%, 60%, 80% {
transform: scale(1.1);
}
50%, 70% {
transform: scale(1.1);
}
}

#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}

.with-love {
color: rgb(255, 113, 168);
}

/* 自定义的侧栏时间样式 */
#days {
display: block;
color: #007FFF;
font-size: 14px;
margin-top: 15px;
}

/*By Euphoria*/

.introduction {
color: #ff0000;
}

td {
text-align: center;
vertical-align: bottom;
}

td, th {
border: 2px solid white;
font-size: 18px;
}

th {
background-color: #337ab7;
color: white;
}

.code {
text-align: left;
font-size: 14px;
}

code {
color: rgba(213, 0, 252, 0.91);
background: rgba(78, 240, 233, 0.55);
margin: 0 4px;
font-size: .9em;
border: 1px solid #d6d6d6;
border-radius: 3px;
padding: 2px 4px;
word-wrap: break-word;
}

code, pre {
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
}

.blue-target {
padding: 3px 5px;
margin: 0 4px;
font-size: 16px;
font-weight: 700;
color: white;
background-color: #337ab7;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

.purple-target {
padding: 3px 5px;
margin: 0 4px;
font-size: 16px;
font-weight: 700;
color: white;
background-color: #9954bb;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

.green-target {
padding: 3px 5px;
margin: 0 4px;
font-size: 16px;
font-weight: 700;
color: white;
background-color: #2b6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

.red-target {
padding: 3px 5px;
margin: 0 4px;
font-size: 16px;
font-weight: 700;
color: white;
background-color: #ff0000;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

.post-body h2 {
background: #2b6695;
border-radius: 6px 6px 6px 6px;
border: none;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #fff;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-weight: 700;
line-height: 1.3;
margin: 18px 0 18px -10px !important;
padding: 10px;
text-shadow: 2px 2px 3px #222;
font-size: 1.45em;
display: block;
}

.post-body h3 {
background: #2b6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #fff;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-size: 1.2em;
font-weight: 700;
line-height: 1.5;
margin: 12px 0 12px -3px !important;
padding: 5px 10px 3px 10px;
text-shadow: 2px 2px 3px #222;
border-bottom: 1px solid #eee;
display: block;
}

.post-body h4 {
background: rgba(103, 58, 183, 0.72);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #fff;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-size: 1em;
font-weight: 700;
line-height: 1.5;
margin: 12px 0 12px -3px !important;
padding: 5px 10px 3px 10px;
text-shadow: 2px 2px 3px #222;
border-bottom: 1px solid #eee;
display: block;
}

.post-body h2 code, .post-body h3 code, .post-body h4 code {
font-size: inherit;
color: #f7ab01;
background: 0 0;
border: none;
}

.site-title:hover {
webkit-background-clip: text;
-webkit-text-fill-color: #000;
-webkit-text-stroke: 1px #ddd;
}

.site-title {
display: inline-block;
vertical-align: top;
line-height: 36px;
font-size: 21px;
font-weight: 700;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
text-shadow: 5px 5px 3px rgba(47, 138, 216, 0.47);
color: #329edc;
}

.note {
position: relative;
padding: 15px;
margin-bottom: 20px;
border: initial;
border-left: 3px solid #eee;
background-color: #f9f9f9;
border-radius: 3px;
}

.note.info {
background-color: #eef7fa;
border-left-color: #428bca;
}

.post-tags {
margin-top: 0;
}

.post-widgets {
padding-top: 10px;
padding-bottom: 25px;
margin-top: 0;
}

至此,我们的 Hexo-NexT魔改系列 暂时告一段落了(要找工作辽顶不住),有问题或者更好的建议的小伙伴可以在下方留言或添加 QQ 879969355 来找到菜鸡本人。
祝各位的博客越变越漂亮~

(完结撒花)
-------------本文结束 Euphoria 在此感谢您的阅读-------------

本文标题:Hexo-NexT魔改系列-04-进阶设置

文章作者:王钦弘

发布时间:2019年09月23日 - 12:27

最后更新:2019年09月23日 - 14:17

原始链接:https://www.wqh4u.cn/2019/09/23/Hexo-NexT魔改系列-04-进阶设置/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励 Euphoria 继续创作!
(如果你还是学生请千万不要打赏,留点钱在学习上啊!)
0%