Hugo中自动生成的页面

时间:2017-01-29 09:38:15

标签: html generator middleman hugo

是否可以从Hugo的数据文件中自动生成页面,就像在Middleman中一样?我有一个yaml文件cars.yml,如下所示:

---
- name: "Ford"
  color: "blue"
- name: "Cadillac"
  color: "pink"

并且希望基于预定义的模板为数据文件中的每个汽车记录自动生成单独的页面。我怎么能这样做?

2 个答案:

答案 0 :(得分:1)

沿着documentation的路线,我通过以下步骤获得了MVP:

  1. 安装了一个测试Hugo网站hugo new site carsite
  2. 根文件夹已有/data/个文件夹,我在那里创建了cars子文件夹。
  3. carsite/data/cars会将每辆车作为单独的文件存放。这与您最初将它们放在列表中的计划不同,但每个单车方法的单文件更好(版本控制,维护,不易出错,因为错误的.yml将被单独标记,而不是整体数据文件)。 / LI>
  4. /data/文件夹中创建内容文件:

    ford.yml

    Name: "Ford"
    Color: "Blue"
    

    cadillac.yml

    Name: "Cadillac"
    Color: "Pink"
    
  5. 创建一个部分来设置汽车列表的样式:

    carsite/themes/<your theme name>/layouts/partials/car_listing.html

    <li>{{ .Name }} in {{ .Color }}</li>
    
  6. 调用文件中的循环或Go术语范围数据文件,负责您选择的位置。例如,让我们在主页上输出它,该主页由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)...
    
  7. 以下是我的观看方式(ghostwriter模板):

    Hugo Data files-driven pages

    如果您坚持将所有文件存放在一个数据文件中,这也应该是可行的,只需查询数据文件和范围即可。此外,如果您选择yml格式,请设置数据文件的正确格式sequence(您建议的数据结构看起来很可疑,因为列表在根中是直的,而是添加一个键,例如{根据前面提到的YML规范{1}}:

    cars:

    carsite/data/cars.yml

答案 1 :(得分:0)

我写了一个简单的JS包装器,该包装器从Hugo中的数据生成页面。 我目前正在使用它从YAML文件生成文章。

kidsil/hugo-data-to-pages