Hexo博客Next v7.X 主题升级,美化警示录

本教程适用于Next主题 V7.X以上版本,V7.X以下版本见 2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈

前言

经历了好几天(懒癌晚期懒得数了)的与主题升级斗争后,我终于完成基本上完成了next主题的升级!升到了V7.3!哈哈哈哈哈哈隔,我一个小白干这事干嘛呀我….这不是自讨苦吃嘛…
所以我来劝劝你们不要升级了,因为Next主题还是6.X版本稳定(而且作者说会继续支持)教程也多,想要抄代码的朋友建议不要学我瞎折腾了.(呜呜呜我失去了抄代码的机会)
如果您也不经意的升级了7.X主题,不慌,或许我能救救你???
建议选择稳定版本

如何正确升级Next主题

注意:更新有风险,一定要谨慎处理文件中冲突的部分!另,如果更新 NexT 主题后,配置文件有些新功能不会配置,可以查看官方介绍 页面,去里面找说明.

参考

官方教程
官方教程-从 v5.1.x 更新到 v6.0.x
以下参考与官方教程有误的请以官方教程为准,慎重操作

打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化 | reuixiy
Hexo 升级及 Next 主题升级 | 💕秋秋 Nemo

下载最新发布版本,获得主题源码

参考,必看!

使用curl,tar和wget安装

1
2
$ mkdir themes / next
$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d ' “ ' - f 4 | wget -i - -O- | tar -zx -C themes / next --strip-components = 1

这种方式将仅提供最新的发布版本(其中不附带.git目录).
因此,将来你将不能通过git更新这一方式安装的主题.
取而代之的,为了能不丢失你的自定义配置,你可以使用独立的配置文件(例如数据文件)并下载最新版本到旧版本的目录中(或者下载到新的主题目录中并修改Hexo配置中的主题名).

下载标签指向的发布版本

使用git安装:$ git clone --branch v6.0.0 https://github.com/theme-next/hexo-theme-next themes / next

这一方式将为你下载指定的release版本(其中包含.git目录).
并且,你可以随时切换到任何已定义的版本号所对应的标签的版本.

我的操作(很迷,慎重模仿)

打开这里 ,拉到底,下载zip保存到任意位置.
下载7.3
解压到 ~\themes 里,并随便改名(建议 next-reloaded ,下文同,不要问我为什么:))
原因↓出处
改名next-reloaded
如果一切正常的话,你会在 ~\themes 得到这样一个文件结构(没安装过别的主题的话)
文件结构
最后一步,打开你的站点_config.yml文件

搜索关键词 theme: 将原来的旧主题指向新主题

1
theme: next-reloaded # 新主题,如果你没把文件夹命名为next-reloaded,这里填你自己的名字,下同,不再提醒

主题配置-填坑

OK,无论如何你都已经获得了主题源码,别着急你还有很多坑要填呢.

语言

Next v7.X主题
中文语言设置,已经从 zh-Hans 更换为 zh-CN ,在站点_config.xml 更新.
(如果你连这个都不知道在哪改,求求你给我个理由…为什么要作死更新)
Next v7.X主题-语言修改

扩展页面内容宽度

反正我没出现这个问题.有问题的话可以参考这里

主题_config.xml搬家

简单来说,就是将站点配置平移过去.这里列举一下大部分需要修改的地方和新功能(可能有遗漏,请自行检查)
操作:
同时打开(旧)next主题_config.xml、(新)next-reloaded主题_config.xml文件,然后一项项对比就好了.

小窍门

你可以将next-reloaded主题_config.xml文件,Ctrl+A,Ctrl+C全部复制一份,然后粘贴到百度翻译一项项看,能理解快速很多,再对比原来的文件修改就好了.(大佬、学霸轻喷)
Next v7.X主题-小窍门

平移-Menu(菜单)配置

直接从旧主题配置 _config.yml 文件复制过来就好了.
①打开旧主题配置 _config.yml 文件,搜索关键词 menu:,复制
②打开新主题配置 _config.yml 文件,搜索关键词 menu:,粘贴
(这是我的,别看都不看照抄…)
Next v7.X主题-菜单配置
记得把下面的图标打开

1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: true
平移-主题方案选择

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 scheme: 将你原来选择的方案前面的 # 号去掉或者加上即可.

平移-侧栏社交地址和友链平移

