101、【Ubuntu】【Hugo】搭建私人博客：元信息&翻译（二）

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

背景

分析了 <svg> 标签里面的剩余属性，以及 .Description 显示，.Param hideMeta 判断，下面继续分析下 translation_list.html

搭建私人博客

translation_list.html 的整体内容如下：

go 复制代码

{{- if .IsTranslated -}}
{{- if (ne .Layout "search") }}
{{- if or .Params.author site.Params.author (.Param "ShowReadingTime") (not .Date.IsZero) }}&nbsp;|&nbsp;{{- 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，比如目录结构是这样

text 复制代码

content/
├── en/posts/hello.md
└── zh/posts/hello.md

en 和 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

接下来这个有点长

bash 复制代码

{{- if or .Params.author site.Params.author (.Param "ShowReadingTime") (not .Date.IsZero) }}&nbsp;|&nbsp;{{- end -}}
<span>{{- i18n "translations" | default "Translations" }}:</span>

注意，这行里面的 | 单纯就是个分隔符，不是什么管道语法，因为这个 | 字符是单独出现在 {``{- ... -}} 外面的，之前 blog 介绍过，只有在 {``{- ... -}} 里面才使用 Go 模板语法，这一行需要结合下一行  来看

先说  这里的内容吧， 是 HTML 中一个非常基础常用的标签，其作用是给一段文本或行内内容打个包裹，方便加样式，加行为等，但又不会影响排版结构，这里的文本就是 Translations，举个例子，下面这么一段文字

html 复制代码

今天天气很好，适合出门

如果想把【很好】这两个字标红，但又不希望换行，不希望像标题那样独占一行，这个时候就可以用  给这俩字给包裹上

html 复制代码

今天天气 <span style="color: red;">很好</span>，适合出门

这样【很好】俩字变红了，但整句话还是在同一行，没有任何布局变化， 的核心特点就是

作为行内元素，不会强制换行，和其他文字在同一行显式
无默认样式，浏览器不会给里面的元素加粗，变色，留白等
纯粹是容器，本身没有语义，只为了包裹内容，方便后续操作

OK，那么就知道分隔符 | 后面是 Translation: 这么一个文本了，那么这一行

go 复制代码

{{- if or .Params.author site.Params.author (.Param "ShowReadingTime") (not .Date.IsZero) }}&nbsp;|&nbsp;{{- end -}}

的整体作用就是在文本 Translations: 前面加一个 | 分隔符，但仅当页面已经有其他 meta 信息时才加，这些 meta 信息包括

.Param.author：文章 front matter 里写了作者
site.Params.author：或者 hugo.toml 全局配置了默认作者
.Param "ShowReadingTime"：启用了阅读时长显示
.Date.IsZero：文章有有效发布日期（非零值）

这些元信息只要有一个的话，就加上分隔符 |，和后面的 Translations 文本隔开，可以让排版更美观，比如原本元信息是

bash 复制代码

By Alice · 3 min read

就上翻译后就变成

bash 复制代码

By Alice · 3 min read | Translations: [EN] [ZH]

如果没有 meta 信息的话，就不加 |，比如假设这篇文章没写作者，没开阅读时间，甚至没写日期（比较少见），那么前面是空的，这时候如果还加上分隔符 |，就会变成

bash 复制代码

| Translations: [中文] [English]

这样就显得很多余，排版混乱

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