文章首发于：My Blog 欢迎大佬们前来逛逛
添加背景图片
在blog的根目录下的source文件夹下新建_data文件夹，并且新建style.styl文件
路径如下所示：
F:\hexo\blog\source\_data\styles.styl
之后在Next主题配置文件中中找到：custom_file_path 取消style的注释，意味着启用这个文件。
打开复制粘贴如下内容：
1
2
3
4
5
6
7
| body {
background:url(/images/background.png);
background-repeat: no-repeat;
background-attachment: fixed; //是否滚动，fixed固定
background-size: cover; //填充
background-position: center;
}
|
设置背景透明
还是在这个styles.style文件里面，接着上面的内容下面直接复制粘贴：
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
| //文章背板的颜色rgb
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{
background: #f5f5f56b; //此处使用十六进制颜色代码， 也可以使用rgba进行调色，
//实际效果为白色透明色底板 rgba的第四参数即为透明度
}
body{ //修改主体字体颜色
color: #000; //纯黑
}
.posts-expand .post-title-link { //标题颜色
color: #000; //首页文章标题颜色， （默认为灰辨识度不高）
}
.posts-expand .post-meta-container { //标题下的日期颜色
color: #880000; //此处修改为红色，可自行调用rgb调色
}
//侧边框的透明度设置
.sidebar {
opacity: 0.7;
}
//菜单栏的调色
.header-inner {
background: rgba(255,255,255,0.7);
}
//搜索框透明
.popup {
opacity: 0.5;
}
.main-inner {
background-color: rgba(255, 255, 255, 0); //主体背景透明
padding: 0px 40px 40px 40px; //调整组件位置
}
|
其中所有的内容都有注释，可以自己调节
注意：0为完全透明，1为完全不透明
边框圆角设置
在 style.style同级文件夹下新建：variables.styl，并且在主题配置文件中同样取消custom_file_path的variable的注释，代表启用variable
然后打开这个文件，输入以下内容：
1
2
3
| // 圆角设置
$border-radius-inner = 30px 30px 30px 30px;
$border-radius = 30px;
|
其中 数值表示圆角的弧度，可以自己设置
设置页面宽度
打开主题文件下：source/css/_varibles/Pisces.styl文件.
然后修改以下内容：
![]()
即注释掉第二三行，然后添加下面的两条语句：
1
2
| $content-desktop-large = 70em
$content-desktop-largest = 85%
|
其中的参数同样可以自己修改。
侧边栏颜色更改
打开配置文件：\themes\next\source\css\_schemes\Pisces\_header.styl
修改background属性即可 ，可以直接输入 16色代码，附上RGB颜色参照表：RGB调色表
1
2
3
4
5
6
7
| .site-brand-container {
background: #FFFAFA
+tablet-mobile() {
box-shadow: 0 0 16px rgba(0, 0, 0, .5);
}
}
|
就可以看到菜单栏的黑色变成了你想要的颜色。
接着修改Title和Subtitle的颜色
打开这个文件夹：\themes\next\source\css\_common\outline\header\site-meta.styl
然后找到
1
2
3
4
5
6
7
8
9
10
11
12
13
| .site-title {
color: #000000 //自己加的，修改主标题字体颜色
font-family: $font-family-logo;
font-size: $font-size-title;
font-weight: normal;
margin: 0;
}
.site-subtitle {
color: #000000 // $subtitle-color;
font-size: $font-size-subtitle;
margin: 10px 0;
}
|
修改的效果如下：
![]()
按钮颜色更改
打开以下文件：\themes\next\source\css\_common\scaffolding\buttons.styl
1
2
3
4
| .btn {
background: #FFE1FF // var(--btn-default-bg);
...
}
|
修改成你想要的颜色即可。
鼠标选中文字的颜色
文件夹：\themes\next\source\css\_common\scaffolding\base.styl
修改背景与选中时的文字颜色即可。
1
2
3
4
| ::selection {
background: #FFB5C5 // $selection-bg;
color: #000000 // $selection-color;
}
|
添加live 2D宠物
下载插件：
1
| npm uninstall -save hexo-helper-live2d
|
然后下载一个你喜欢的样式宠物，这里我选择live2d-widget-model-wanko，然后下载模型：
1
| npm install --save live2d-widget-model-wanko
|
可以下载你喜欢的：在这里可以看到预览图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
|
然后在Hexo的根目录配置文件中添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
| live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-wanko
display:
position: right
width: 180
height: 300
mobile:
show: true
|
我们的宠物就出来了：
![AH0JB8SFJY06WZCH_N0PPCQ.png]()
