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文件中列出的每个视频is都会在我的主页上呈现为一个嵌入式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的YouTube存储库中找到GitHub短代码的源代码，并大量“借用”它，以便在我的新的短代码中使用，但这似乎是不必要的代码复制。
tl;dr:有没有办法将Hugo中的数据模板和短代码组合起来，以便使用相同的短代码来呈现从数据模板读取的列表中的每个元素？
回答 1
Stack Overflow用户
发布于 2018-01-14 20:46:32
您将不可能以您试图设置的方式从您的部分中访问一个短代码。
替代方案
雨果允许你打电话从你的短代码，如你已经提到的部分。虽然设置并不完全是您想要的方式，但您可以创建可重用的部分组件，这些组件将使用$.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对象添加数据，并将其传递到短代码的命名params中。
https://stackoverflow.com/questions/48117775
复制相似问题
腾讯云开发者
