Hugo 中自动生成的页面
Auto-generated pages in Hugo
是否可以像 Middleman 那样在 Hugo 中从数据文件自动生成页面?我有一个 yaml 文件 cars.yml
,它看起来像这样:
---
- name: "Ford"
color: "blue"
- name: "Cadillac"
color: "pink"
并希望根据预定义模板为数据文件中的每条汽车记录自动生成一个单独的页面。我该怎么做?
按照 documentation 的思路,我通过以下步骤获得了 MVP:
- 安装了一个测试 Hugo 站点,
hugo new site carsite
。
- 根文件夹已有
/data/
文件夹,我在那里创建了 cars
子文件夹。
carsite/data/cars
会将每辆车保存为一个单独的文件。这与您最初将它们放在列表中的计划不同,但是 one-file 每个 one-car 方法更好(版本控制,维护,更少 error-prone 因为错误的 .yml 将被单独标记,而不是单体数据文件)。
在 /data/
文件夹中创建内容文件:
ford.yml
:
Name: "Ford"
Color: "Blue"
和
cadillac.yml
:
Name: "Cadillac"
Color: "Pink"
创建局部样式以设置汽车列表的样式:
carsite/themes/<your theme name>/layouts/partials/car_listing.html
<li>{{ .Name }} in {{ .Color }}</li>
调用循环,或者用 Go 术语来说,range data files 文件中,负责你选择的位置。比如我们在首页输出,由carsite/themes/<theme name>/layouts/index.html
控制:
...(existing header.html partial and so on)...
<ul>
{{ range $.Site.Data.cars }}
{{ partial "car_listing.html" . }}
{{ end }}
</ul>
...(existing footer.html partial and so on)...
这是它在我的(ghostwriter 模板)上的样子:
如果您坚持将所有文件放在一个数据文件中,那应该也是可行的,只需查询数据文件和范围 它。此外,如果您选择 yml
格式,请设置数据文件的正确格式 sequence(您建议的数据结构看起来很可疑,因为列表直接位于根目录中,而不是添加一个键,例如 cars:
根据上述 YML 规范):
carsite/data/cars.yml
cars:
- Name: Ford
Color: Blue
- Name: Cadillac
Color: Pink
我写了一个简单的 JS-wrapper 从 Hugo 中的数据生成页面。
我目前正在使用它从 YAML 文件生成文章。
是否可以像 Middleman 那样在 Hugo 中从数据文件自动生成页面?我有一个 yaml 文件 cars.yml
,它看起来像这样:
---
- name: "Ford"
color: "blue"
- name: "Cadillac"
color: "pink"
并希望根据预定义模板为数据文件中的每条汽车记录自动生成一个单独的页面。我该怎么做?
按照 documentation 的思路,我通过以下步骤获得了 MVP:
- 安装了一个测试 Hugo 站点,
hugo new site carsite
。 - 根文件夹已有
/data/
文件夹,我在那里创建了cars
子文件夹。 carsite/data/cars
会将每辆车保存为一个单独的文件。这与您最初将它们放在列表中的计划不同,但是 one-file 每个 one-car 方法更好(版本控制,维护,更少 error-prone 因为错误的 .yml 将被单独标记,而不是单体数据文件)。在
/data/
文件夹中创建内容文件:ford.yml
:Name: "Ford" Color: "Blue"
和
cadillac.yml
:Name: "Cadillac" Color: "Pink"
创建局部样式以设置汽车列表的样式:
carsite/themes/<your theme name>/layouts/partials/car_listing.html
<li>{{ .Name }} in {{ .Color }}</li>
调用循环,或者用 Go 术语来说,range data files 文件中,负责你选择的位置。比如我们在首页输出,由
carsite/themes/<theme name>/layouts/index.html
控制:...(existing header.html partial and so on)... <ul> {{ range $.Site.Data.cars }} {{ partial "car_listing.html" . }} {{ end }} </ul> ...(existing footer.html partial and so on)...
这是它在我的(ghostwriter 模板)上的样子:
如果您坚持将所有文件放在一个数据文件中,那应该也是可行的,只需查询数据文件和范围 它。此外,如果您选择 yml
格式,请设置数据文件的正确格式 sequence(您建议的数据结构看起来很可疑,因为列表直接位于根目录中,而不是添加一个键,例如 cars:
根据上述 YML 规范):
carsite/data/cars.yml
cars:
- Name: Ford
Color: Blue
- Name: Cadillac
Color: Pink
我写了一个简单的 JS-wrapper 从 Hugo 中的数据生成页面。 我目前正在使用它从 YAML 文件生成文章。