0

我在每个帖子上都有这个 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 但我不知道如何处理它或在谷歌中提出什么问题。我希望你们中的一个人能指出我正确的方向。

4

1 回答 1

0

我认为你有两个机会这样做。您要么在单独的或相同的 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 中出现丑陋的异常。

于 2018-08-11T22:17:55.883 回答