Hugo-Stack主题美化

优化浅色模式背景

其实，配置完了这个stack主题后，感觉浅色背景就是比较瞎眼 ~~已经眼瞎了~~
首先我想直接插入图片进行更改，然后发现大部分背景这样并不显得好看，文字可读性也会降低
然后就直接改背景颜色就ok了,首先要追随源码的样式

样式的源码

在Stack主题文件夹下/assets/scss/找到了variables.scss文件
从中找到了需要改的代码

整个页面主体色彩

卡片组件色彩

样式含义与用途

整个页面主体色彩控制

变量名	含义	示例用途
`--body-background`	页面主体背景色	`<body>` 背景色
`--accent-color`	主强调色（按钮、链接等）	按钮背景色、重要元素
`--accent-color-darker`	主强调色的深色版本	鼠标悬停、边框
`--accent-color-text`	强调色上的文字颜色	强调按钮上的文字
`--body-text-color`	页面正文文字颜色	普通段落文本

卡片组件色彩控制

变量名	含义	示例用途
`--card-background`	卡片默认背景色	卡片整体背景
`--card-background-selected`	卡片被选中或悬停时背景色	hover 或 active 状态
`--card-text-color-main`	卡片主文字颜色	标题、正文
`--card-text-color-secondary`	次要文字颜色	副标题、描述
`--card-text-color-tertiary`	第三级文字颜色	注释、小标签

改动

知道是怎么一回事，就可以着手改动了，首先需要回到项目的目录下，找到/assets/scss/custom.scss文件，没有就创建，这是供用户自定义的，并不推荐直接改主题源码

为什么不改源码也能直接背景颜色？
这个文件处于样式文件的末尾，最后才引入这个文件
从而覆盖原先的属性，达到“自定义”的效果。

把要修改的代码复制下来放进custom.scss文件里修改
下面这个是目前我的网站在用的 ~~可能用着用着就又改了~~
蓝莓奶油风

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
:root {
  --body-background: #F2F5FB;          /* 柔和奶蓝背景 */
  --body-text-color: #2A3650;          /* 深蓝文字 */

  --accent-color: #789EDC;             /* 蓝莓色按钮/链接 */
  --accent-color-darker: #4D6FB0;      /* hover 深蓝 */
  --accent-color-text: #FFFFFF;         /* 白色文字 */

  --card-background: #FFFFFF;           /* 卡片背景 */
  --card-background-selected: #DCE4F7;  /* hover 浅蓝 */
  --card-text-color-main: #2A3650;      /* 主文字 */
  --card-text-color-secondary: #5A6F8C; /* 次文字 */
  --card-text-color-tertiary: #889AB0;  /* 第三级文字 */
}

也可以把它丢给AI，让它给个配色方案，慢慢调自己喜欢的

修改网站布局

首先我们需要知道网站的布局是怎样的
F12打开控制台很容易就知道container是页面内容的父级容器

网站布局

1.左侧栏：容器类 .left-sidebar
2.右侧栏：容器类 .right-sidebar
3.中间内容区：容器类 .content，宽度由左右两侧栏的宽度控制

💡关键点

我们只要调节两侧侧栏的大小，就可以直接控制中间内容区域的宽度，无需单独修改中间区域
左右侧栏容器分别是 left-sidebar 和 right-sidebar
需要为不同场景设置不同显示效果，通常通过响应式规则 @include respond(md/lg/xl) 来实现：

修改

那么我们就可以着手修改了，不用想着去找源码了，直接在主目录assets/scss/custom.scss这个文件直接添加，覆盖掉之前的布局，没有这个文件就创建
目前我的网站在用下面这个,喜欢的话就直接复制

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* 基础容器：水平居中 */
.container {
    margin-left: auto;
    margin-right: auto;
/* 布局模式 */
    &.extended {
        /* range: 768-1024 */
        @include respond(md) {
            max-width: 1024px; /* 容器最大宽度 */
            --left-sidebar-max-width: 25%;/* 左侧栏最大宽度 */
            --right-sidebar-max-width: 30%;/* 右侧栏最大宽度 */
        }

        /* range: 1024-1280 */
        @include respond(lg) {
            max-width: 1280px;
            --left-sidebar-max-width: 25%;
            --right-sidebar-max-width: 22%;
        }
    }
}

也可以慢慢调自己喜欢的