今天是情人节😀，大家开心～
首先看给 Hugo 加一点好玩的功能，修改什么文件就要把文件复制出来，既可以方便查找，还可以做个原始文件的备份。万一什么时候修改错掉还可以翻看原始文件修改回来。
左侧导航栏
菜单
主题默认的显示有点怪，应该是左侧太窄的原因，而且增加菜单栏目又会出现进度条好难看诶！
目标：头像居中显示并且将左栏位置拉大一点
将文件 \assets\scss\partials\menu.scss 复制一份修改
1
2
3
4
5
6
7
| li {
@include respond(md) {
width: 77%;
text-align:left;
padding: 0px 0;
}
|
Copy
感谢鱼儿！- 博客装修：删删改改大胆行事，想什么来什么诶！！果然搜索到教程。
左栏位置拉大
将文件 \assets\scss\partials\sidebar.scss 复制一份修改
1
2
3
4
5
6
7
8
9
10
| .left-sidebar {
display: flex;
flex-direction: column;
flex-shrink: 0;
align-self: stretch;
width: 100%;
padding: 30px 0 15px 0;
max-width: none;
min-width: 15%; // 这里控制导航宽度
|
Copy
头像站点居中显示
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
| .site-avatar {
position: relative;
margin-right:auto; //站点头像居中
margin-left:auto; //站点头像居中
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
.site-name {
color: var(--accent-color);
text-align:center; //站点名称居中
font-size: 1.8rem;
@include respond(2xl) {
font-size: 2rem;
}
}
.site-description {
color: var(--body-text-color);
font-weight: normal;
text-align:center; //站点描述居中
font-size: 1.6rem;
@include respond(2xl) {
font-size: 1.7rem;
}
}
|
Copy
这里感谢看中 Stack 主题的归档功能，搬家并做修改，这里就是复制的博主😭，完成后变好看好多！
颜色
在探索许久 Github+VSCode 集成后发现，Ctrl+Shift+F 可以做到搜索目录下所有文件内容，于是在发现频繁出现的 body-text-color 后果断搜索，发现文件 \assets\scss\variable.scss 文件，其中包含主题配置的所有颜色信息。
