配置 Hugo-FixIt 主题：调整美化

XOlDKING 发布于 2023/09/21

总计 3842 字｜更新于 2023/10/29｜- 次阅读｜- 条评论

本文记录了本站对 Hugo-FixIt 主题进行的调整，以及每项调整涉及的文件位置。

信息

Hugo 是最受欢迎的开源静态网站生成器之一，号称是世界上最快的网站构建框架。
本博客目前使用 FixIt 主题，其示例网站中提供了详尽的中文文档。

可对比本站与 FixIt 主题示例网站查看调整效果。

总体风格（Style）

图标：
- 图标风格：Font Awesome 统一选用 fa-solid 样式。
- 图标排版：网站模版中常用、固定、说明性的文字及跳转链接前加相应图标。

配色：

SCSS $\to$ assets/css/_variables.scss

配色元素	深色主题	浅色主题
主要背景	■ `#020100`	■ `#fdfeff`
次要背景	■ `#252627`	■ `#e5e4e3`
主要文字	■ `#dddedf`	■ `#222120`
次要文字	■ `#9d9e9f`	■ `#626160`
主要强调	■ `#d14d91`	■ `#d14d91`
次要强调	■ `#5d9bd5`	■ `#4d91d1`

HTML $\to$ layouts/partials/header.html
SCSS $\to$ assets/css/_core/_header.scss

分隔
- 调整排版：在类别（Section）与分类（Taxonomy）间添加分割线，用以区分。
图标：
- 添加动画：为图标添加缩放过渡动画。
  【参考】Why is text getting blurry and wobbles during 2d scale transform
- 添加图标：添加网站流量统计分析图标，可跳转至流量统计页面。
- 添加图标：添加 GitHub 图标，可跳转至 GitHub 页面。

桌面端（Desktop）

分隔线（Delimiter）
- 调整线型：由虚线改为实线。
- 调整长度：匹配菜单项文字高度。

移动端（Mobile）

菜单项
- 调整对齐：由左对齐改为居中对齐。
- 子菜单自动展开。

HTML $\to$ layouts/partials/footer.html
SCSS $\to$ assets/css/_core/_footer.scss

分隔线
- 调整翻译：将竖线字符 ｜ 加入多语种翻译文档，区分英文竖线 | 和中文竖线 ｜。
  - 英文文档位置：i18n/en.toml
  - 中文文档位置：i18n/zh-CN.toml
- 调整字符：将英文竖线 | 改为相应语种的竖线字符，使其高度匹配相应语种的字体高度。
图标
- 添加图标：添加 Hugo 图标，匹配 FixIt 主题图标。
- 添加图标：为知识共享许可证添加图标。
- 调整图标：将 Font Awesome 图标样式统一为 fa-solid。
翻译
- 调整翻译：将“由 Hugo 强力驱动” 改为”基于 - Hugo“，匹配”主题 - FixIt“。
背景
- 添加颜色：匹配网站页眉颜色。

滚动条（Scrollbar）

SCSS $\to$ assets/css/_core/_base.scss

颜色：适应主题色深浅
- 背景颜色：滚动条背景颜色与网页页眉颜色一致。
- 滑块颜色：滚动条滑块颜色与次要文本颜色一致。
- 悬浮颜色：当鼠标悬浮在滑块上方时，滚动条滑块颜色与主要文本颜色一致。
  【参考】Custom Scrollbars In CSS
代码块中的滚动条颜色适应随主题色深浅。
SCSS $\to$ assets/css/_partials/_single/_code.scss

主页（Home）

HTML $\to$ layouts/index.html

类别
- 筛选类别：根据文章类别筛选在主页摘要部分显示的文章，由网站配置文件 hugo.toml 中的 params.mainSections 限定。

简介（Profile）

HTML $\to$ layouts/partials/home/profile.html
SCSS $\to$ assets/css/_page/_home.scss

图片
- 调整尺寸：简介页顶部由头像改为给定图片，适当放大图片尺寸。
- 适应主题：为浅色主题和深色主题添加不同图片。
图标
- 添加图标：添加网站流量统计分析图标，可跳转至流量统计页面。
- 添加图标：添加游戏图标，可跳转至游戏列表页面。
  YML $\to$ assets/data/social.yml

摘要（Summary）

HTML $\to$ layouts/_default/summary.html
SCSS $\to$ assets/css/_page/_home.scss

分割线
- 调整间距：缩小分割线与文章简介部分间距。
排版
- 添加图标：在“发布时间”前添加图标。
- 添加分隔：
  - 在“作者”与“发布时间”之间添加空格，美化排版。
链接
- 调整颜色：统一“收录项”、“阅读全文”、“标签项”链接的颜色。
- 调整排版：统一“收录项”与“标签项”排版，一个图标后接以 , 分隔的多个单项。

文章页（Single）

