我可以在 jekyll 的 yml 数据文件中使用 svg（代码或文件）或图像吗？答案

【问题标题】：Can I use svg – code or file – or images in yml data files in jekyll?我可以在 jekyll 的 yml 数据文件中使用 svg（代码或文件）或图像吗？
【发布时间】：2022-08-15 07:21:02
【问题描述】：

我有一个从数据文件中提取数据的循环。我想要它拉动的东西之一是一个图标，无论是 svg 代码或文件，还是一个图像文件，任何可行的。

数据文件example.yml：

- title: Lorem title
  description: Lorem description 
  icon: [icon code or file?]

循环示例：

{% for item in site.data.example %}
<span>{{ item.icon }}</span>
<h3>{{ item.title }}</h3>
<p>{{ item.description</p>
{% endfor %}

这能以某种方式工作吗？

标签： jekyll

【解决方案1】：

你可以引入一个类型：

- title: Lorem title
  description: Lorem description 
  icon:
    type: icon
    name: nature_people
- title: Lorem title
  description: Lorem description 
  icon:
    type: image
    image_path: /uploads/my-icon.png
    alt: An example icon
- title: Lorem title
  description: Lorem description 
  icon:
    type: svg
    value: >-
      <svg>
        <!-- The SVG elements -->
      </svg>

然后在模板中使用条件：

{% for item in site.data.example %}
  {% if item.icon.type == 'icon' %}
    <i class="material-icons">{{ item.icon.name }}</span>
  {% elsif item.icon.type == 'image' %}
    <img src="{{ item.icon.image_path }}" alt="{{ item.icon.alt }}">
  {% else %}
    {{ item.icon.value }}
  {% end %}

  <h3>{{ item.title }}</h3>
  <p>{{ item.description</p>
{% endfor %}

这确实假设始终设置图标。

【讨论】：

我会试试这个。我尝试将 svg 代码放入数据文件行之一，但它没有用。您的示例是否有效，因为它专门设置为“值”？它是否有效，因为它嵌套在“图标”中？它是否因为两者一起使用而起作用？
最有可能的是，您需要正确引用该值，以便它是有效的 YAML。如果是，则问题可能出在您使用该值时。不看很难知道。除了引用模板中的值之外，使用的嵌套和名称不会影响它。
YAML 文件中的 SVG 代码是否必须全部在一行中才能使 YAML 文件在 Jekyll 中正常运行？