在 Hugo Site 中嵌入 Iframe

Question

请原谅可能是重复的问题，其他人的解决方案并没有解决我的问题。我正在开发一个 Hugo 网站并尝试嵌入一个 iframe。该元素显示，但我收到消息“此内容已被阻止”。请联系网站所有者来解决问题。”当它加载时，所以没有人可以看到内容。

这是我的.md信息

+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>

我还通过添加以下内容更新了我的 config.toml 文件：

[markup.goldmark.renderer]
 unsafe = true

我不确定我错过了什么。如果您需要有关我所做工作的更多信息，请告诉我。我也尝试过短代码，但根本不会渲染任何内容（我对短代码还是新手，这就是我嵌入 iframe 的原因）。

感谢您的时间和考虑。

Answer 1

对于那些只想将

iframe

嵌入 Hugo 网站的人，就像问题标题所示：

在下面的示例中，

---

之间的内容称为front Matter，采用 YAML 语法。您可以在此处添加您自己的结构化数据或使用预定义的 Hugo 的前事项字段。文件的其余部分（第二个

---

下方）是标准 Markdown 语法格式的内容。

您不需要在前面的内容中使用 YAML 语法。 Hugo 还支持 TOML 和 JSON 格式（参见文档）

解决方案1：直接在内容中添加HTML

您可以将 HTML 代码本身添加到 Markdown 内容中（如问题中 T.J. 的 .md 文件示例）。 Hugo 的 Markdown 引擎将按原样渲染

iframe

。

---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---

<iframe src="https://example.com/"></iframe>

解决方案 2：自定义简码

您可以实现您的自己的短代码，这在使用某种 CMS 或您想要以某种方式设置 iframe 样式时非常有用。

<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>

然后，您可以将 iframe 添加到 Markdown 文件中的内容中，如下所示：

---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---

{{< iframe https://example.com/ >}}

短代码还允许您创建命名属性，因此您可以使用像

{{< iframe url="https://example.com/" >}}

这样的短代码。此解决方案的好处是您可以自由设置使用 iframe 短代码时将呈现的 HTML 代码。有关更多信息，请参阅简码文档。

解决方案3：使用前面的内容

如果您从预定义的块或组件构建页面，或者页面非常简单，例如您不使用 markdown 内容而仅使用前事项字段，那么您可能会对这个解决方案感兴趣，该解决方案基本上只使用用于存储

iframe

的 URL 或您想要在 HTML 渲染期间使用的其他设置的前文。

---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---

在布局文件中，您将使用

{{ .Params.iframe }}

获得此信息。