从YML中获取数据

时间:2015-02-11 08:11:36

标签: yaml jekyll

Hello Stack Overflow社区,

我想在悬停时添加一个html图标。 这是我的代码:

<div class="country">{% include icons/home/icon-america.html %}</div>

这很好用,但每个悬停时图标必须不同,所以我尝试了这个:

<div class="country">{% include icons/home/icon-{{project.country}}.html %}</div>

这是我的YML:

home:
- {folder: 'thumb_1', name: 'Chaffee', text: 'Hier komt tekst over de chaffee en nog meer', link: 'chaffee.html', country: 'america'}

这不起作用,有没有办法让这项工作? 提前谢谢。

这是我的HTML

  <div class="thumb-container">

        {% for project in site.data.settings.home %}

        <a href="{{project.link}}" class="thumb-unit">

            <div class="backPic" style="background-image:  url(assets/img/home/{{ project.folder}}/thumb.jpg)"></div>
            <h3>{{ project.name}}</h3>
            <p>{{ project.text}}</p>
            <div class="thumb-overlay"></div>
            <div class="country">{% include icons/home/icon-america.html %}</div>

        </a>

        {% endfor %}

    </div>

维姆

1 个答案:

答案 0 :(得分:0)

我通过将svg放在一个单独的文件夹中解决了这个问题,然后像这样链接到它们:

{folder: 'thumb_1', country: 'america', name: 'M24 Chaffee', text: 'Hier komt tekst over de chaffee en nog meer', link: 'chaffee.html'} 

和html一样:

<img src="assets/img/home_icons/{{ project.country}}/icon.svg" alt="" />