每个 Jekyll 布局有多个内容

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 来说是不可能的……只有技巧。

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

1. 将图片放入帖子前面的列表中：

   ---
   layout: post
   title: App Thing
   images:
     - screenshot1.jpg
     - screenshot2.jpg
   ---
   
   <-- the main content of the post -->
   blah blah blah blah blah
   

2. 在布局文件中，将 {{ 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 构建图像库的文章。也许这会对你有所帮助：

• Generating an image gallery with Jekyll and Lightbox2
• Jekyll / Lightbox2 image gallery, another approach

第二个链接中使用的方法与我刚刚在此处描述的方法相似。

---

编辑：

但我担心为不同的帖子定制它。一个帖子可能有全景图，另一个帖子可能有 10 张并排的图像。这就是为什么我喜欢拥有一个我可以控制的类的 div 的想法......

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

更改front-matter，使每个图像都有一个附加属性，在这个例子中我称之为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>

这有帮助吗？

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