博客主题，让FixIt更加伟大！

第 1 节 概述

这个博客是采用 Hugo 进行搭建的，Hugo 使用 Go 语言编写，编译速度远超其他生成器（如 Jekyll、Hexo）。即使是上千篇文章，也能在几秒内完成构建，适合频繁更新内容的场景。

主题采用 FixIt 进行二次修改，FixIt 本身就是一个较为简洁、直观的主题，能够很轻松的构建出好看的博客页面，并且支持各种的拓展，可以制作出功能丰富的博客。官方有一个使用说明。

出于我个人的需求，我希望我的博客能够更加层次分明。能够一眼看出各个等级的标题，图片、表格、公式、代码和强调的文字都可以在文章中一眼看出，并且颜色不用太过于繁杂，最好比较简约。

这样，在后续我想要复看我写的各种博客、笔记的时候，能够一眼看出我当时想要留下的重要部分，防止自己迷失在众多的文字当中。

第 2 节 主题样式构思

2.1 标题

首先，标题一般分为六级，从H1 到 H6，在这个主题当中，标题是从 H2 到 H6 的，分为 5 级，构思如下：

• 字体：标题的字体和正文是不相同的，标题使用字体「霞鹜文楷」，正文使用中文字体「方正书宋」和英文字体「Minion Pro」
• 前缀：H2 标题使用前缀「第 x 节」，H3 标题使用前缀「x.x」，后面的标题不使用前缀
• 文本颜色：H2 标题使用红色字体，H3 标题使用蓝色字体，H4 标题和 H5 标题分别使用相同的红色字体和蓝色字体，H6 使用默认颜色
• 公式/代码：标题中的公式和代码的样式和文本统一
• 目录：在目录中只显示到 4 级标题，防止标题级数过多导致繁杂。

2.2 正文

正文构思如下：

• 强调：正文中文本强调不加粗，颜色为红色，红色较二级标题红稍浅。
• 超链接：正文中超链接颜色为蓝色，蓝色较三级标题蓝稍浅。
• 代码：正文中单行代码块和「强调」颜色相同。
• 留白：正文中的强调、超链接、单行代码块的左右留出一些空白，使得文字更加突出，间距为0.25 rem。
• 字体：正文中的强调、超链接、单行代码块使用和标题相同的「霞鹜文楷」。

2.3 Admonition

Admonition 是一种首先使用在「obsidian」中的 markdown 扩展语法，相比较于原生的 markdown 语法quote，能够表现的语义更加丰富，呈现效果如下：

Admonition 中的标题和正文样式需要进行一定的修改，以配合 Admonition 自带的背景颜色：

• 颜色：Admonition 的标题和正文中的强调和单行代码使用 Admonition 框左侧竖线的颜色。
• 字体：标题、正文中强调和单行代码使用和标题相同的「霞鹜文楷」

2.4 图片

• 间距：图片修改其上下间距，间距为2 rem，使得图片从文本中突出出来。

2.5 表格

• 间距：表格修改上下间距，间距为1 rem，使得表格从文本中突出出来。
• 表头字体：表格的表头使用和标题相同的「霞鹜文楷」。
• 表头颜色：表格的表头使用超链接的颜色。

第 3 节 修改过程

主要修改 2 个文件，assets/css/_override.scss和assets/css/_custom.scss

3.1 修改_override.scss

这个文件用于覆盖主题自带的字体和颜色等变量名，对于一些简单的修改，只要覆盖变量名就可以实现全局修改的，可以直接在这边覆盖变量名即可。

3.2 修改_custom.scss

这个文件主要用来覆盖 CSS 样式，如果我们针对不同的情形，同一markdown公式展现出不同的样式，比如如下情景：

而在一般的文本中强调和code表现出另外一套样式，需要修改_custom.scss。

修改的时候，借助浏览器的「开发者工具」即可，找到当前markdown公式优先级较高的 scss 匹配方式，在该种匹配方式下修改样式即可。