Question

我在每篇文章中都谈到了YAML的前题：

---
title:       Title
subtitle:    Description
date:        2017-09-26 13:15:18 +0200
post-type:   front-end

tages:
 - HTML
 - CSS
 - jQuery
---

我有这段代码可以显示列表中的每个标签。

{% for tag in page.tags %}
    <a class="btn btn-primary" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }}</a>
{% endfor %}

现在，我想通过添加以下内容在每个标签内添加超棒的字体图标：

<span class="badge badge-light"><i class="fab fa-..."></i>

像这样：

{% for tag in page.tags %}
    <a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }} <span class="badge badge-light"><i class="fab fa-github"></i></span></a>
{% endfor %}

现在这是我的问题。我要完成的是手动将字体真棒图标链接分配给标签。当在YAML前端填写一个或多个标签时，我希望它附带说很棒的字体链接。但是我不知道如何去做。我对Jekyll有点陌生。

我的第一个想法是以某种方式使用config.yml，但我又不知道如何处理它或在Google中提出什么问题。我希望你们中的一个能指出正确的方向。

Answer 1

我认为您有两次这样做的机会。您可以使用将标签映射到图标的单独或相同的Yaml中的键值对，或者使用描述标签和图标的项目类型使标签列表更复杂。我将为您简要介绍我尝试解释的内容。

样本1

post.yaml

tags:
- HTML
- CSS
- jQuery

mapping.yaml （必须由您的代码解析的单独文件，根据需要命名）

tags:
  HTML: fa-html
  CSS: fa-css
  jQuery: fa-js

在模板中，您将获得字体真棒图标类名称，如下所示：

// ... load mapping yaml somewhere over here into `mapping` variable
{% for tag in page.tags %}
  <a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }} <span class="badge badge-light"><i class="fab {{ mapping.tags[tag] }}"></i></span></a>
{% endfor %}

{{ mapping.tags[tag] }}通过键（给出标签）解析您的班级名称

示例2

tags:
- name: HTML
  icon: fa-html
- name: CSS
  icon: fa-css
- name: jQuery
  icon: fa-js

在模板中，您将获得字体真棒图标类名称，如下所示：

{% for tag in page.tags %}
  <a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag.name | slugify }}" rel="tag">{{ tag.name }} <span class="badge badge-light"><i class="fab tag.icon }}"></i></span></a>
{% endfor %}

如果没有提供图标，请不要忘记考虑后备。我不确定您使用的是哪种技术，这就是为什么我的所有代码都是伪的。但是，您应该确保回退到默认类，或者至少在某种程度上防止HTML内出现难看的异常。

为涵盖整个网站的标签分配超酷的字体图标

1 个答案:

样本1

示例2