文章目录（TOC）

HTML $\to$ layouts/_default/single.html
SCSS $\to$ assets/css/_partials/_single/_toc.scss

目录位置
- 调整位置：将侧边目录整体右移，稍微增大目录与正文的间距。
目录标题
- 添加图标：在“目录”前添加图标。
- 更改颜色：应用 text-info 颜色。
目录内容
- 调整样式：将无序列表改为有序列表，使序号与文章内标题序号呼应。
- 删除记号：将目录项之前的 | 记号删除。
高亮
- 调整高亮：调整目录项高亮的策略，处于激活状态的子标题及其所有父级标题均会高亮。
背景颜色：
- 添加背景：突出作为一个整体的目录，匹配左侧可能呈现的系列列表。

系列文章（Series）

HTML $\to$ layouts/_default/single.html
SCSS $\to$ assets/css/_partials/_single/_series.scss

【新增】若当前文章为系列文章中的一篇，显示该系列的所有文章。

位置：显示逻辑与目录一致
- 左侧边栏：当页面宽度较大时。
- 正文上方：当页面宽度较小时，目录下方。

文章信息（Meta）

HTML $\to$ layouts/_default/single.html
SCSS $\to$ assets/css/_page/_single.scss

文章标题：
- 调整文字：增大文章题目字号、行高。
- 添加图标：标题图标、转载标识、翻译标识。
文章主要信息
- 调整排版：将“发布时间”上移，使其与“作者”、“收录”处于同一行。
- 调整格式：使本行与主页文章简介中的文章主要信息行的格式一致。
文章附加信息
- 调整图标：将 Font Awesome 图标样式统一为 fa-solid。
- 添加分隔：在每项信息之间添加分隔线，保持网站排版风格统一。

文章内容（Content）

HTML $\to$ layouts/_default/single.html
SCSS $\to$ assets/css/_page/_single.scss

标题样式

调整颜色：调整标题颜色，使其更醒目。

添加序号：修改 CSS 自动为标题添加序号。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<style>
    body,
    h1 {
        counter-reset: h2;
    }

    h2::before {
        counter-increment: h2;
        content: counter(h2) ' ';
    }
    h2 {
        counter-reset: h3;
    }

    h3::before {
        counter-increment: h3;
        content: counter(h2) '.' counter(h3) ' ';
    }
    h3 {
        counter-reset: h4;
    }

    h4 {
        counter-reset: h5;
    }
    h4::before {
        counter-increment: h4;
        content: counter(h2) '.' counter(h3) '.' counter(h4) ' ';
    }

    h5::before {
        counter-increment: h5;
        content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) ' ';
    }
</style>

【参考】

任务列表：
- 调整样式：去除列表前的圆点标记。

文章类别（Type）

添加类别
- 调整模版：为不同类别的文章设置不同的模版，包括单一页面和页面包（Page bundles）。
  页面包内除定义页面内容的 .md 文件外，还包含页面内插入的诸如图片、视频、音乐等的其他资源（Hugo 官方网站：内容组织）。
- 调整排版：为不同类别的文章设置不同的排版方式。

HTML $\to$ layouts/partials/single/footer.html
SCSS $\to$ assets/css/_partials/_single/_footer.scss

排版格式
- 调整翻译：将“查看原始文档“修改为”查看 Markdown 源文档“。”原始“还有”最初版本，修改前“的释义，修改为”源“可消除歧义，突出”来源，源头“的释义。
- 调整格式：使分类、标签与主页文章简介中的格式一致。
- 调整分隔：将分隔符统一修改为中文竖线 ｜，保持网站排版风格统一。
图标
- 添加图标：为“返回”和“主页”链接添加图标。
- 添加动画：为“返回”和“主页”图标添加动画。

类别页（Section）

HTML $\to$ layouts/_default/section.html
SCSS $\to$ assets/css/_page/_archive.scss
SCSS $\to$ assets/css/_partials/_archive/_terms.scss

图标：
- 添加图标：为“年份”添加对应图标。
- 添加图标：为转载文章添加分享标识和链接。
- 添加图标：为翻译文章添加翻译标识和链接。
- 调整图标：更换“总字数”图标。

HTML $\to$ layouts/partials/archive-title.html

标题图标：在文章前置参数中设置，在文章标题前显示。
- faIcon： Font Awesome 图标。
- simpleIcon：Simple Icon 图标。
- srcIcon：本地或网络图标。
图标颜色：可以设定标题图标的颜色。

置顶文章列表（Pin）

HTML $\to$ layouts/partials/pin-weight.html
SCSS $\to$ assets/css/_page/_archive.scss

【新增】仅当位于类别根目录（/SECTION/）下时，显示该类别下置顶文章列表。

排序
- 仅当该类别下有文章在前置参数中设置了 weight 参数后显示置顶组。
- 按照文章前置参数 weight 从小到大排序。

