Gather ye rosebuds while ye may

对主题的修改

hexo · next

我说过了我要改悬浮header还有字体的,今天都改好了。
现在完成了,但是移动端还有一点点小小的遗憾没有解决。


改文件

还是改这个文件:
/hexo/themes/next/source/css/_schemes/Mist/index.styl
先把悬浮功能做出来,然后居中,加颜色,位置微调了很多
然后发信啊手机端看上去很恶心。。。改了半天
可惜原来点击site-nav-toggle之后的动画没有了
找了一下并不是我设置z-index的缘由
实在没有办法改成了有颜色遮蔽的,还好能看
不知道现在看起来和原作者的是不是有很多不一样了

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
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
//
// Mist scheme
// gaoryrt changed
// =================================================

.test { border: 10px; }

// Tags
// --------------------------------------------------
h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px 0px; }

// 正文的偏移
// --------------------------------------------------
p { margin: 0 0 20px 0px;
letter-spacing: .6px
word-spacing: 0px;
}

// 链接下划线的颜色
// --------------------------------------------------
a { border-bottom-color: $grey-light;
//background-color: gray
}

// 这个是分割线的设置
// --------------------------------------------------
hr {
margin: 10px -20px 40px -20px;
height: 2px;

}

// 列表的样式(尚未尝试有可能不是这个)
// --------------------------------------------------
ul li { list-style: circle; }


// Components 阅读全文
// --------------------------------------------------
.btn {
padding: 0 10px;
border-width: 2px;
border-radius: 0;

}

.headband { //display: none;
background-color: white;
padding: 0px 0px 40px 0px;

+mobile() {
display: none;
}
}


// Header 头·顶栏
// --------------------------------------------------
.header {
z-index:8;
position: fixed;
height: 40px;
width:100%;
margin-top: -43px;

background: rgb(245,245,245)
border-bottom: 2px solid rgb(234,234,234);

+mobile() {
height: 40px;
position: relative;
margin-top: 30px;

}

}
.header-inner {

margin-top: -30px;

height: 40px;
padding: 30px 0;

clearfix(); //清晰修正

+mobile() {
padding-top: 0px;
margin-bottom: 0px;

}
}

.site-nav{
background-color: rgb(234,234,234);
}


// 博客名
// --------------------------------------------------
.site-meta {

float: left;
margin-left: -17px;

+mobile() {
margin-left: 8px;
padding-top: 1px;
}

.brand {
padding: 2px 1px;
color: $black-deep;
background: none;

+mobile() { display: block; }
}

.logo { display: none; }

.site-title {
font-size: 26px;
font-family: "PingFang", Verdana, sans-serif;
font-weight: bold;
letter-spacing: -2px
word-spacing: -4px;

+mobile() {

line-height: 34px;
font-size: 24px;
}
}
}

// 博客名字上下的两条线
// ------------------------------------------
.logo-line-before,
.logo-line-after {
display: block;
overflow: hidden;
margin: 0 auto;
width: 100%;

+mobile() { display: none; }

i {
position: relative;
display: block;
height: 0px; //这个改成0就没有上下两行了
background: $black-deep;
+mobile() { height: 3px; }
}
}

.use-motion {
.logo-line-before i { left: -100%; }
.logo-line-after i { right: -100%; }
}



// Menu 顶栏右边的导航
// --------------------------------------------------
.site-nav-toggle {
padding-top: 2px;
position: static;
float: right;

}


.menu {
float: right;
margin: 0px -24px 0 0px;
padding: 0 0px 0px 0px;
font-size: 21px;

font-weight: bold;
font-family: "PingFang", Verdana, sans-serif;
+mobile() {

margin: 0;
padding-bottom: 10px;
font-weight: 400;
}

br { display: none; }

.menu-item {
margin-left: 0;
+mobile() { display: block; }
}

.menu-item a {
padding: 5px 10px;
background: none;
border: none;
transition-property: background;

+mobile() {
text-align: left;
}

&:hover { background: #e1e1e1; } //指针指到的时候背景色
}

a::before {
display: none;

+mobile() { display: block; }
}

+mobile() { float: none; }
}

.menu-left {
float: left;
+mobile() { float: none; }
}

.menu-item-icon { display: none; }



// Search 搜索栏
// --------------------------------------------------
.site-search {
float: right;
margin-top: 8px;

+mobile() {
float: none;
padding: 0 10px;
}

input {
padding: 3px;
border: none;
padding-left: 18px;
border-radius: 0;
width: 140px;
background: url($search-icon) no-repeat 0 50%;
background-size: 12px 12px;
outline: none;
border-bottom: 1px solid $grey-dark;
opacity: 0.5;
&:focus { opacity: 1; }
}
}


// Post Expanded 文章
// --------------------------------------------------
.posts-expand {
padding-top: 0;

.post-title,
.post-meta {

text-align: $site-meta-text-align;
+mobile() { text-align: $site-meta-text-align; }
}
.post-eof { display: none; }

.post { margin-top: 80px; }
.post:first-child { margin-top: 0; }

.post-meta { //预览部分偏移量
margin-top: 20px;
margin-bottom: 20px;
}

.post-title { //文章标题
font-size: 26px;

font-weight: bolder;
}

.post-body img { margin: 0; }

.post-tags {
text-align: left;
a {
padding: 1px 5px;
background: $whitesmoke; //tags
//border-bottom: none;
}
a:hover { background: $grey-light; }
}
.post-nav { margin-top: 10px; } //tag 与下方分隔栏的距离
}

//阅读更多 按钮
//----------------------------------------------------
.post-more-link {
margin-top: 0px;
text-align: left;

a {
padding: 0px 0px 0px 0px;
font-size: 14px;
color: $grey-dim;
background: none;
border: none;
border-bottom: 1px solid $grey-dim;
transition-property: border;

&:hover { border-bottom-color: black; }
}
}


// Page - Post details 单独文章页 标题
// --------------------------------------------------
.page-post-detail {
.post-title,
.post-meta { text-align: center; }

.post-meta { margin-bottom: 60px; }
}


// Pagination 主页 页数栏
// --------------------------------------------------
.pagination {
margin: 40px 0px 0px -20px;
text-align: left;
//background: $white;

+mobile() {
margin: 20px 0px 0px 10px;
text-align: left;
}
}

// Footer 页脚
// --------------------------------------------------
.footer {
margin-top: 80px;
padding: 20px 0;
background: $white;
color: $grey-dim;
}
.footer-inner {
margin: 0 auto;
text-align: centerr;

+mobile() { text-align: center; }
}

// Helpers
// --------------------------------------------------
.full-image.full-image.full-image {
max-width: 100%;
width: auto;
margin: 0;
}

以上是我的index.styl文件,直接拖到你自己的位置就能用,相当于是另一个主题了。。。
其实可以联系 next 作者的。。。
但是我的代码确实写得很渣

字体

这个原作者说过了,就是改
/hexo/themes/next/source/css/_variables/custom.styl
添加几行就行了,我的是这样的:

1
2
3
4
5
$content-desktop = 740px
$font-family-base = "PingFang", Verdana, sans-serif // 修改成你期望的字体族
.highlight {
-webkit-overflow-scrolling: touch;
}

对了,我还在上面的index.styl文件中调整了文字的间距


以上