如何在jekyll中访问数据文件夹中的子文件夹yaml文件?

时间:2014-10-30 10:44:13

标签: html jekyll

我现在正在建立一个小型旅游公司网站。 我想描述每个特定旅行的活动 -

每3天必须在span-4类的div中包装如下:

<div class ="span-4">

    <h3>Day 1</h3>
    <h4>Departure and arrival</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>

    <h3>Day 1</h3>
    <h4>Departure and arrival</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>

    <h3>Day 1</h3>
    <h4>Departure and arrival</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>

</div>

我在yml文件中使用数据文件夹和循环:

 {% for groups in site.data.tak-lampang %}
  <div class="span-4">
     {% for d in groups.day %}
       <h3>{{d.title }}</h3>
       <h2 class ="fi-marker">{{ d.direction }}</h2>
       <p>{{ d.description }}</p>
     {% endfor %}
  </div>
{% endfor %}

我的yml文件看起来像这样

- groups: 
    day:
       - title: "Day 1"
         direction: "A-B" 
         description: "Lorem ipsum......"
    day:    
       - title: "Day 2"
         direction: "B-C"
         description:"Lorem ipsum....."
    day:
       - title: "Day 3"
         direction: "C-D"
         description: "Lorem ipsum ...."

我的输出是

<div class ="span-4">
    <h3>Day 3</h3>
    <h4>C-D</h4>
    <p>Lorem ipsum...</p>
</div>
经过多次尝试,我现在陷入了困境。 有人能指出我的错误在哪里吗?

2 个答案:

答案 0 :(得分:2)

两件事:yaml数据文件中的错误和小的重构

错误

您将三次值分配给同一个键:

- groups: 
    day:
       - title: "Day 1"
         direction: "A-B" 
         description: "Lorem ipsum......"
    day:    
       - title: "Day 2"
         direction: "B-C"
         description:"Lorem ipsum....."
    day:
       - title: "Day 3"
         direction: "C-D"
         description: "Lorem ipsum ...."

groups.day只能有一个值,在这种情况下是第3天。

正确组织数据文件可以是:

groups:
    days:
        - title:       "Day 1"
          direction:   "A-B"
          description: "Lorem ipsum......"

        - title:       "Day 2"
          direction:   "B-C"
          description: "Lorem ipsum....."

        - title: "Day 3"
          direction: "C-D"
          description: "Lorem ipsum ...."

重构

在你的循环中,你做{% for groups in site.data.tak-lampang %}。这意味着您必须为每个目标复制代码。如果有一天你想改变你的html,你将不得不在每个文件中更改它。

最好将其抽象为包含模板。

1 - 数据

您的数据文件是tak-lampang.yml。见上面的代码。

2 - 旅游页面

旅游页面为tak-lampang.html或您想要的任何内容。它包含:

---
title: Tak Lampang dream tour
layout: default
dataFile: tak-lampang
---

{% include destinationDisplay.html %}

就是这样!

3 - 显示模板

现在显示模板_includes/destinationDisplay.html

<div class="span-4">
{% for day in site.data[page.dataFile].groups.days %}
    <h3>{{day.title }}</h3>
    <h2 class ="fi-marker">{{ day.direction }}</h2>
    <p>{{ day.description }}</p>
{% endfor %}
</div>

请注意site.data[page.dataFile].groups.days根据page.dataFile中的tak-lampang.html变量获取正确的数据。

您现在可以在一个文件中更改显示代码,这对维护很有用; - )。

与杰基尔一起旅行。

答案 1 :(得分:0)

组:日:

标题:&#34;第1天和第34天;方向:&#34; A-B&#34;描述:&#34; Lorem ipsum ......&#34;

标题:&#34;第2天&#34;方向:&#34; B-C&#34;描述:&#34; Lorem ipsum .....&#34;

标题:&#34;第3天和第34天;方向:&#34; C-D&#34;描述:&#34; Lorem ipsum ....&#34;

试试这个