侧栏社交地址:
直接从旧主题配置 _config.yml 文件复制过来就好了.
①打开旧主题配置 _config.yml 文件,搜索关键词 social:,复制
②打开新主题配置 _config.yml 文件,搜索关键词 social:,粘贴
(这是我的,别看都不看照抄…)
Next v7.X主题-侧栏社交地址配置

友链:
同上,直接从旧主题配置 _config.yml 文件复制过来就好了.
①打开旧主题配置 _config.yml 文件,搜索关键词 links:,复制
②打开新主题配置 _config.yml 文件,搜索关键词 links:,粘贴

侧栏配置

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 sidebar::,设置即可.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sidebar:
# Sidebar Position.
#position: left //左
position: right //右

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.有目录时自动展开
# - always expand for all pages automatically.始终自动展开所有页面
# - hide expand only when click on the sidebar toggle icon.仅当单击侧边栏切换图标时展开
# - remove totally remove sidebar including sidebar toggle.完全删除侧边栏,包括侧边栏切换
display: hide //从上面选一个填就好了
站点logo配置

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件

1
2
3
favicon:
small: 改为你的logo地址或者本地路径即可
medium: 改为你的logo地址或者本地路径即可
关键词设置

建议直接复制站点_config.xml文件里的 keywords:

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件

1
keywords: "奥怪的小栈" // 改为你的关键词即可
文章底部版权开启

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 creative_commons: 里的 sidebar: 改为 true 即可.

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License. 版权
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language:
开启打赏功能

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 reward_settings: 里的 enable: 改为 true 即可.

1
2
3
4
5
6
7
8
9
10
11
# Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: true //开启
animation: false
comment: 这里填你的提示语
reward:
wechatpay: https://i.loli.net/2019/07/21/5d34845131fef43810.png // 微信支付,这里换成你的收款码地址或者路径即可
alipay: https://i.loli.net/2019/07/21/5d34845131fef43810.png // 支付宝支付,这里换成你的收款码地址或者路径即可
#bitcoin: /images/bitcoin.png // 比特币支付,这里换成你的收款码地址或者路径即可
SEO设置

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 # SEO Settings 改相关配置即可.
我的借你参考一下

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
# Disable Baidu transformation on mobile devices.
disable_baidu_transformation: true //禁用移动设备上的百度转换,建议 true

# Set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yourdomain.com)
canonical: true //规范的链接标签,建议 true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
# 更改网站副标题(将是主要网站描述)和所有文章/页面标题的标题层次结构,以便更好地优化SEO.
seo: true //建议 true

# If true, will add site-subtitle to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: true //带副标题的索引,开启后会在标签标题后面自动加上网站名称,建议 true

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false

# Google Webmaster tools verification.
# See: https://www.google.com/webmasters ←参考
google_site_verification: //谷歌网站管理员工具验证

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmaster ←参考
bing_site_verification: //必应Bing网站管理员工具验证

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru ←参考
yandex_site_verification: //Yandex网站管理员工具验证

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site ←参考
baidu_site_verification: //百度站长工具验证

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
#启用百度推送,这样博客会自动把网址推到百度,这对SEO很有帮助.
baidu_push: true //建议 true
新功能-博主头像圆形并旋转

在之前的版本里面得自定义才能达到,现在已经可以直接配置了.

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 avatar: 修改相应配置即可.

1
2
3
4
5
6
7
8
9
avatar:
# In theme directory (source/images): /images/avatar.gif //图片在主题目录中,去掉前面#号,改为直接的路径
# In site directory (source/uploads): /uploads/avatar.gif //图片在主题目录中,去掉前面#号,改为直接的路径
# You can also use other linking images.您也可以使用其他链接图像
url: https://i.loli.net/2019/07/21/5d3484685458180025.png //使用网络图片
# If true, the avatar would be dispalyed in circle.
rounded: true //开启后,头像为圆形
# If true, the avatar would be rotated with the cursor.
rotated: true //开启后,头像获得光标时旋转
新功能-背景开启帆布窝或帆布色带

文件路径: ~\themes\next-reloaded\_config.yml
自行修改相关参数即可
帆布窝:

1
2
3
4
5
6
7
canvas_nest:
enable: false //打开改为:true
onmobile: true # display on mobile or not是否在移动设备上显示
color: "0,0,255" # RGB values, use `,` to separate(rgb值,使用`,`分隔)
opacity: 0.5 # the opacity of line: 0~1 线条不透明度:0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines 数量

效果:
帆布窝效果

帆布色带:

