Hugo:结合数据范围和简码

Question

雨果有一个 YouTube shortcode 。我想将它与 data templates 结合使用，以显示由 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对象，并将其也传递到短代码的命名参数中。