# 博客主题，让FixIt更加伟大！ ## 概述 这个博客是采用 [Hugo](https://gohugo.io/) 进行搭建的，Hugo 使用 Go 语言编写，编译速度远超其他生成器（如 Jekyll、Hexo）。即使是上千篇文章，也能在几秒内完成构建，适合频繁更新内容的场景。 主题采用 [FixIt](https://github.com/hugo-fixit/FixIt) 进行二次修改，FixIt 本身就是一个较为简洁、直观的主题，能够很轻松的构建出好看的博客页面，并且支持各种的拓展，可以制作出功能丰富的博客。官方有一个[使用说明](https://fixit.lruihao.cn/zh-cn/)。 出于我个人的需求，我希望我的博客能够更加层次分明。能够一眼看出各个等级的标题，图片、表格、公式、代码和强调的文字都可以在文章中一眼看出，并且颜色不用太过于繁杂，最好比较简约。 这样，在后续我想要复看我写的各种博客、笔记的时候，能够一眼看出我当时想要留下的重要部分，防止自己迷失在众多的文字当中。 ## 主题样式构思 ### 标题 首先，标题一般分为六级，从H1 到 H6，在这个主题当中，标题是从 H2 到 H6 的，分为 5 级，构思如下： - **字体**：标题的字体和正文是不相同的，标题使用字体「霞鹜文楷」，正文使用中文字体「方正书宋」和英文字体「Minion Pro」 - **前缀**：H2 标题使用前缀「第 x 节」，H3 标题使用前缀「x.x」，后面的标题不使用前缀 - **文本颜色**：H2 标题使用红色字体，H3 标题使用蓝色字体，H4 标题和 H5 标题分别使用相同的红色字体和蓝色字体，H6 使用默认颜色 - **公式/代码**：标题中的公式和代码的样式和文本统一 - **目录**：在目录中只显示到 4 级标题，防止标题级数过多导致繁杂。 ### 正文 正文构思如下： - **强调**：正文中文本强调不加粗，颜色为红色，红色较二级标题红稍浅。 - **超链接**：正文中超链接颜色为蓝色，蓝色较三级标题蓝稍浅。 - **代码**：正文中单行代码块和「强调」颜色相同。 - **留白**：正文中的强调、超链接、单行代码块的左右留出一些空白，使得文字更加突出，间距为`0.25 rem`。 - **字体**：正文中的强调、超链接、单行代码块使用和标题相同的「霞鹜文楷」。 ### Admonition Admonition 是一种首先使用在「obsidian」中的 markdown 扩展语法，相比较于原生的 markdown 语法`quote`，能够表现的语义更加丰富，呈现效果如下： >[!info] 信息 >这是一个简单的 Admonition 样式 Admonition 中的标题和正文样式需要进行一定的修改，以配合 Admonition 自带的背景颜色： - **颜色**：Admonition 的标题和正文中的强调和单行代码使用 Admonition 框左侧竖线的颜色。 - **字体**：标题、正文中强调和单行代码使用和标题相同的「霞鹜文楷」 ### 图片 - **间距**：图片修改其上下间距，间距为`2 rem`，使得图片从文本中突出出来。 ### 表格 - **间距**：表格修改上下间距，间距为`1 rem`，使得表格从文本中突出出来。 - **表头字体**：表格的表头使用和标题相同的「霞鹜文楷」。 - **表头颜色**：表格的表头使用超链接的颜色。 ## 修改过程 主要修改 2 个文件，`assets/css/_override.scss`和`assets/css/_custom.scss` ### 修改`_override.scss` 这个文件用于覆盖主题自带的字体和颜色等变量名，对于一些简单的修改，只要覆盖变量名就可以实现全局修改的，可以直接在这边覆盖变量名即可。 ### 修改`_custom.scss` 这个文件主要用来覆盖 `CSS` 样式，如果我们针对不同的情形，同一`markdown`公式展现出不同的样式，比如如下情景： >[!info] 信息 >信息这个 Admonition 样式中**强调**和 `code` 需要配合Admonition 自带的背景颜色。 而在一般的文本中**强调**和`code`表现出另外一套样式，需要修改`_custom.scss`。 修改的时候，借助浏览器的「开发者工具」即可，找到当前`markdown`公式优先级较高的 `scss` 匹配方式，在该种匹配方式下修改样式即可。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98%E8%AE%A9fixit%E6%9B%B4%E5%8A%A0%E4%BC%9F%E5%A4%A7/