最近更新列表（Recent）

HTML $\to$ layouts/partials/recently-updated.html
SCSS $\to$ assets/css/_page/_archive.scss

当位于类别根目录（/SECTION/）下时，显示该类别下最近更新的文章列表。当位于类别非根目录（/SECTION/games/）时，仅显示当前目录下最近更新的文章及目录。
SECTION 为具体类别名。

图标：
- 添加图标：为“最近更新”添加对应图标。

所有文章列表（All）

HTML $\to$ layouts/section/listall.html
SCSS $\to$ assets/css/_page/_archive.scss

当位于类别根目录（/SECTION/）下时，显示该类别下所有文章列表。在 SECTION/_index.html 前置参数中指定 layout: listall，即可定制该类别页（Section）列出相关内容的方式，而非采用默认的 layouts/_default/section.html。 SECTION 为具体类别名。

图标：
- 添加图标：为“所有[类别]”添加与页眉菜单项对应的图标。

层级文章列表（This）

HTML $\to$ layouts/_default/section.html
SCSS $\to$ assets/css/_page/_archive.scss

当位于类别非根目录（/SECTION/games/）时，仅显示当前目录下的文章及目录列表。
SECTION 为具体类别名。

图标：
- 添加图标：为目录添加图标，方便与文章区分。
- 图标响应：当鼠标悬停在目录上时，将图标由”闭合的文件夹“更换为”打开的文件夹“。
  【参考】Is it possible to change between two fontawesome icons on hover?

游戏列表（GameList）

MD $\to$ content/practices/games/_index.html
HTML $\to$ layouts/practices/gamelist.html
SCSS $\to$ assets/css/_shortcodes/_showcase.scss

【新增】由于所行（practices）目录下除游戏外还会包含其他内容，如像素画、App 等。因此在所行目录下新建游戏子目录（practices/games/），游戏介绍文章放置在该目录下。
在 practices/games/_index.html 前置参数中指定 layout: gamelist，即可定制该类别页（Section）列出相关内容的方式，而非采用默认的 layouts/_default/section.html。

其他不同形式的内容均可放置在对应子目录下，并根据内容制定不同的展示方式。

游戏列表中的游戏展示卡片参考 Hugo 主题 - DoIt 中的 ShowCase。

分类页（Taxonomy）

系列（Series）

HTML $\to$ layouts/partials/single/series.html

【新增】系列文章标题基本一致，内容紧密相关。

展示：形式类似目录，可显示在左侧边栏或静态目录下方。
顺序：按照系列顺序排序显示，不按发布时间分组。
更新：最近更新项显示在主列表下方。

所有分类（Term）

HTML $\to$ layouts/taxonomy/terms.html
SCSS $\to$ assets/css/_partials/_archive/_terms.scss
SCSS $\to$ assets/css/_partials/_archive/_tags.scss

图标：
- 添加图标：为“所有分类”、“所有标签”添加对应图标。
- 图标响应：当鼠标悬停在”分类项“上时，将图标由”闭合的文件夹“更换为”打开的文件夹“。
标题：
- 调整颜色：将类别项颜色改为次要强调色。

单一分类（List）

HTML $\to$ layouts/taxonomy/list.html
SCSS $\to$ assets/css/_page/_archive.scss

图标：
- 添加图标：为“年份”添加对应图标。

快捷代码（ShortCode）

提醒（Admonition）

HTML $\to$ layouts/shortcodes/admonition.html
SCSS $\to$ assets/css/_shortcodes/_admonition.scss

图标：
- 调整图标：更换 引用（quote）提醒的图标。
颜色：
- 调整颜色：标题字体颜色与提醒整体配色统一。

B站视频（Bilibili）

HTML $\to$ layouts/shortcodes/bilibili.html
SCSS $\to$ assets/css/_shortcodes/_bilibili.scss

播放：
- 自动播放：添加参数 autoplay 控制视频是否自动播放。

卡片链接（CardLink）

HTML $\to$ layouts/shortcodes/link.html
HTML $\to$ layouts/partials/plugin/link.html
SCSS $\to$ assets/css/_shortcodes/_cardlink.scss

头像：
- 添加头像：将卡片链接右侧默认图片更换为链接网站的头像图片。

居中引用（CenterQuote）

HTML $\to$ layouts/shortcodes/center-quote.html
SCSS $\to$ assets/css/_shortcodes/_center-quote.scss

排版：
- 调整图标：调整双引号图标位置。

作品展示（ShowCase）

HTML $\to$ layouts/shortcodes/showcase.html
SCSS $\to$ assets/css/_shortcodes/_showcase.scss
SCSS $\to$ assets/css/_shortcodes/_index.scss

【新增】

内容：图片、标题、简介
形式：卡片

【参考】Hugo 主题 - DoIt 中的 ShowCase