一些外观主题自定义修改

Hugo Blog 主题自定义改动总结

1.1 自定义样式仅部分页面生效

现象：assets/scss/custom.scss 的样式仅在主页、归档、搜索页生效，关于和友情链接页面完全无效（包括全局尺寸、颜色）。

根因：Hugo 增量构建导致 不同页面引用了不同版本的 CSS 文件。

主页 CSS（efc8a4...）：43,608 字节，包含自定义样式
关于/友链 CSS（700824...）：39,279 字节，不含自定义样式
public/scss/ 下堆积了 27 个历史 CSS 文件

解决：清除 public/ 和 resources/_gen/ 后重新构建。

1.2 右侧栏与中间区域交换

现象：页面布局变成左侧栏 | 右侧栏 | 主内容，右侧栏跑到了中间。

根因：custom.scss 中设置了 .right-sidebar { order: -1; }，而 main 未设置 order（默认 0），导致排序为 -3 → -1 → 0。

解决：注释掉 .left-sidebar 和 .right-sidebar 的 order 属性，依赖 DOM 原始顺序。

二、功能实现

2.1 背景图片 + 亮暗模式蒙版（`custom.scss:52-71`）

用 linear-gradient 叠加半透明蒙版来控制背景图亮度，亮暗模式使用不同图片：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
:root {
  --bg-overlay: rgba(255, 255, 255, 0.8);   // 亮色蒙版
  --bg-image: url('/img/sg6.png');           // 亮色背景图
  &[data-scheme="dark"] {
    --bg-overlay: rgba(0, 0, 0, 0.6);       // 暗色蒙版
    --bg-image: url('/img/jiguang5.png');    // 暗色背景图
  }
}

body {
  background-image:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),  // 蒙版层
    var(--bg-image);                                        // 图片层
  background-size: cover;
  background-attachment: fixed;
}

演变过程：纯色 → 渐变+模糊光斑 → 单图片+蒙版 → 亮暗双图片+蒙版

2.2 毛玻璃卡片效果（`custom.scss:73-134`）

为中间区域和右侧栏卡片添加 backdrop-filter 半透明模糊效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@mixin glass-light {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

@mixin glass-dark {
  background: rgba(18, 18, 18, 0.5) !important;
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

覆盖元素：

区域	元素
中间	`.article-list article`、`.main-article`、`.section-card`、`.pagination`、`.search-form input`、`.article-list--compact`、`.article-list--tile article`
右侧栏	`.widget--toc`、`.widget.archives .widget-archive--list`、`.tagCloud .tagCloud-tags a`、`.search-form.widget input`

2.3 归档/链接 grid 模式适配（`custom.scss:287-343`）

归档双栏和链接三栏在 grid 布局下需特殊处理：

容器：清除毛玻璃（background: none、backdrop-filter: none）
单个 article：应用毛玻璃
暗色模式：grid 内 article 自动切换 glass-dark

三、文件变更清单

文件	操作
`assets/scss/custom.scss`	多次修改（唯一改动文件）
`static/img/sg6.png`	用户添加的亮色模式背景图
`static/img/jiguang5.png`	用户添加的暗色模式背景图

效果

image.png|720x360