1
2
3
4
5
canvas_ribbon:
enable: false //打开改为:true
size: 300 # The width of the ribbon 宽度
alpha: 0.6 # The transparency of the ribbon 透明度
zIndex: -1 # The display level of the ribbon

效果:
帆布色带效果

新功能-生成hexo后删除不必要的文件

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 minify: 改为 true 即可.

新功能-站点创立时间设置

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 footer: 修改相关数据 即可.
(这部分我好像自定义过,如果跟我不一样的不要自行添加代码,修改你有的部分就行)
Next v7.X主题-站点创立时间设置

新功能-年份和版权信息之间的图标

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 icon: 修改相关数据即可.
(这部分我好像自定义过,如果跟我不一样的不要自行添加代码,修改你有的部分就行

1
2
3
4
5
6
7
8
9
10
11
12
# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart # user
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: by 奥怪的小栈
新功能-备案号

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 beian: 修改相关数据即可.

1
2
3
4
# Beian ICP information for Chinese users. See: http://www.beian.miit.gov.cn
beian:
enable: false
icp:

如何美化、优化

这里只介绍一下我在用的配置.其他配置可以通过查看 _config.yml 配置文件 自行测试.

代码块复制功能 开启

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 codeblock: 修改相关数据即可.

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright //这些都是样式
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night //从上面选一个样式
# Add copy button on codeblock 在代码块上添加复制按钮
copy_button:
enable: true //开启
# Show text copy result.
show_result: true
# Available values: default | flat | mac //默认风格,选一个填下去就好了
style: mac

Follow me on GitHub功能 开启

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词 github_banner: 修改相关数据即可.

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true // 开启
permalink: https://github.com/aoguai //这里改成你的github地址
title: Follow me on GitHub //提示语

来必力评论功能 开启

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词

1
livere_uid: 这里填你的来必力UID即可

如果你还不知道评论功能,请看旧版的教程 ,使用方法是一样的.

分享功能 开启

参考

addthis分享

首先打开官网 ,注册账号(由于我注册过了,就不再截图演示了,注册过程有什么不懂的地方翻译一下基本就能搞懂了)
然后新创建一个工具(右上角添加)
addthis分享
然后,选第一个就好了.
addthis分享2
你可以任意选择一个你喜欢的样式(不建议选弹框类型的…)
addthis分享3
我选了Expanding,还可以设置其他配置,比如,位置啊,颜色啊什么的,看不懂英文的朋友可以翻译插件翻译一下.就不一一截图了.
addthis分享4
设置完后,回到工具页面,点击右上角获得代码,复制你的ID
addthis分享5

路径 ~\themes\next-reloaded\_config.yml
打开新主题配置 _config.yml 文件,搜索关键词

1
add_this_id:  这里填你的ID即可

Likely Share分享

这个分享按钮是在每篇文章底部的.
感兴趣的朋友可以直接看官方教程官网
自己捣鼓一下就能完成啦其实是我太懒了

NeedMoreShare2分享

同上
依赖项
教程

如果三种分享都注册并使用的话,效果是这样的.
分享效果

站点字体美化

推荐直接参考这篇文章
最新用法

另外说一下,next主题默认字体大小的修改方法.
路径: ~\themes\next-reloaded\source\css\_variables\base.styl
打开 base.styl 文件,搜索关键词 // Font size,修改成你希望的大小即可.em是相对大小,对移动端有好处,不建议使用px
下面是我的配置:

1
2
3
4
5
6
7
8
9
10
// Font size
$font-size-base = 2em // 基准
$font-size-base = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit'
$font-size-smallest = 0.9125em // 最小
$font-size-smaller = 0.975em // 较小
$font-size-small = 0.9em // 底部文字大小,小
$font-size-medium = 2em // 中等
$font-size-large = 1.225em // 大
$font-size-larger = 1.35em // 较大
$font-size-largest = 1.475em // 最大

其他美化

由于篇幅有限就不一一给大家介绍如何美化了.
其实在主题配置 ~\themes\next-reloaded\_config.yml 里面就说明了大部分美化功能了
可以自行按照介绍修改.如果不懂英文可以按照我说的方法 来修改即可了.

统计和分析

文件路径: ~\themes\next-reloaded\_config.yml
主题配置文件关键词:

1
2
# Statistics and Analytics
# See: https://theme-next.org/docs/third-party-services/statistics-and-analytics

在这里修改统计分析类美化,比如百度分析,谷歌分析什么的.

显示每篇文章的访问者数量

文件路径: ~\themes\next-reloaded\_config.yml
主题配置文件关键词:

1
# Show number of visitors to each article.

支持leancloud、firestore、腾讯分析、不蒜子等

搜索服务

文件路径: ~\themes\next-reloaded\_config.yml
主题配置文件关键词:

1
2
# Search Services
# See: https://theme-next.org/docs/third-party-services/search-services

支持Algolia Search、本地搜索(Local search)、Swiftype等

聊天服务

文件路径: ~\themes\next-reloaded\_config.yml
主题配置文件关键词:

1
2
# Chat Services
# See: https://theme-next.org/docs/third-party-services/chat-services

支持Chatra Support、Tidio Support等

自定义美化文件失效解决办法

由于版本升级自定义美化文件可能失效,原因是部分css元素名称已经改变,只要重新修改名称即可.
不懂的可以参考这篇文章
另外,如果目录下没有相关文件夹可以自行创建!
例如,没有custom.styl文件
可以自行创建
自定义美化文件失效1

然后在~\themes\next-reloaded\source\cssmain.styl文件末尾加入引用即可.

1
2
3
//My Layer
//--------------------------------------------------
@import "_custom/custom.styl";

自定义美化文件失效2

其他类似失效文件也可以用同样的方法解决:创建路径》添加引用
一般添加引用的文件是在相关目录下的那个文件.

我的 custom.styl 样式

不建议直接全部复制粘贴!!!
该样式支持V7.X以上版本,V7.X以下版本看这里

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
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
// Custom styles.
/*******************首页样式*****************************/

// 网站背景(自适应)
body {
background:url(https://i.loli.net/2019/08/02/5d43c6f0b266178355.jpeg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;

/*这是设置底部文字, 看个人需要修改*/
#footer > div > div {
color:#de5e5e;
}
}

//改变背景色和透明度等
.main-inner {
background: rgba(0, 0, 0, 0.75);
padding: 3.5em; //博文边框
opacity: 1; //整体透明度,包括字体
border-radius: 1em; //边框圆角
}

// 字体颜色
.post-body {
color: #fff; //黑色
}

//博文列表内大框样式
.post {
width: 100%;
margin-top: 1em; //距离顶部
margin-bottom: 3em; //距离下一篇文章顶部距离
padding: 1em; //预览文字内缩距离
-webkit-box-shadow: 0 0 0.5em rgba(202, 203, 203, .5); // 边框渐变线样式
}


// 网站描述
.site-subtitle{ font-size: 1em; color: white; }

// 网站标题
.site-title {
font-size: 2em; //字体大小
font-weight: bold; //字体:粗体
}

// 标题背景
.brand{
background: transparent; //透明
}

// 菜单栏
.menu {
margin-top: 2em;
padding-left: 0;
text-align: center;
background: rgba(0, 0, 0, 0.5); //菜单栏背景色
margin-left: auto;
margin-right: auto;
border-radius: 1em; // 圆角化
}

// 菜单图表链接 以及 超链接样式
.menu .menu-item a {
color: rgba(0,0,0,1);
}
.menu .menu-item a:hover {
color: #ff106c;
border-bottom-color: #ff106c;
}

// 菜单字体颜色
.menu .menu-item a {
color: #fff; //白色
}

// 菜单
.menu .menu-item a {
font-size: 1.4em; //字体大小
}
.menu .menu-item a:hover {
border-bottom-color: #ff106c;
}

//菜单分类显示数字
.menu .menu-item .badge {
display: inline-block;
padding: 0.1em 0.4em;
margin-left: 5px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
background-color: #a9a6a654;
}

.posts-expand .post-title-link {
display: inline-block;
position: relative;
color: #fff; // 文章标题颜色
border-bottom: none;
line-height: 1.2;
vertical-align: top;
}


// 头部inner
.header-inner {
padding: 4em 0 2em;
}

// 站点描述
.site-description {
font-size: 1em;

}

// 作者名
.site-author-name {
font-family: 'Comic Sans MS', sans-serif;
font-size: 1.5em;

// 移动端优化-解决移动端按钮被遮挡
.site-nav-toggle {
top: 0;
transform: translateY(78%);
}

// 普通按钮样式
element.style {
background-color: #43413f;
color: #ffffff;
}
.btn:hover {
border-color: #fff; // 鼠标经过时边框颜色
color: #222;
background: #fff;
}

/*******************文章样式*****************************/

// 文章背景框框
.use-motion .post-block, .use-motion .pagination, .use-motion .comments {
opacity: 0;
}

// 文章之间的分割线
.posts-expand .post-eof {
margin: 4em auto 4em;
background: white;
}

// 文章小标题颜色块
.post-body h2, h3, h4, h5, h6 {
border-left: 0.4em solid #2780e3;
padding-left: 1em;
}

}

// ``代码块样式
code {
color: #E6006B;
background: white;
border-radius: 0.3em;
}

// 文章`` `代码块顶部样式
.highlight figcaption {
margin: 0em;
padding: 0.5em;
background: #eee;
border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
color: rgb(80, 115, 184);
}

// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection {
background: #00c4b6;
color: #f7f7f7;
}
/* firefox */
::-moz-selection {
background: #00c4b6;
color: #f7f7f7;
}


