【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog
【Ubuntu】【Hugo】搭建私人博客：文章目录（三）
分析了【初始化嵌套 <ul> 结构】中的 <ul>，<li>，<ol> 和 bareul 标签，下面继续
搭建私人博客
OK，分析完这些，可以知道，Hugo PaperMod 模板本身已经提供了一套 TOC 机制，下面只要应用即可，打开 hugo.toml 配置文件，加入配置项 ShowToc = true
接着终端输入
bash
hugo server启动 Hugo 博客，可以看到 TOC 效果如下
往下滑之后，右下角有个链接可以快速回到目录上面
OK，这样 PaperMod 主题的 TOC 功能配置完成
接下来，再添加下一个功能【导航栏】
首先，可以看到博客左部的空间是很空旷的
这是因为 PaperMod 主题是基于原版 Paper 主题改进而来的，继承了其干净，简洁，专注内容的设计理念，属于极简主义风格，其页面布局以中间的单栏为主，减少视觉干扰，可以让读者更专注于文章内容本身，尤其适合博客，技术笔记，写作类的网站
当然，文章数量少的时候，这样是没问题的，但当文章数量多到一定程度时，侧边导航栏的作用就会体现出来，可以让用户瞬间能够跳转到下一篇喜欢的文章
首先，PaperMod 主题是没有侧边导航栏的模板的，因为其设计风格就是单栏，为了实现侧边导航栏的目标，开发者可以自定义添加，主要通过
- 修改
layouts/（博客目录下，非主题目录）中的模板文件（比如single.html） - 使用 Hugo 的 partial 机制引入自定义侧边栏组件
- 覆盖 CSS 样式，创建侧边导航栏布局
下面将详细介绍下侧边导航栏的设计添加
在介绍侧边导航栏之前，先回顾之前之前在 custom.css 文件中自定义的行内代码颜色更改内容
css
/* 强制覆盖所有行内代码样式 */
.post-content code,
main code,
article code {
color: #d32f2f !important; /* 红色文字 */
background-color: #ffebee !important; /* 淡红背景 */
padding: 0.2em 0.4em !important;
border-radius: 4px !important;
font-size: 0.95em !important;
font-family: "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace !important;
}下面先解释完这里的东西再继续，首先是其核心目标，这段 CSS 代码可以强制统一网页中所有的 inline code（行内代码）的显示样式，无论这些代码原本被什么 HTML 元素包裹，是否被其他样式覆盖，这里有几个关键点：
- 选择器部分 ：
.post-content code，main code，article code都是选择器，表示选中 class 为.post-content容器内的<code>标签，以及在<main>，<article>标签内的<code>标签，这些一般是博客或文章内容中行内代码容易出现的位置，这里提到的<code>标签在 HTML 中用于表示一段计算机代码，当<code>不被<pre>包裹时，一般就是行内代码 color: #d32f2f !important：样式规则，表示文字颜色为深红色#d32f2f，并用!important强制覆盖其他可能得 color 设置background-color: #ffebee !important：背景色设置成非常浅的粉红色#ffebee，形成高亮效果，同样强制生效padding: 0.2em 0.4em !important：内边距设置成上下 0.2 倍字体高度，左右 0.4 倍，让文字不紧贴边框，更美观border-radius: 4px !important：圆角边框，让背景块看起来更柔和font-size: 0.95em !important：字体略小于正文（95%），避免行内代码显得突兀font-family: "...", monospace !important：使用等款字体（monospace），有限使用现代编程字体，比如 Fira Code，JetBrains，Mono 等，提升代码可读性，如果电脑没有安装这些字体，会依次回退到 Consolas，Courier New，最后用系统默认等宽字体
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：侧边导航栏（一）