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短代码的来源，并且＆＃34;借用＆＃34;它批发用于我的新短代码，但这似乎是不必要的重复代码。

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 -}}

从前端降价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 -}}

从前端降价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

您可以在YouTube中创建播放列表并将其嵌入。