Hugo Stack 魔改美化

全局

零碎玩意

在 /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 魔改