// 文章标题动态效果 next/source/css/_common/components/post/post-title.styl中.posts-expand .post-title-link确保`position: relative;`属性存在, 如果需要标题呈现链接效果颜色, 将`color`元素去除即可
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

// 文章内标题侧色块样式(左边的竖线)
.posts-expand .post-body h2, h3, h4, h5, h6 {
border-left: 0.4em solid #ad6b67; //颜色
padding-left: 1em;
}

body {
color: #fff; // 文章文本颜色
font-size: 1em;
}

.posts-expand .post-meta {
margin: 0.3em 0 0.6em 0;
color: #fff; // 文章标签文本颜色
font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 1.2em;
text-align: center;
}

// 文章分类样式
a, span.exturl {
overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
background-color: transparent;
color: #ffff; // 文字颜色
text-decoration: none;
outline: none;
border-bottom: 1px solid #949494; // 下划线颜色
cursor: pointer;
}

a:hover, span.exturl:hover {
color: #e64242e3; // 鼠标经过时文字颜色
border-bottom-color: #222; // 鼠标经过时下划线颜色
}

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

.post-copyright {
margin: 2em 0 0;
padding: 0.5em 1em;
border-left: 0.3em solid #ff1700;
background-color: #f9f9f900; // 版权信息背景色透明
list-style: none;
}

