注：本文仅限于keep主题
0.说明
红框圈起来的部分是本文要改编的地方。
配置文件中可以直接配置的不谈。
首页原始效果：
修改后：
首页下文章列表原始效果：
由于5和6都是白色背景，看起来只有文章列表
修改后：
1.一号框半透明
目标：设置半透明，因为后面想改背景，半透明好看一点。
打开文件Hexo\themes\keep\source\css\layout\_partial\header.styl
在其中找到下面代码：
1
2
3
4
5
6
7
8
9
10
| .header-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
padding-top: $scroll-progress-bar-height;
......
|
修改background的值即可。
比如background: rgba(255,255,255,0.9)，白色，不透明度0.9。
2.二号框背景
配置文件中可以直接改的缺点：
- 改了之后原来的飘浮色块会消失
- 新背景的范围不包括一号框位置
直接修改源文件css样式：
打开文件Hexo\themes\keep\source\css\layout\page.styl
找到以下代码：
1
2
3
4
5
6
7
8
| .page-container {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
background: var(--background-color);
......
|
修改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .page-container {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
background: url("https://cdn.jsdelivr.net/gh/kaix2301/pictures/img202201081000420.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover ;
......
|
修改和增加的代码上面做了说明，可自行修改和取舍。
3.三号框样式
背景更换很可能导致原来的文字看不清楚，可修改文字样式。
打开文件Hexo\themes\keep\source\css\layout\_partial\first-screen.styl
找到以下代码：
1
2
3
4
5
6
7
8
9
10
11
| .description {
font-weight: bold;
font-size: $first-screen-font-size;
line-height: 1.8;
text-align: center;
color: var(--default-text-color);
+keep-tablet() {
font-size: $first-screen-font-size * 0.9;
}
}
|
修改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .description {
background: rgba(50,50,50,0.4);
padding: 5px 20px;
border-radius: 5px;
font-weight: bold;
font-size: $first-screen-font-size;
line-height: 1.8;
text-align: center;
color: rgb(230,230,230);
+keep-tablet() {
font-size: $first-screen-font-size * 0.9;
}
}
|
修改和增加的代码上面做了说明，可自行修改和取舍。
4.四号框样式
目前还没改，不过改的话可以在下面位置改。
打开文件Hexo\themes\keep\source\css\layout\_partial\first-screen.styl
找到以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .s-icon-list {
position: absolute;
bottom: 0;
font-size: $first-screen-icon-size;
text-align: center;
+keep-tablet() {
font-size: $first-screen-icon-size * 0.9;
}
.s-icon-item {
margin-right: 20px;
cursor: pointer;
line-height: 2;
&:last-child {
margin-right: 0;
}
}
}
|
5.五号框背景
在有文字内容的页面设一个简洁背景，好看但不影响阅读。
打开文件Hexo\themes\keep\source\css\layout\page.styl
找到以下代码：
1
2
3
4
5
6
| .page-main-content {
padding-top: $header-height;
position: relative;
.header-shrink & {
......
|
增加四条代码，修改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .page-main-content {
padding-top: $header-height;
position: relative;
background: url("https://cdn.jsdelivr.net/gh/kaix2301/pictures/img202201072225073.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover ;
.header-shrink & {
......
|
修改和增加的代码上面做了说明，可自行修改和取舍。
设置完此背景，除首页第一个背景外，其他页面都为此背景。
6.六号框全透明
此位置默认为白色背景，改为全透明。
打开文件Hexo\themes\keep\source\css\layout\home-content.styl
在开始位置找到以下代码：
1
2
3
| .home-content-container {
background: var(--background-color);
......
|
修改为：
1
2
3
| .home-content-container {
background: rgba(255,255,255,0);
......
|
7.七号框半透明
此位置默认为白色背景，改为半透明。
打开文件Hexo\themes\keep\source\css\layout\home-content.styl
在开始位置找到以下代码：
1
2
3
4
5
6
7
8
| .home-article-item {
position: relative;
keep-container(true, 1.015, 1.015, 28px, 38px);
.top-icon {
position: absolute;
top: 10px;
......
|
加一条，修改为：
1
2
3
4
5
6
7
8
9
10
| .home-article-item {
position: relative;
keep-container(true, 1.015, 1.015, 28px, 38px);
background: rgba(255,255,255,0.8);
.top-icon {
position: absolute;
top: 10px;
......
|
