84、【Ubuntu】【Hugo】搭建私人博客：文章目录（三）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

分析了【<details> 可折叠容器】，TOC 的生成方式，以及手动构建嵌套列表，下面继续分析

OK，看下一部分：初始化嵌套 <ul> 结构

可以看到，这里用 $.Scratch（Hugo 临时变量）记录哪些层级是裸 ul（没有用 <li> 包裹），用于后续正确的闭合标签

这里涉及到 <ul>，<li> 和裸 <ul> 的概念，下面详细解释下

在 HTML 中：

正确的 HTML 嵌套结果必须像这样

html 复制代码

<ul>
  <li>一级标题</li>
  <li>
    二级标题
    <ul>
      <li>三级标题</li>
      <li>另一个三级标题</li>
    </ul>
  </li>
</ul>

其最终效果就像

而不应该直接 <ul><ul>，因为 HTML 标准规定，<ul> 只能出现在 <li> 内部，或作为根元素，所以 <ul><ul> 这样是非法的，比如下面这样

html 复制代码

<!-- 非法！ -->
<ul>
  <ul>   <!-- 这里缺少 <li> 包裹！ -->
    <li>...</li>
  </ul>
</ul>

任何 <ul> 如果出现在另一个 <ul> 内部，就应该被包在 <li> 里面，上面那种非法的写法最终渲染效果如下

单从效果来看，可以看到现代浏览器的解析器也不会报错，而是跳过规则检查，直接按原样解析，然后交给渲染引擎 ，也就是说，浏览器能够容忍这种非法写法，然后用默认样式去渲染，相当于外层 <ul> 被忽略了，只显示内层 <ul>，浏览器直接把内层 <ul> 当作主列表项来处理

但是，能渲染 ≠ 合法 ≠ 安全可靠 ，所以在这里可以看到，PaperMod 会对 bareul 进行单独处理，因为要生成语义正确，可预测，符合标准的 HTML，原因如下

所以 PaperMod 在这里会主动判断 bareul 来确保每一个 <ul> 都被正确包裹在 <li> 中，让 HTML 结构永远合法，输出可控，稳定可靠

OK，刚才介绍了 <ul> 必须包裹着 <li>，下面来看正常的 HTML 效果，首先

比如下面这段 HTML 代码

html 复制代码

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

浏览器看到后，就会自动显示成

开发者不用自己打圆点，浏览器会自动加上，这是 HTML 的语义化设计

OK，有 Unordered List（无序列表），也就会有 Ordered List（有序列表），其效果是带数字的 1.，2.，3.，此时可以用 <ol> 标签，比如下面这段 HTML 代码

html 复制代码

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

浏览器看到后，自动显示成

可以看到，浏览器会自动加上前面的数字索引

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：文章目录（四）