// 上一篇下一篇链接样式
.post-nav-item a {
position: relative;
display: block;
line-height: 2em;
font-size: 1em;
color: #fff;
border-bottom: none;
}

.post-nav-item a:hover {
color: #ff1700; //鼠标放在链接上时的颜色
border-bottom: none;
}

/*******************其他样式*****************************/

// 按钮样式
.btn {
margin-top: 2em;
}

// 右下角返回顶部按钮样式
.back-to-top {
line-height: 1.5;
right: 10px;
padding-right: 0.5em;
padding-left: 0.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
background-color: rgba(34, 34, 34, 0.75);
border-radius: 0.5em;
box-shadow: 0px 0px 0.1em 0px rgba(0, 0, 0, 0.35);
}

// 自定义页脚跳动的心样式
@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); //颜色
}

// 搜索功能样式
.local-search-popup {
display: none;
position: fixed;
top: 10%;
left: ;
margin-left: ;
height: 80%;
padding: 0;
background: #000000ab; // 搜索框背景色
color: #000000; // 搜索框文字颜色
z-index: 9999;
border-radius: 0.5em;
}

// 鼠标样式
* {
cursor: url("/img/鼠标_正常.ico"),auto!important
}
:active {
cursor: url("/img/鼠标_按下.ico"),auto!important
}
:link {
cursor: url("/img/鼠标_手.ico"),auto!important
}


// 自适应(放在前面会导致前面的自定义样式失效)
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>

/*******************写作用样式*****************************/
// 下载样式
a#download {
display: inline-block;
padding: 0 1em;
color: #fff;
background: transparent;
border: 0.2em solid #fff;
border-radius: 0.2em;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #fff;
color: #fff;
}
}
/ /颜色块-黄
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;
}
// 颜色块-红
span#inline-red {
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: #df3e3e;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 1em;
margin: 1em 0;
border: 0.1em solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 1em;
margin: 1em 0;
border: 0.1em solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #9954bb;
}
// 镶嵌效果
.post-body .note.primary {
background-color: rgba(119,119,119,0.3); //背景色
border-left-color: #6f42c1;
}

后语

更多消息请关注我们: 奥怪的小栈

待补充……

评论