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

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

背景

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

分析了 list.html 中进行分页后的剩余行为，比如是否显示个人信息卡片，并接着分析了为文章列表中的每一项 <article> 动态设置的 CSS 类名，下面继续

搭建私人博客

上篇 blog 分析到这里的主逻辑判断，并分析了第一种情况（条件全满足）

下面继续看其他的场景

情况 2：当前在标签/分类页，即条件一 $.IsHome 不满足，此时进入分支

go 复制代码

{{- else if $term }}
  {{- $class = "post-entry tag-entry" }}

由于当前是 /tags/xxx 或 /categories/yyy 页面，即 $term 非空，此时就给类名再加上 tag-entry 后缀（注意，这里原来的 post-entry 被保留下来），最终的 CSS 样式就变成 post-entry tag-entry，这样可以对标签页的布局做调整

情况3：其他所有情况，比如首页第二页，或普通 section 列表页，单篇文章页等不会在主逻辑判断做特殊处理，类名还是保持默认的 $class="post-entry"

OK，下面来看经过这段逻辑处理后的实际 HTML 渲染例子

场景 A：首页，第一页，第一篇文章，无个人信息页要展示

html 复制代码

<article class="first-entry">...</article>

场景 B：首页，第一页，第二篇文章

html 复制代码

<article class="post-entry">...</article>

场景 C：标签页，比如 /tags/hugo/ 中的文章

html 复制代码

<article class="post-entry tag-entry">...</article>

场景 D：首页启用了个人信息页展示

html 复制代码

<!-- 即使是第一篇，也只用默认样式 -->
<article class="post-entry">...</article>

另外，这里再说个细节，对比前面的代码，可以看到判断首页时，循环外使用的是 .IsHome，而循环内用的是 $.IsHome

这是因为 range 循环内部，. 已经被重定义为当前的文章对象 $page，而 $ 始终指向的，是最外层的上下文，即原始页面，如果写成 ,IsHome，那会去查当前这篇文章是不是首页，那结果恒为 false

比如如果首页就是列表页的话，.IsHome 就是 true

如果是一个普通列表页，那 .IsHome 就为 false

关于 $ 的用法，可以参考官方 Go 模板的描述 https://pkg.go.dev/text/template#hdr-Variables

可以看到，$ 在 Go 模板中是一个特殊变量

在模板执行开始时，$ 会被初始化为 . 的值，也就是传给 Execute 方法的数据，. = data，而 $ = data，也就是 . 的初始值，所以 $ 就是模板执行时最开始那个 . 的快照
而在 range，with 中，. 会被重新 rebound 绑定为当前迭代项或子对象，但 $ 不会改变，始终等于最初的 data

Hugo 在渲染页面时，会这样调用模板

go 复制代码

tmpl.Execute(writer, page)

这里的 page 就是最初的页面，这个最初的页面可以是被分页后的首页（列表页），也可以是被分页后的普通列表页 ，所以即使进入 range，$ 依然能访问到这个最初的分页，来判断 page.IsHome 是不是首页，下面再举个例子

go 复制代码

{{/* 假设当前页面是首页，所以最初：. == HomePage, $ == HomePage */}}

{{ range .Paginator.Pages }}
  <!-- 现在：. == 当前文章（Post） -->
  <!-- 但：$ == HomePage（不变） -->

  {{ if $.IsHome }}  ← 正确！访问的是原始页面的 IsHome
    ...
  {{ end }}
{{ end }}

OK，关于这些 post-entry，fist-entry，post-entry tag-entry 的 CSS 样式，等后面再分析，接下来分析下面的 <article>，具体的文章渲染过程

首先，从这里可以看到，<article> 标签这里引用的 class，就是上面确定好的 CSS 样式

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