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

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

背景

上篇 blog
【Ubuntu】【Hugo】搭建私人博客：搜索功能（三）

分析了 <h1> 标签里面的内容，以及 <svg> 标签里面的具体属性，下面继续

搭建私人博客

上篇 blog 分析了 width，height，viewBox，fill，stroke 属性等，下面继续分析剩下的属性

stroke-width="2"：描边的粗细为 2 个单位（单位是基于 viewBox 坐标系的），因为 viewBox 是 24×24，所以 stroke-width="2" 表示线条占画布高度的约 1/12，渲染到 28px 大小时，实际像素粗细 ≈ (2 / 24) * 28 ≈ 2.33px
stroke-linecap="round"：设置线条端点的样式为圆角，可选值有 butt（平头，默认），round（圆头），square（方头带延伸），圆头看起来更柔和，常用于现代图标
stroke-linejoin="round"：设置线条连接处的样式为圆角，可选值有 miter（尖角，默认），round（圆角），bevel（斜切），对于有转角的图形，比如三角形，折现等，会让拐角更平滑

OK，看下一部分

这里 .Description 是 Hugo 中的一个变量，一般是 Markdown 文件 front matter 中的 description 字段，比如

yaml 复制代码

---
title: "我的文章"
description: "这是一篇关于 Hugo 的教程"
---

这里 if .Description 可以判断 description 字段是否存在且非空

如果页面有描述，就渲染 <div class="post-description">...</div>
如果没有，就完全不输出这段 HTML，避免空 <div> 标签

这样只有文章有描述时，才会显示这段内容，以保持页面干净

OK，继续看下一部分内容：显示 meta info 元信息

.Param "hideMeta"：.Param 是 Hugo 的内置函数，用于从当前页面的 front matter 或 hugo.toml 配置中读取参数，如果发现配置中有参数 hideMeta = true，那么 .Param "hideMeta" 就返回 true
not (.Param "hideMeta")：表示默认显示 meta 信息，除非显式关闭它，因为如果没有配置 hideMeta = true 时，.Param "hideMeta" 返回的是 false，这里取反就是 true
partial "translation_list.html"：这里又涉及到另一个 partial 模板了，在 PaperMod 主题的 layouts/partials/ 路径下

首先从这个 partial 的名字来看，就知道它和翻译有关，并且可能包含其他元信息，比如作者，分类，标签等，在多语言 Hugo 站点中，常用这个 partial 来列出这篇文章还有什么别的语言版本，比如可以增加链接

html 复制代码

<span>Other languages:</span>
<a href="/zh/post/hello/">中文</a> |
<a href="/en/post/hello/">English</a>

效果就是

Other languages:
中文 |
English

这部分的整体逻辑就是

如果没有显示设置 hideMeta: true 去关闭，就默认显示元信息 <div class="post-meta">...</div>
如果设置了 hideMeta: true，就完全隐藏这一块

可以提供灵活控制，比如大多数文章默认显示 meta 信息，但某些特殊页面（比如 about 页面，或者搜索页面）可以隐藏这些元信息起来

其实不只有 search.html 模块有这部分隐藏基因，其他模块比如文章页 single.html 和列表页 list.html 也会有

OK，下面来看下 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 -}}

整体可以看出来，这个 translation_list 模块的核心作用正如同其名字的表述（list translation 列出翻译）：当一篇文章有其他语言版本时，在页面上列出这些语言的链接，方便用户切换语言

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：元信息&翻译（二）