Hugo Stack 魔改美化

Tue, 11 Aug 2026 15:41:00 +0800

全局

零碎玩意

在 /assets/scss/custom.scss 中加入以下代码：

菜单栏圆角

在 /assets/scss/custom.scss 中加入以下代码：

滚动条

在 /assets/scss/custom.scss 中加入以下代码：

加载进度条

在 /layouts/partials/footer/custom.html 中加入以下代码：

深色模式开关图标

不太喜欢默认图标，默认图标不够直观，当然你可以不换我选取了 Tabler Icons 中的 sun-high 和 moon-stars 这两个图标在 /assets/scss/partials/sidebar.scss 第 154~180 行中将图标名进行修改，最终效果：

在 /layouts/partials/sidebar/left.html 第 91~97 行中将图标名进行修改，最终效果：

修改布局

在 /assets/scss/grid.scss 中修改 left-sidebar 和 right-sidebar 的描述：

把正文的占比改到了 70%, 原来的只有 50% 左右

页面

友链三栏

在 /assets/scss/custom.scss 中加入以下代码：

首页

布局

在 /assets/scss/custom.scss 中加入以下代码：

右侧导航栏动画

在 /assets/scss/custom.scss 中加入以下代码：

细节

首页欢迎横幅

在 /layouts/index.html 的 <section class="article-list"> 前添加以下代码：

在 /assets/scss/custom.scss 中加入以下代码：

代码块

macOS 风格红绿灯图标

在 /assets/scss/custom.scss 中加入以下代码：

在 static 文件夹下新建 code-header.svg，写入以下代码：

显示语言和复制按钮

在 /assets/ts/custom.ts 中加入以下代码：

在 /assets/scss/custom.scss 中加入以下代码（可按需自行修改）：

固定块的高度

过长的内容影响观感，所以把 block 的高度限制在 20em，并隐藏滚动条在 /assets/scss/partials/layout/article.scss 中进行如下修改（已隐藏无关片段）：

使图床链接的图片居中

来自 Hugo Stack 主题装修笔记 Part 3 | 第三夏尔目前 Stack 默认只支持本地引用的图片居中，而在使用 url 图片链接时没有居中格式。在 /assets/scss/partials/layout/article.scss Line 256 处（同级任意位置）增加以下代码：

键盘样式

在 /assets/scss/custom.scss 中加入以下代码：

这样即可使用如下 Markdown 高级语法生成键盘样式： <kbd>CTRL</kbd> + <kbd>C</kbd> CTRL + C

头像旋转

在 /assets/scss/custom.scss 中加入以下代码：

鸣谢

Stack 主题文档 Stack 主题的自定义 | L1nSn0w’s Log 博客最近的一些变化 | 小骆同学基于 Hugo 的网站搭建日志 02 | 小骆同学『Hugo』Hugo Styles | Echosec Hugo Stack 主题装修笔记 Part 3 | 第三夏尔

CopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyCopyHugo Stack 魔改

Blog on 似水年华

Hugo Stack 魔改美化

全局

零碎玩意

菜单栏圆角

滚动条

加载进度条

深色模式开关图标

修改布局

页面

归档

双栏

卡片缩放动画

友链三栏

首页

布局

右侧导航栏动画

细节

首页欢迎横幅

代码块

macOS 风格红绿灯图标

显示语言和复制按钮

固定块的高度

使图床链接的图片居中

键盘样式

头像旋转

鸣谢