【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog
【Ubuntu】【Hugo】搭建私人博客：文章目录（二）
分析了【<details> 可折叠容器】，TOC 的生成方式，以及手动构建嵌套列表，下面继续分析
搭建私人博客
OK，看下一部分：初始化嵌套 <ul> 结构
可以看到，这里用 $.Scratch（Hugo 临时变量）记录哪些层级是裸 ul（没有用 <li> 包裹），用于后续正确的闭合标签
这里涉及到 <ul>，<li> 和 裸 <ul> 的概念，下面详细解释下
在 HTML 中：
<ul>标签表示 Unordered List，无序列表，就是带圆点的列表 ，比如
<li>标签表示 List Item，列表项，是<ul>里的每一个条目
正确的 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，原因如下
- 即使这个浏览器能够容忍非法结构，但不意味着所有浏览器都这样，不同浏览器渲染方式可能不同
- 可访问性工具可能无法理解
- SEO 爬虫可能忽略内容，导致搜索引擎无法捕获到相关关键字，进而降低在搜索结果中的排名
- CSS 样式也可能失效
所以 PaperMod 在这里会主动判断 bareul 来确保每一个 <ul> 都被正确包裹在 <li> 中，让 HTML 结构永远合法，输出可控，稳定可靠
OK，刚才介绍了 <ul> 必须包裹着 <li>，下面来看正常的 HTML 效果，首先
<ul>= Unordered List（无序列表）会告诉浏览器，开始一个带圆点的列表<li>= List Item（列表项），浏览器会识别到里面的列表中的每一项内容
比如下面这段 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】搭建私人博客：文章目录（四）