访问集合文档中的自定义前端变量答案

【问题标题】：Accessing custom front matter variable in collection documents访问集合文档中的自定义前端变量
【发布时间】：2017-06-11 08:25:50
【问题描述】：

我在集合coding中有一个 Jekyll 集合文档：

---
title: 'iOS iConify'
rawname: iosiconify
image: {{site.img}}/z-iosiconify.png
layout: post
link: https://iosiconify.github.io/
---

Hi!

我正在尝试在 html 页面上呈现集合 coding 中的所有文档，并且我有以下代码：

  {% for post in site.coding %}
    <tr id="{{ post.rawname }}-desktop">
        <td id="left">
            <a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
                <img src="{{ post.image }}">
            </a>
        </td>
        <td id="right">
            <h2>{{ post.title }}</h2>
            <h4>{{ post.content }}</h4>
        </td>
    </tr>
    {% endfor %}

我在其中引用了很多我的自定义前端变量，例如{{ post.rawname }}。但是，当页面构建时，唯一有效的部分是 {{ post.content }}。

这是呈现的 HTML：

                    <tr id="-desktop">
                        <td id="left">
                            <a href="" target="blank" id="-desktop-a">
                                <img src="">
                            </a>
                        </td>
                        <td id="right">
                            <h2></h2>
                            <h4><p>Hi!</p>
</h4>
                        </td>
                    </tr>

您知道为什么所有自定义前端变量都不起作用以及如何使它们起作用吗？

【问题讨论】：

标签： html jekyll liquid

【解决方案1】：

Front-matter 中有一个错误，导致 Jekyll 无法正确处理它，只显示内容。

这一行image: {{site.img}}/z-iosiconify.png 应该是image: z-iosiconify.png。

然后在显示文档时添加site.img，例如{{ post.image | prepend: site.img }}.e.g.：

{% for post in site.coding %}
<tr id="{{ post.rawname }}-desktop">
    <td id="left">
        <a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
            <img src="{{ post.image | prepend: site.img }}">
        </a>
    </td>
    <td id="right">
        <h2>{{ post.title }}</h2>
        <h4>{{ post.content }}</h4>
    </td>
</tr>
{% endfor %}

【讨论】：