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

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

背景

上篇 blog
【Ubuntu】【Hugo】首页板块配置：list 模板（四）

分析了 list.html 中 <article> CSS 类名的主逻辑判断中剩余的场景，并举了例子，接着分析了 $ 在 Go 模板中的作用，下面继续

搭建私人博客

OK，接下来继续看 <article> 的描述

这里是 Hugo 模板中，用于渲染每一篇文章摘要卡片（list item）的核心部分，一般出现在首页，分类页或标签页的文章列表中，下面来详细分析下

首先是，<article>，作为外层容器，通过语义化的 HTML 标签 <article> 包裹每篇文章，可以根据 class 动态设置 CSS 样式

OK，然后是封面图的控制

go 复制代码

{{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
{{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}

这里首先判断封面是否需要隐藏，这里有两个配置项，如果文章的 front matter 中有配置

bash 复制代码

[cover]
  hidden = true
  hiddenInList = true

如果都没有，就默认 false，就显示封面，这样设计很灵活，可以用 cover.hidden 全局隐藏封面，也可以用 cover.hiddenInList 只在列表页隐藏

判断之后就调用封面局部模板 layouts/partials/cover.html，这里会传入一个字典 dict 作为参数，参数有：

cxt：当前文章对象 .
IsSingle：false，因为这是 list 列表页，不是 single 单篇文章页
isHidden：上面计算出来的布尔值

封面模板 cover.html 会根据这些参数，决定是否渲染 <img> 或占位图

OK，接下来是文章标题和草稿标识

这里首先显示文章标题 .Title，如果判断是草稿，front matter 里面有 draft = true，就在标题旁边显示一个 SVG 图标，这个 SVG 不是来自之前提到过的 Feather Icons 风格，从其 viewBox="0 -960 960 960" 和路径数据 d="..." 来看，属于 Google 的 Material Symbols，Material Icons 系列，下面对比下两种风格

特性	Feather Icons	Material Icons
风格	极简线性，2px 描边	圆润，现代，可变权重和填充
`viewBox`	一般是 `0 0 24 24`	常见 `0 -960 960 960`
开源协议	MIT	Apache 2.0

新建个空 HTML 文件，把这段 SVG 代码复制进去

html 复制代码

        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" fill="currentColor">
          <path
            d="M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" />
        </svg>

用浏览器打开，可以看到图标大致如下

OK，接下来继续看里面的内容

go 复制代码

      {{- .Title }}
      {{- if .Draft }}
      <span class="entry-hint" title="Draft">
        <svg .../>
      </span>
      {{- end }}

{``{- .Title }} 表示显示文章标题，然后如果是草稿（front matter 中有 draft=true），就在标题旁显示上面的 SVG 图标

另外，这里的 <span> 是 HTML 中的一个通用行内容器，意味着这个标签

没有默认样式，比如不会换行，不会加粗，也不会改变布局
没有语义含义，比如不像 <h1>，<p>，<article> 那样可以表达内容结构

其唯一作用是给一段文本或元素打个包，方便加样式或属性 ，做个比方，<span> 就像个透明胶带，把东西捆在一起，好贴标签，这里 <span> 做了三件事

包裹 SVG 图标：这样就能对整个图标区域设置样式
添加 CSS 类 entry-hint：这个就是 CSS 样式
附加 title=Draft 属性：这是关键
对普通用户（鼠标用户）来说 ，当把鼠标悬停在这个图标上时，浏览器会自动显示一个小框，其内容是 Draft，用户一看就明白这是草稿
而对视障者用户 ，使用屏幕阅读器时，当焦点移到这个 <span> 时，屏幕阅读器会自动朗读 title 的内容

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】首页板块配置：list 模板（六）