如何在Hugo文章中嵌入本地HTML文件？文件位置与代码细节解惑

方案一：直接放置静态资源（适合简单场景） #

资源放置位置 #

Hugo 的静态资源默认存放在项目根目录的 static 文件夹下，你提到的「program 文件夹」（可自定义命名）需要放在这个 static 目录内，示例目录结构：

你的Hugo项目根目录/
├─ static/
│  └─ iframe_resources/       # 自定义存放iframe用HTML的文件夹
│     ├─ demo_page.html       # 要嵌入的本地HTML文件
│     └─ nested_folder/       # 支持嵌套子文件夹
│        └─ sub_demo.html

文章中嵌入iframe的写法 #

在 Markdown 文章里直接写 iframe 标签，路径使用相对网站根目录的地址：

<iframe src="/iframe_resources/demo_page.html" width="100%" height="600px" frameborder="0"></iframe>

<!-- 嵌入子文件夹内的HTML文件 -->
<iframe src="/iframe_resources/nested_folder/sub_demo.html" width="100%" height="600px" frameborder="0"></iframe>

Hugo 构建时会自动将 static 下的文件复制到网站根目录，访问时路径完全匹配。

方案二：使用Hugo资源管道（适合需资源处理的场景） #

代码放置位置：短代码（复用性更强） #

1. 在 Hugo 项目的 layouts/shortcodes 目录下新建 local-iframe.html 短代码文件，内容如下：

{{- $assetRoot := "iframe_assets" -}} <!-- 对应content/assets下的资源根目录 -->
{{- $targetPath := .Get "src" -}}
{{- $targetAsset := resources.Get (printf "%s/%s" $assetRoot $targetPath) -}}
{{- if $targetAsset -}}
<iframe src="{{ $targetAsset.RelPermalink }}" width="{{ .Get "width" | default "100%" }}" height="{{ .Get "height" | default "600px" }}" frameborder="0"></iframe>
{{- else -}}
<p>未找到指定HTML文件：{{ $targetPath }}</p>
{{- end -}}

2. 资源放置位置：将需嵌入的 HTML 文件放在项目根目录的 content/assets/iframe_assets 下，支持子文件夹嵌套：

你的Hugo项目根目录/
├─ content/
│  └─ assets/
│     └─ iframe_assets/
│        ├─ demo1.html
│        └─ sub_dir/
│           └─ demo2.html

在Markdown文章中调用短代码 #

直接在文章内使用短代码，src 参数可包含子文件夹路径：

{{< local-iframe src="demo1.html" >}}

<!-- 调用子文件夹内的HTML -->
{{< local-iframe src="sub_dir/demo2.html" width="85%" height="550px" >}}

关于target_asset_name的说明 #

这里的 $targetPath（对应你提到的 target_asset_name）完全支持包含 iframe_assets 下的子文件夹路径，比如示例中的 sub_dir/demo2.html，Hugo 资源管道会自动定位到对应文件。

内容的提问来源于stack exchange，提问作者user25482