语言构成解析

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

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

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

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

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

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

文件类型解析

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

   <!-- 外层：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. 领域特性

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

类比其他系统

调试技巧

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

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

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