Hugo：结合数据范围和短代码

Question

Hugo 有一个 YouTube 短代码。我想将它与数据模板结合使用来显示由 JSON 文件内容驱动的视频列表。

理想情况下，在

site/content/index.md

，我会有这样的东西：

# Some YouTube videos
{{ range $.Site.Data.youtube.videos }}
    {{< youtube .id >}}
{{ end }}

在

site/data/youtube.yml

中，我会有这样的东西：

---
videos:
- id: abc123
- id: xyz456

这样我在

.yml

文件中列出的每个视频 ID 都会在我的主页上呈现为嵌入的 YouTube 视频。

这里的问题是我似乎无法在

range

文件中使用像

.md

这样的hugo函数。当我尝试此操作时，第一个代码片段只是呈现为文本，而不是替换为 YouTube 视频：

很公平，让我们将代码提取到位于

site/layouts/partials/youtube-list.html

中的部分代码中：

{{ range $.Site.Data.youtube.videos }}
    {{< youtube .id >}}
{{ end }} 

然后我们将修改

site/content/index.md

以引用部分：

# Some YouTube Videos
{{ partial "youtube-list.html" . }}

现在，当我尝试运行服务器时，Hugo 告诉我不能在部分中使用

<

字符：

ERROR 2018/01/05 11:30:33 partials/youtube-list.html : template: partials/youtube-list.html:2: unexpected "<" in command

太棒了。我想我可以创建一个自定义短代码，但它们似乎具有相同的限制 - 一个短代码无法引用另一个短代码：

ERROR 2018/01/05 11:32:39 shortcodes/youtube-list.html : template: shortcodes/youtube-list.html:3: unexpected "<" in command

我想我可以在 Hugo 的 GitHub 存储库中找到 YouTube 短代码的源代码，并批量“借用”它以在我的新短代码中使用，但这似乎是不必要的代码重复。

tl;dr: 有没有办法在 Hugo 中组合数据模板和短代码，以便使用相同的短代码来渲染从数据模板读取的列表中的每个元素？

Answer 1

无法按照您尝试设置的方式从您的部分中访问短代码。

替代方案

Hugo 允许您从短代码中调用部分代码，正如您所提到的。尽管设置并不完全是您尝试布置它们的方式，但您可以创建可重用的部分组件，这些组件将采用 $.Params 并允许接近您想要完成的任务。

• 允许短代码调用任何短代码可访问的部分组件以实现可重用性
• 每个部分组件都可以作为布局中独立的可重用短代码或模板

为部分组件创建一个位置。在此示例中使用

layouts/partials/component

像在短代码中一样制作 YouTube 视频模板，但使用传递的 $.Params 作为组件的上下文。我们将在下面的示例中看到这一点。

layouts/partials/component/youtube.html

<div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ .id }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

创建简码

layouts/shortcodes/youtube-sc.html

{{ if .IsNamedParams }}
{{- partial "component/youtube" $.Params -}}
{{- end -}}

从 Front Matter Markdown 中调用短代码

content/example.md

:

---
title: Youtube example
---

{{< youtube-sc id="2xkNJL4gJ9E" >}}

在列表短代码中重用

layouts/partials/youtube.html

组件：

layouts/shortcodes/youtube-list.html

{{ if .IsNamedParams }}
  {{ $data := index $.Site.Data.youtube $.Params.data }}
  {{ range $data }}
    <h2>Video is {{ .id }}</h2>
    {{ partial "component/youtube" . }}
  {{ end }}
{{- end -}}

从 Front Matter Markdown 中调用短代码

content/example.md

:

---
title: Youtube List Example
---

{{< youtube-list data="videos" >}}

数据可以包含多个列表，并根据您想要的视频列表进行调用

{{< youtube-list data="others" >}}

使用：

---
videos:
- id: 2xkNJL4gJ9E
- id: FyPgSuwIMWQ
others:
- id: ut1xtRZ1QOA
- id: sB0HLHjgQ7E

注意： 此示例假设在您的短代码中使用

NamedParams

以使其更清晰。您也可以将数据添加到

data

对象，并将其传递到短代码的命名参数中。

Answer 2

可以使用内联短代码:)

<!-- post.md -->

{{< my_shortcode.inline >}}

<pre>
{{ range $index, $element := .Site.Params }}
  {{ $index }} : {{ $element }}
{{ end }}
</pre>

{{< /my_shortcode.inline >}}

在 Hugo 的 discourse 页面上找到