Featured image of post 博客情人节修改笔记

博客情人节修改笔记

修改的姿势都在这里,这里主要修改了博客中一些CSS文件,让左侧边栏的样子变得很好看。

今天是情人节😀,大家开心~

首先看给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;
        } 

感谢鱼儿!- 博客装修:删删改改大胆行事,想什么来什么诶!!果然搜索到教程。

左栏位置拉大

将文件\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%; // 这里控制导航宽度

头像站点居中显示

 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;
    }
}

这里感谢看中 Stack 主题的归档功能,搬家并做修改,这里就是复制的博主😭,完成后变好看好多!

颜色

在探索许久Github+VSCode集成后发现,Ctrl+Shift+F可以做到搜索目录下所有文件内容,于是在发现频繁出现的body-text-color后果断搜索,发现文件\assets\scss\variable.scss文件,其中包含主题配置的所有颜色信息。

生活笔记,禁止转载,每个人都有不一样的体验。
最后更新于 02月14日 11点56分, 2022年
irithys
Built with Hugo
主题 StackJimmy 设计