如何在 Hugo HTML 短代码中正确嵌入并渲染多行 Markdown 变量-html教程-PHP中文网

如何在 Hugo HTML 短代码中正确嵌入并渲染多行 Markdown 变量

本文讲解如何在 Hugo 的自定义 HTML 短代码中，安全、原生地嵌入用户提供的多行 Markdown 内容（如人物简介），并通过 markdownify 或 renderString 函数实现语法高亮、列表、粗体等标准 Markdown 渲染效果。

本文讲解如何在 hugo 的自定义 html 短代码中，安全、原生地嵌入用户提供的多行 markdown 内容（如人物简介），并通过 `markdownify` 或 `renderstring` 函数实现语法高亮、列表、粗体等标准 markdown 渲染效果。

在 Hugo 中，直接将含换行符和 Markdown 语法的字符串（如 bio="Here are some achievements\n- First thing\n- and this is **really** important"）传入 .Get "bio" 后，HTML 短代码默认仅作纯文本输出——换行被忽略，**bold** 不转义为，列表项也丢失语义。根本原因在于：Hugo 短代码接收的参数是原始字符串，不会自动解析 Markdown。

✅ 正确做法分两步：

1. 前端：使用 YAML 多行语法定义变量（推荐）
在内容文件（如 person.md）中，避免用双引号包裹多行文本，改用 YAML 管道符（|）语法，确保换行与格式完整保留：

---
name: "Alice Chen"
title: "Senior Researcher"
img: "/images/alice.jpg"
bio: |
  Here are some achievements:
  - First thing
  - List item
  - and this is **really** important
---

⚠️ 注意：| 后需换行，且缩进必须统一（建议 2 空格），否则 YAML 解析失败。

2. 短代码：用 markdownify 渲染变量
修改你的 layouts/shortcodes/person-table.html（或对应名称），将 {{ .Get "bio" }} 替换为 {{ .Get "bio" | markdownify }}：

@@##@@	{{ .Get "name" }}, {{ .Get "title" }}
	{{ .Get "bio" \| markdownify }}

✅ 效果：bio 中的 **really** → really，- List item →

List item

，换行自动转为和

，完全符合预期。

? 进阶选项：若需更精细控制（如启用脚注、数学公式或自定义渲染器），可使用 renderString（Hugo ≥ 0.115）：

OpenClaw Skill: Obsidian Markdown to Cloudflare Pages

将选定的 Obsidian 笔记发布为静态站点并部署到 Cloudflare Pages。

下载

{{ .Page.RenderString (printf "%s" (.Get "bio")) }}

它会调用当前页面的渲染管道，继承 markup 配置（如 goldmark 扩展），比 markdownify 更灵活。

? 总结：

❌ 不要用 "..." 包裹多行 Markdown；✅ 改用 YAML | 语法；
❌ 不要直接输出 .Get "bio"；✅ 必须通过 | markdownify 或 | $page.RenderString 转义；
✅ 确保 Hugo 版本 ≥ 0.89（markdownify 稳定支持），并检查 config.toml 中 markup.goldmark.extensions 是否启用所需扩展（如 definitionList, footnote）。