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

博客情人节修改笔记

修改的姿势都在这里

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

首先看给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
28
	.site-avatar {
        position: relative;
        margin-left:auto; //站点头像居中
		margin-right: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文件,其中包含主题配置的所有颜色信息。

Licensed under CC BY-NC-SA 4.0
最后更新于 02-14, 2022 11:56
共书写了23.4k字·共 21篇文章
Built with Hugo
Theme Stack designed by Jimmy