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

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

背景

上篇 blog
【Ubuntu】【Hugo】首页板块配置：Template Lookup Order（示例）

分析了 Hugo 官方给的例子，进一步展示了 Hugo 模板系统的灵活性，通过简单两个配置 type 和 layout，就可以精准控制每个页面用哪个模板，而无需改动 Hugo 的底层逻辑，下面继续分析

搭建私人博客

之前 blog 介绍过，首页的 .Kind 属于 list.html，在 PaperMod 中也遵循了这一点，在 list.html 中渲染首页

下面就来详细分析下 PaperMod 中的 list.html 模板

这里表示是否启用个人主页模式（Profile Mode）

如果当前是首页，并且在网站中配置了

bash 复制代码

[params.profileMode]
  enabled = true

就会启用个人主页模式，这个模式会加载 partial/ 目录下的 index_profile.html 的局部模板，一般用来展示作者头像，简介等，如果没配置，就走常规的文章列表逻辑

OK，接下来是第二部分，非个人主页 Profile 下的页面头部 Header

如果不是首页，但又有标题的话，就显示一个 <header> ，表示这里是页面的头部（有标题表示接下来至少是有内容要展示的），在 <header> 里，有

面包屑导航（用 breadcrumbs.html 模板渲染生成）
页面标题 <h1>
如果页面类型 .Kind 是分类页 term 或者分区页 section，并且配置了

bash 复制代码

[params]
  ShowRssButtonInSectionTermList = true

就显示一个 RSS 订阅图标（SVG 图标），SVG 图标之前 blog 【Ubuntu】【Hugo】搭建私人博客：搜索功能（一）介绍过，可以在开源图标库 Feather Icons 中找到其形状

如果这个页面还有 .Description 的话，就把里面的内容渲染成 Markdown 并显示描述

OK，这里再详细分析下第 13 行的

go 复制代码

{{- with .OutputFormats.Get "rss" }}

这里表示安全地获取并使用当前页面的 RSS 输出格式（如果存在的话），下面来拆解其含义

OutputFormats：在 Hugo 中，每个 .Page 页面可以有多种输出格式 ，比如
html（默认网页）
rss（RSS 订阅源，一般是 .xml 格式）
json，amp，sitemap 等其他自定义格式
这些格式可以在配置文件 hugo.toml 中配置，比如现在当前的首页启用了 RSS 输出

bash 复制代码

[outputs]
  home = ["HTML", "RSS", "JSON"]

当前页面就有三种输出格式，分别是 index.html（首页内容），index.xml（RSS 订阅源），index.json（模糊搜索依赖的索引文件）

.OutputFormats.Get "rss"：这个方法可以从当前页面支持的输出格式中，获取名字叫 rss 的对象 ，如果当前页面支持 RSS 输出（比如首页，或者 section 页面），该方法就会返回一个有效的 OutputFormat 对象，如果不支持（比如一篇普通的文章页一般就没有 RSS），那这个时候该方法就会返回控制 nil
{``{- with ... -}}：with 是 Go 模板中的一个作用域控制 + 空值判断指令，这里

go 复制代码

{{- with .OutputFormats.Get "rss" }}
  <!-- 这里只有在 Get "rss" 返回非 nil 时才会执行 -->
  <a href="{{ .RelPermalink }}">RSS</a>
{{- end }}

就等价于伪代码

javascript 复制代码

let rss = page.OutputFormats.get("rss");
if (rss != null) {
  // 使用 rss 对象，此时上下文（`.`）就是 rss 本身
  render(`<a href="${rss.RelPermalink}">RSS</a>`);
}

这里在 with 块内部，. 也就是当前上下文，变成了 rss 对象，所以可以直接用 .RelPermalink

还有就是这里的 .RelPermalink，表示的是相对于网站根目录的链接 ，比如如果站点是 https://example.com/blog/，RSS 文件生成在 /blog/index.xml，那么 .RelPermalink 就是 /blog/index.xml，当然也可以用 .Permalink 获取绝对 URL 地址

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