完整教程：101、【Ubuntu】【Hugo】搭建私人博客：元信息&翻译（二）
【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
搭建私人博客
translation_list.html 的整体内容如下：
{{- if .IsTranslated -}}
{{- if (ne .Layout "search") }}
{{- if or .Params.author site.Params.author (.Param "ShowReadingTime") (not .Date.IsZero) }} | {{- end -}}
{{- end -}}
<span>{{- i18n "translations" | default "Translations" }}:</span><ul class="i18n_list">{{- range .Translations }}<li><a href="{{ .Permalink }}">{{- if (and site.Params.displayFullLangName (.Language.LanguageName)) }}{{- .Language.LanguageName | emojify -}}{{- else }}{{- .Lang | title -}}{{- end -}}</a></li>{{- end }}</ul>{{- end -}}下面来详细分析下：
{{- if .IsTranslated -}}：用来判断当前页面是否有其他语言的翻译版本，这里.IsTranslated是 Hugo 的内置变量，只有当启用了多语言（i18n），并且当前文章在多个语言目录下都有对应文件时，这里.IsTranslated才为 true，比如目录结构是这样
content/
├── en/posts/hello.md
└── zh/posts/hello.mden 和 zh 中的相同文件互为翻译，如果没有这种翻译结构，那整个 translation_list.html 就不会被渲染，保持页面干净
{{- if (ne .Layout "search") }}：这里ne是 not equal 不等于的意思，表示如果当前页面布局不是 search 搜索页面的时候，才继续渲染translation_list，这里多说一嘴，PaperMod 主题这里和前面 blog 介绍的search.html引用translation_list.html自相矛盾，明明translation_list模块就不支持搜索页面，search.html搜索模块还去引入translation_list翻译模块，估计是某个开发人员 copy 文章正文页single.html的时候忘记去掉了，属于小 BUG，但不影响体验，已提 issue
接下来这个有点长
{{- if or .Params.author site.Params.author (.Param "ShowReadingTime") (not .Date.IsZero) }} | {{- end -}}
<span>{{- i18n "translations" | default "Translations" }}:</span>注意，这行里面的 | 单纯就是个分隔符，不是什么管道语法，因为这个 | 字符是单独出现在 {{- ... -}} 外面的，之前 blog 介绍过，只有在 {{- ... -}} 里面才使用 Go 模板语法，这一行需要结合下一行 <span> 来看
先说 <span> 这里的内容吧，<span> 是 HTML 中一个非常基础常用的标签，其作用是给一段文本或行内内容打个包裹，方便加样式，加行为等，但又不会影响排版结构，这里的文本就是 Translations，举个例子，下面这么一段文字
今天天气很好，适合出门如果想把【很好】这两个字标红，但又不希望换行，不希望像标题那样独占一行，这个时候就可以用 <span> 给这俩字给包裹上
今天天气 <span style="color: red;">很好</span>，适合出门这样【很好】俩字变红了，但整句话还是在同一行，没有任何布局变化，<span> 的核心特点就是
- 作为行内元素，不会强制换行，和其他文字在同一行显式
- 无默认样式，浏览器不会给里面的元素加粗，变色，留白等
- 纯粹是容器，本身没有语义，只为了包裹内容，方便后续操作
OK，那么就知道分隔符 | 后面是 Translation: 这么一个文本了，那么这一行
{{- if or .Params.author site.Params.author (.Param "ShowReadingTime") (not .Date.IsZero) }} | {{- end -}}的整体作用就是在文本 Translations: 前面加一个 | 分隔符，但仅当页面已经有其他 meta 信息时才加，这些 meta 信息包括
.Param.author：文章 front matter 里写了作者site.Params.author：或者hugo.toml全局配置了默认作者.Param "ShowReadingTime"：启用了阅读时长显示.Date.IsZero：文章有有效发布日期（非零值）
这些元信息只要有一个的话，就加上分隔符 |，和后面的 Translations 文本隔开，可以让排版更美观，比如原本元信息是
By Alice · 3 min read就上翻译后就变成
By Alice · 3 min read | Translations: [EN] [ZH]如果没有 meta 信息的话，就不加 |，比如假设这篇文章没写作者，没开阅读时间，甚至没写日期（比较少见），那么前面是空的，这时候如果还加上分隔符 |，就会变成
| Translations: [中文] [English]这样就显得很多余，排版混乱
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：元信息&翻译（三）