更改标题黑色背景
- 打开
Hexo/themes/next/source/css/_schemes/Pisces/_header.styl，找到background改为background: $blue-bright;。
- 打开
Hexo\themes\next\source\css\_variables\Pisces.styl，找到subtitle-color改为$subtitle-color = $whitesmoke;
- 在
Hexo/themes/next/source/css/_variables/base.styl里可以查看颜色设置。
添加图片背景
- 在hexo目录下的
source文件夹下新建_data文件夹，不是主题next目录下的source文件夹。文件夹里新建文件styles.styl，添加如下内容：
1
2
3
4
5
6
7
|
body {
background-image: url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
|
background-image:url 可以直接使用图片链接，也可以是图片路径（将自定义图片放入next\source\images）
background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定
background-size：图片展示大小，设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示
- 打开主题配置文件，找到
custom_file_path:，修改如下：
1
2
| custom_file_path:
style: source/_data/styles.styl
|
页面透明化
为了更好欣赏背景图片，可将博客页面透明化，在source/_data/styles.styl里添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.post-block {
opacity: 0.9;
}
.sidebar {
background-color: transparent;
opacity: 0.9;
}
.header-inner {
background: rgba(255,255,255,0.9);
}
.popup {
opacity: 0.9;
}
|
边框圆角
- 在hexo目录下的
source文件夹下新建_data文件夹，文件夹中新建文件variables.styl，添加如下内容：
1
2
3
|
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;
|
- 打开主题配置文件，找到
custom_file_path:，修改如下：
1
2
| custom_file_path:
variable: source/_data/variables.styl
|
图标颜色
- 在hexo目录下的
source文件夹下新建_data文件夹，不是主题next目录下的source文件夹。文件夹里新建文件styles.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
|
.fa{
font-size: 14px;
}
.fa-home{
color: #e74c3c;
font-size: 15px;
}
.fa-archive{
color: #1abc9c;
}
.fa-tags{
color: orange;
}
.fa-chalkboard{
color: #3498db;
}
.fa-link{
color: #FC427B;
}
.fa-user{
color: #9b59b6;
}
.fa-camera{
color: #1abc9c;
}
.fa-envelope{
color: #FC427B;
}
.fa-zhihu{
color: blue;
}
.fa-calendar-check{
color: red;
}
.fa-eye{
color: #70a1ff;
}
.fa-comment{
color: #2ed573;
}
.fa-comments{
color: #2ed573;
}
.fa-file-word{
color: #273c75;
}
.fa-clock{
color: #ff5252;
}
.fa-image{
color: #FC427B;
}
.fa-sun{
color: orange;
}
.fa-bookmark{
color: #00FFFF;
}
.fa-book{
color: #1abc9c;
}
.fa-images{
color: #FF00FF;
}
.fa-windows{
color: #e74c3c;
}
.fa-chrome{
color: orange;
}
.fa-desktop{
color: #3498db;
}
.fa-tools{
color: #00FFFF;
}
.fa-python{
color: #3498db;
}
|
添加相册
在侧栏添加相册，打开相册，看到的图片是子相册的封面，点击封面会进入子相册。
- 在
Hexo/source/_data/styles.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
| .gallery-page {
margin-top: 0px;
}
.img-list,
.gallery-list {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
}
.img-column,
.gallery-column {
display: flex;
flex-direction: row;
}
.img-item,
.gallery-item {
margin-bottom: 20px
}
.img-column a,
.gallery-column a {
border-bottom: 0px;
}
.posts-expand .post-body .gallery-column a img {
height: 250px;
width: 500px;
object-fit: contain;
}
.posts-expand .post-body .img-column a img {
height: 250px;
width: 530px;
object-fit: contain;
}
.img-item p,
.gallery-item p {
margin: -15px auto -10px;
max-width: 50%;
text-align: center;
font-size: 15px;
color: $black-deep;
background: rgba(255,255,255,.3);
border-radius: 10px;
border: 1px solid $black-deep;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
@media (max-width: 767px){
.gallery-item p {
min-width: 75px;
font-size: 13px;
}
}
|
- 在
Hexo/source/里新建文件夹gallery，文件夹里新建index.md，写入子相册名称和封面等信息。
1
2
3
4
| <div class="gallery-item">
<a href="子相册名1"><img src="子相册名1/cover-1.jpg"></a>
<p>子相册名1</p>
</div>
|
以上表示一个相册；"子相册名1/cover-1.jpg"是相册的封面，可以用缩略图，为了加快图片显示。
1
2
3
4
5
6
7
8
9
10
| <div class="gallery-column">
<div class="gallery-item">
<a href="子相册名1"><img src="子相册名1/cover-1.jpg"></a>
<p>子相册名1</p>
</div>
<div class="gallery-item">
<a href="子相册名2"><img src="子相册名2/cover-2.jpg"></a>
<p>子相册名2</p>
</div>
</div>
|
以上表示一行有2个相册，还可以再添加一个，不要再多了。
如果要再添加一行相册，复制上面的代码。完整内容如下，去掉注释。
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
| ---
title:
type: "gallery"
comments: false
---
<div class="gallery-page">
<div class="gallery-list">
<div class="gallery-column">
<div class="gallery-item">
<a href="子相册名1"><img src="子相册名1/cover-1.jpg"></a>
<p>子相册名1</p>
</div>
<div class="gallery-item">
<a href="子相册名2"><img src="子相册名2/cover-2.jpg"></a>
<p>子相册名2</p>
</div>
</div>
<div class="gallery-column">
<div class="gallery-item">
<a href="子相册名3"><img src="子相册名2/cover-3.jpg"></a>
<p>子相册名3</p>
这里继续添加相册。
</div>
</div>
</div>
</div>
|
- 为每一个子相册新建文件夹，在文件夹里新建
index.md，写入子相册名称和封面等信息。以某个子相册为例：
- 在
gallery下新建文件夹photo-01，用于存放图片。在photo-01下新建文件夹small，用于存放缩略图，点击缩略图会显示大图。在主题设置里打开fancybox: true，用于浏览多张图片。在photo-01下新建index.md，写入子相册名称和封面等信息；删除注释内容。
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
| ---
title: 子相册名1
comments: true
---
<div class="gallery-page">
<div class="img-list">
<div class="img-column">
<div class="img-item"> 图片下添加注释，需要"<div class="img-item">"
<a href="图片01" data-fancybox="1"><img src="small/图片01的缩略图" ></a>
<p>图片01的注释</p>
</div>
<div class="img-item">
<a href="图片02" data-fancybox="1"><img src="small/图片02的缩略图"></a>
</div>
</div>
<div class="img-column"> 图片下无注释，可以删除"<div class="img-item">"
<a href="图片03" data-fancybox="1"><img src="small/图片03的缩略图"></a>
<a href="图片04" data-fancybox="1"><img src="small/图片04的缩略图"></a>
</div>
<div class="img-column">
<a href="https://XXXXXXXX.png" data-fancybox="1"><img src="https://XXXXXXXXX.png 的缩略图"></a>
</div>
<div class="img-column">
<a href="" data-fancybox="1"><img src=""></a>
<a href="" data-fancybox="1"><img src=""></a>
</div>
</div>
</div>
|
每行放两三张图片，在<div class="img-column"> </div>中间添加图片<a href="图片03" data-fancybox="1"><img src="small/图片03的缩略图"></a>，可以是本地图片，也可以是网络图片链接。
如果图片不大，可以不用缩略图，直接用原图。