Question

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

每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>

经过多次尝试，我现在陷入了困境。有人能指出我的错误在哪里吗？

Answer 1

两件事：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变量获取正确的数据。

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

与杰基尔一起旅行。

Answer 2

组：日：

标题：＆＃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;

试试这个

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

2 个答案:

错误

重构

1 - 数据

2 - 旅游页面

3 - 显示模板