Question

如何在同一帖子中指定两个不同的可渲染对象？

这就是我想要的。我有一个帖子有一些屏幕截图，然后是帖子的主体。

---
layout: post
title: App Thing
---

<-- some screen shots for the top-->
<div>
  <img class="wi5" src="">
  <img class="wi5" src="">
  <img class="wi5" src="">
  <img class="wi5" src="">
  <img class="wi5" src="">
</div>

<-- the main content of the post -->
blah blah blah blah blah

我在帖子布局中渲染它，它将呈现标题和日期。但是，我希望屏幕截图超出时间和日期以及帖子正文：

---
layout: default
---

{{ screenshots }}

<div class="wi-100 mw65 center db ptl">
  <h1 class="">{{ page.title }}</h1>
  <p class=""> {{ page.date | date: "%B %-d, %Y" }}</p>
  <p class="">
    {% if page.author %}
      {{ page.author }}
    {% endif %}
  </p>

  {{ content }}
</div>

任何想法如何做到这一点？我正在使用Github Pages所以我也只限于我可以使用的插件......

Answer 1

Jekyll无法实现两个“内容”区域......只有技巧。

最简单的解决方案（不使用插件）如下：

将图像放入帖子前面的列表中：

---
layout: post
title: App Thing
images:
  - screenshot1.jpg
  - screenshot2.jpg
---

<-- the main content of the post -->
blah blah blah blah blah

在布局文件中，将{{ screenshots }}占位符替换为前面列表中的循环：

---
layout: default
---

{% if page.images %}
    <div>
    {% for image in page.images %}
        <img class="wi5" src="{{ image }}">
    {% endfor %}
    </div>
{% endif %}

<div class="wi-100 mw65 center db ptl">
  <h1 class="">{{ page.title }}</h1>
  <p class=""> {{ page.date | date: "%B %-d, %Y" }}</p>
  <p class="">
    {% if page.author %}
      {{ page.author }}
    {% endif %}
  </p>

  {{ content }}
</div>

然后，带有循环的部分将呈现为以下HTML：

<div>
    <img class="wi5" src="screenshot1.jpg">
    <img class="wi5" src="screenshot2.jpg">
</div>

补充资料：
在我的博客上，我有两篇关于使用Jekyll构建图像库的帖子，没有使用插件。也许这会对你有所帮助：

第二个链接中使用的方法类似于我刚才描述的方法。

编辑：

但是我担心为不同的帖子定制它。一个帖子可能有全景图，另一个帖子可能有10个图像并排。多数民众赞成为什么我喜欢有一个我可以控制的课程的div，但我想要......

如果它只是一些CSS类，你也可以用我的方法做到这一点。

更改前面的内容，以便每个图像都有一个附加属性，在本例中我称之为class：

---
layout: post
title: App Thing
images:
  - url: screenshot1.jpg
    class: wi5
  - url: screenshot2.jpg
    class: whatever
---

<-- the main content of the post -->
blah blah blah blah blah

然后，更改布局文件中的循环：

{% if page.images %}
    <div>
    {% for image in page.images %}
        <img class="{{ image.class }}" src="{{ image.url }}">
    {% endfor %}
    </div>
{% endif %}

生成的HTML：

<div>
    <img class="wi5" src="screenshot1.jpg">
    <img class="whatever" src="screenshot2.jpg">
</div>

这有帮助吗？

如果您需要做更多的事情，可以为每个图像添加更多属性。

每个Jekyll布局的多个内容

1 个答案:

编辑：