127、【Ubuntu】【Hugo】首页板块配置：list 模板（六）

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

背景

分析了 list.html 中 <article> 中的封面图控制，以及文章标题和草稿标识，并分析了其中的 SVG 图标属于 Google 的 Material Symbols，Material Icons 系列，并对比了 Feather Icons 和 Material Icons 两种风格，最后解释了 <span> 标签的含义，下面继续

搭建私人博客

OK，下面继续分析 <article> 的剩余内容

这里表示是否要隐藏文章摘要部分，如果用户没有设置

bash 复制代码

[params]
  hideSummary = true

就默认显示文章摘要部分 ，如果文章 front matter 中写了 hideSummary=true，那整段摘要就不显示

OK，如果不需要隐藏摘要，就用一个 <div> 包裹起摘要部分的内容

go 复制代码

  <div class="entry-content">
    <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
  </div>

这里 <p> 全称是 paragraph（段落），用 <p> 标签可以包裹一段连续的文本内容，此时浏览器会默认给 <p> 标签的上下加一点空白（margin），让段落之间有呼吸感，这是语义化 HTML 的核心标签之一，用来告诉浏览器和搜索引擎，这里是一段正文，如果没有 <p>，纯文本在 HTML 中会连成一团，无法区分段落

在 <p> 标签包裹的内容中，是一连串的管道 | 操作，下面来详细看下

.Summary：Hugo 自动生成摘要，默认提取正文前 70 个字，或在文章中插入  的位置，亦或是直接在 front matter 中写明的 summary="..."
| plainify：移除所有 HTML 标签，比如 <em>，<strong>，让摘要部分变成纯文本
| htmlUnescape：把 <，& 等 HTML 符号转义回 <，& 等这样的可读字符

这一连串的管道操作可以让用户看到的是正常文字，而不是包含一堆 HTML 代码的内容，渲染输出一段干净，安全，可读的纯文本

OK，然后是

go 复制代码

{{ if .Truncated }}...{{ end }}

Truncated 是缩减的，删减的意思

这里表示的是，如果摘要是因为 Hugo 自动截断（比如摘要比较长，已经超过显示范围了，还是没遇到  结束符），此时 .Truncated 就为 true，此时就在末尾加上省略号 ...，表示后续内容被省略了，此时用户感兴趣的话，可以点进去看全文

OK，继续看下面的文章元信息（Meta）

go 复制代码

  {{- if not (.Param "hideMeta") }}
  <footer class="entry-footer">
    {{- partial "post_meta.html" . -}}
  </footer>
  {{- end }}

如果用户没设置

bash 复制代码

[params]
  hideMeta = true

就默认显示元信息，比如文章的发布时间，分类，标签等，这些信息可以通过 hideMeta = true 进行隐藏

这里比较关键的是 <footer> 这个标签，<footer> 在这里表示的是文章卡片的底部信息区，可以用于展示文章的 Meta 元数据，这个标签是语义化 HTML 的一部分，浏览器看到这个标签就能明白，这部分是当前文章的附属信息，而不属于正文

另外，footer 的中文意思是页脚，在 HTML 的语境中表示其最近祖先，比如 <article>，<section> 或页面的尾部信息，在 list.html 模板中，这个 <footer> 位于 <article> 的内部，所以它属于这篇文章的页脚，而不是整个网页的页脚，这是很容易误解的地方，<footer> 不一定是网页底部，而可以是任何区块的底部信息，这点要理解到位

然后关于页脚信息的具体内容，会通过 post_meta.html 模板进行渲染

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog