Hugo-Stack主题美化

本文将介绍如何对 Hugo-Stack 主题进行美化，主要包括两个方面的优化：修改浅色模式背景和调整网站布局。通过这些优化，可以让你的博客更加个性化，提升用户体验。

优化浅色模式背景

配置完 Stack 主题后，你可能会觉得浅色背景比较刺眼。本节将介绍如何通过修改 CSS 变量来优化浅色模式的背景色，提高阅读体验。

样式的源码

在 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 工具来生成配色方案，然后根据自己的喜好进行调整。

修改网站布局

了解网站的布局结构对于自定义设计至关重要。本节将介绍如何通过修改 CSS 来调整网站的布局，特别是内容区域的宽度。

布局分析

通过浏览器的开发者工具（F12）可以查看网站的布局结构。container 是页面内容的父级容器，网站布局主要由以下几个部分组成：

网站布局

左侧栏：容器类 .left-sidebar
右侧栏：容器类 .right-sidebar
中间内容区：容器类 .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: 20%;
            --right-sidebar-max-width: 30%;
        }

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

你可以根据自己的喜好调整这些数值，找到最适合你博客的布局比例。

总结

通过修改浅色模式背景和调整网站布局，我们可以显著提升 Hugo-Stack 主题的视觉效果和用户体验。这些修改都是通过自定义 CSS 实现的，不会影响主题的核心功能，也便于后续升级主题时保留自定义样式。

希望这些优化建议能帮助你打造一个更加个性化、舒适的博客环境！如果你有任何问题或建议，欢迎在评论区留言交流。