每个 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 构建图片库的帖子。也许这会帮助你：

• 使用 Jekyll 和 Lightbox2 生成图片库
• Jekyll / Lightbox2 图片库，另一种方法

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

编辑：

但我担心为不同的帖子定制它。一个帖子可能有全景图，而另一个帖子可能有 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>

这有帮助吗？

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