【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog
【Ubuntu】【Hugo】搭建私人博客：文章目录（三）
分析了【初始化嵌套 <ul> 结构】中的 <ul>，<li>，<ol> 和 bareul 标签，下面继续
搭建私人博客
OK，回到 TOC 文章目录，其本质上就是一个层级化的无序列表，比如下面这段 HTML 代码
html
<ul>
<li>引言</li>
<li>方法
<ul>
<li>数据收集</li>
<li>实验设计</li>
</ul>
</li>
<li>结论</li>
</ul>浏览器会自动渲染成下面这个样子
这是 HTML 表示树状层级内容的标准方式
OK，再来看 bareul
bareul 只是 PaperMod 模板在生成过程中，使用的临时逻辑概念，不是最终输出的内容 ，其作用就像一种草稿纸，在脑子里先假设，后面要开一个 <ul>，但还没决定这个 <ul> 应该被哪个 <li> 包裹（要闭合 </ul></li> 才知道，其实从人的理解上来说，是可以知道的，只不过机器不知道，机器看不出来 ），于是记下来，存到 $.Scratch 的 bareul 列表里，等后面处理具体标题时，再动态决定这个 <ul> 应该附着到哪一个 <li> 上，关闭 </ul> 的时候，要不要同时输出 </li> 等，最终，模板会确保所有 <li> 都正确的包裹住了 <ul>，并且 </ul> 都得到了正确的关闭
举个例子，比如一个用 Markdown 编辑的标题如下
md
## 第二章
### 小节 A
### 小节 B经过 PaperMod 主题渲染，最终生成的 HTML 如下
html
<div class="toc">
<details>
<summary>Table of Contents</summary>
<div class="inner">
<ul>
<li><a href="#第二章">第二章</a>
<ul>
<li><a href="#小节-a">小节 A</a></li>
<li><a href="#小节-b">小节 B</a></li>
</ul>
</li>
</ul>
</div>
</details>经过浏览器渲染后，效果如下
注意这里的细节
- 首先，最外层的
<ul>是合法的，属于根级目录 - 然后，紧接着一个内层
<ul>（小节列表，小节 A，小节 B），被包裹在<li>（第二章）里面，这就是合法的 HTML 结构
可以看到，没有任何 <ul> 会直接出现在另一个 <ul> 里面却没有被 <li> 包裹的，所以这里也就不存在 bareul
OK，在这里
bareul 帮助模板在遍历标题时，动态跟踪嵌套层级，比如当从 h2 跳到 h3 时，首先模板知道，要为 h3 开辟一个新的 <ul>，此时新增 <ul>（可以确保在 <li> 内部），并用 bareul 记录这里开了一个 <ul>，后面会根据 bareul 记录，来关上对应的 </ul>，或者 </ul></li> 标签
OK，来到 </ul> 关闭的场景，此时 bareul 将弹出之前记录的 <ul>
可以看到，bareul 主要用于正确闭合已经打开的 <ul>，其核心作用在于跟踪哪些 <ul> 需要被关闭，以及关闭时是否附带了 </li>，其本质上是一个待关闭的 <ul> 栈，用于确保标签平衡
OK，来看下如果不用 bareul，会发生什么样的情况，首先 <ul> 标签可能不会正确闭合（最严重，HTML 会报错），其次，<ul> 可能不在任何 <li> 里，比如
html
<ul>
<li>第二章</li>
<ul> <!-- 非法，不在任何 <li> 里 -->
<li>小节 A</li>
</ul>
</ul>浏览器效果如下
虽然这种非法格式，浏览器可以自动修复并渲染出来，但在 HTML 标准中，这样是无效的，可能导致样式错乱，可访问性问题等，行为不可控，其本质上和上篇 blog 【Ubuntu】【Hugo】搭建私人博客：文章目录（三） 的非法格式是一致的，所以还是要正确处理 <ul> 和 <li> 之间的关系
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog