2

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 中组合数据模板和简码，以便使用相同的简码来呈现从数据模板读取的列表中的每个元素？

4

1 回答 1

2

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

选择

正如您所提到的，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对象中，并将其传递到短代码的命名参数中。

于 2018-01-14T20:46:32.250 回答