为覆盖整个网站的标签分配一个很棒的字体图标

Question

我在每个 post:

上都有这个 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 %}

现在我的问题来了。我想要完成的是手动将字体真棒图标 link 分配给标签。当在 YAML front matter 中填写一个或多个标签时，我希望 said font awesome link 随附。但我不知道该怎么做。我对 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

在您的模板中，您会得到很棒的字体图标 class 名称，如下所示：

// ... 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] }} 按键解析您的 class 名称（给定标签）

示例 2

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

在您的模板中，您会得到很棒的字体图标 class 名称，如下所示：

{% 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 %}

如果没有提供图标，请不要忘记考虑回退。我不确定您使用的是哪种技术，这就是为什么我的所有代码都是伪造的。但是，您应该确保回退到默认的 class 也许 - 或者至少在某种程度上防止 HTML.

中出现难看的异常

为覆盖整个网站的标签分配一个很棒的字体图标

Assign a font awesome icon to a tag that covers the entire website

jekyll

yaml-front-matter

示例 1

示例 2