我现在正在建立一个小型旅游公司网站。 我想描述每个特定旅行的活动 -
每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>
经过多次尝试,我现在陷入了困境。
有人能指出我的错误在哪里吗?
答案 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,你将不得不在每个文件中更改它。
最好将其抽象为包含模板。
您的数据文件是tak-lampang.yml
。见上面的代码。
旅游页面为tak-lampang.html
或您想要的任何内容。它包含:
---
title: Tak Lampang dream tour
layout: default
dataFile: tak-lampang
---
{% include destinationDisplay.html %}
就是这样!
现在显示模板_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;
试试这个