Hugo模板简述

发表于 分类于 阅读次数：

语言构成解析

  1. 基础语法
    代码结构 {{ ... }} 属于 Go 模板的标准语法：

    • {{-` 表示删除左侧空白（包括换行符） - `-}} 表示删除右侧空白
    • 逻辑控制：if/else/end、range 等

  2. 函数调用
    or 和 in 是 Hugo 的内置函数：

    1
    2
    {{ in $alt "[no-render]" }} // 检查字符串包含关系
    {{ or 条件1 条件2 }}         // 逻辑"或"操作

  3. 上下文变量
    $alt 和 $title 是 Hugo 在渲染图片时注入的上下文变量：

    • .Destination → 图片 URL
    • .PlainText → 图片的 alt 文本（不含 Markdown 格式）
    • .Title → 图片的 title 属性

文件类型解析

  1. 文件载体
    代码虽然写在 .html 文件中，但实际包含三种语言层：

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 外层：HTML 静态标记 -->
    <div>
      <!-- 内层：Go 模板逻辑 -->
      {{ if eq .Section "posts" }}
        <!-- 深层：Hugo 扩展函数 -->
        {{ partial "header.html" . }}
      {{ end }}
    </div>

  2. 处理阶段

    阶段 处理内容 输出结果
    模板编译 执行 {{ ... }} 内的逻辑 动态生成 HTML 片段
    客户端渲染 浏览器解析最终 HTML 用户可见的静态页面

技术定位

  1. 模板引擎

    • 基础：Go 标准库的 text/template 和 html/template
    • 扩展：Hugo 增加了 100+ 自定义函数（通过 hugo::tpl 包）

  2. 领域特性 

    1
    2
    3
    // 典型的 Hugo 模板函数示例
    {{ partialCached "footer.html" . .Section }} // 局部缓存
    {{ $img := resources.Get "images/header.jpg" | fingerprint }} // 资源处理

类比其他系统

系统 模板语言 语法特征
Hugo Go Template + Hugo 扩展 {{ .Title }}，{{ partial }}
Jekyll Liquid {% if post.featured %}...{% endif %}
Vue 模板语法 <div v-if="show">，{{ message }}
React JSX {items.map(item => <li>{item}</li>)}

调试技巧

通过 Hugo 的调试方法输出变量值：

1
2
3
4
5
{{/* 输出调试信息到控制台 */}}
{{- printf "%#v" .Title | warnf -}}

{{/* 在 HTML 中直接显示变量 */}}
<pre>{{ jsonify (dict "indent" "  ") . }}</pre>