【问题标题】:Cant access custom Front Matter variables无法访问自定义 Front Matter 变量
【发布时间】:2020-02-19 01:17:01
【问题描述】:

我正在创建我的第一个 Jekyll(使用 4.0.0 版)驱动的站点。问题是 Front Matter 中的变量无法识别。

_includes 中的 HTML (writing-post-featured-image.html)

<figure>
    <img class="feat-img" src="{{ site.baseurl }}/assets/images/{{ include.images }}" alt="{{ include.alt | default: 'lorem ipsum' }}" />
    <figcaption>{{ include.caption }}</figcaption>
</figure>

在 _layout 中具有基于文本的帖子页面的布局 (writings-post.html)

{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}

最后,在 .md 文件中(_posts 下)以下 Front Matter

layout: writings-post
title: my title
permalink: /writings/:title
featured-image: photo.jpg
featured-image-alt: about photo
caption: photo caption

输出为空

<figure>
    <img class="feat-img" src="" alt="lorem ipsum" />
    <figcaption></figcaption>
</figure>

请帮助理解为什么会这样。提前致谢。

【问题讨论】:

    标签: html jekyll liquid kramdown yaml-front-matter


    【解决方案1】:

    你的语法不正确。

    1.) 作为您从页面传递的变量,您的包含标记应如下所示:

     {% include writing-post-featured-image.html 
        image=page.featured-image 
        alt=page.featured-image-alt 
        caption=page.caption %}
    

    2.) 在您的包含中,include.images 存在语法问题,应该是 include.image

    注意:当您传递现有变量(不是计算变量)时,您可以跳过将它们传递给您的包含,因为在包含中您可以看到页面的变量。

     {% include writing-post-featured-image.html %}
    

    你的包括:

    <figure>
        <img class="feat-img" 
             src="{{ site.baseurl }}/assets/images/{{ page.featured-image }}" 
             alt="{{ page.featured-image | default: 'lorem ipsum' }}" />
        <figcaption>{{ page.caption }}</figcaption>
    </figure>
    

    【讨论】:

      【解决方案2】:

      帖子页面上的正确语法是:

      {% include writing-post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}
      

      注意page. 语法,而不是post. 语法。然而,当你的布局中有一个循环时,你可以使用这个:

      {% for post in site.posts %}
        {% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
      {% endfor %}
      

      【讨论】:

        猜你喜欢
        • 2012-04-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-08-07
        • 2017-06-19
        • 2014-03-21
        • 2014-04-18
        • 1970-01-01
        相关资源
        最近更新 更多