Question

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>

维姆

Answer 1

我通过将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="" />

从YML中获取数据

1 个答案: