jekyll：我如何将内容分成两部分？

Question

在我的模板中，我想在内容的中间显示一组图像。所以我想我需要一部分内容然后从yaml中获取一些图像，然后其余的内容意味着我必须将内容分成两部分。

如何将内容拆分为这样？

Answer 1

我遇到了完全相同的问题，我在没有拆分内容的情况下解决了这个问题 我会在这里显示简短版本，但我的博客上有post with a more detailed explanation。

我使用include files进行展示图库的实际工作：

---

首先，我使用Lightbox2来显示图像，所以我需要先加载一些JS和CSS文件（以及jQuery）。我想只在我真正需要Lightbox2的页面上这样做，所以我把它放到一个包含文件中，而不是放在布局文件中：

/_includes/galheader.html：

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />

---

然后，我需要另一个显示实际图库的包含文件：

/_includes/gal.html：

{% for image in page.images %}
    {% if include.image == null or include.image == image.name %}
        <a href="{{ page.imgfolder }}/{{ image.name }}" data-lightbox="1" title="{{ image.text }}">
            <img src="{{ page.imgfolder }}/{{ image.thumb }}" title="{{ image.text }}">
        </a>&nbsp;
    {% endif %}
{% endfor %}

请注意，{% if include.image == null or ...行允许我以两种不同的方式使用include：

1. 显示所有图片：

   {% include gal.html %}
   

2. 显示单张图片：

   {% include gal.html image="image-1.jpg" %}
   

---

使用这两个包含I can now do this：

---
layout: default
title: Gallery with text (version 1)
imgfolder: /img/demopage
images:
  - name: image-1.jpg
    thumb: thumb-1.jpg
    text: The first image
  - name: image-2.jpg
    thumb: thumb-2.jpg
    text: The second image
  - name: image-3.jpg
    thumb: thumb-3.jpg
    text: The third image
---

{% include galheader.html %}

Some text here...and then, all the images in one single gallery:

{% include gal.html %}

...and more text after the gallery

The generated HTML

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<p><link href="/css/lightbox.css" rel="stylesheet" /></p>

<p>Some text here...and then, all the images in one single gallery:</p>

<p><a href="/img/demopage/image-1.jpg" data-lightbox="1" title="The first image"><img src="/img/demopage/thumb-1.jpg" title="The first image"></a></p>

<p><a href="/img/demopage/image-2.jpg" data-lightbox="1" title="The second image"><img src="/img/demopage/thumb-2.jpg" title="The second image"></a></p>

<p><a href="/img/demopage/image-3.jpg" data-lightbox="1" title="The third image"><img src="/img/demopage/thumb-3.jpg" title="The third image"></a></p>

<p>...and more text after the gallery</p>

---

或者我可以spread the images over the whole page：

---
layout: default
title: Gallery with text (version 2)
imgfolder: /img/demopage
images:
  - name: image-4.jpg
    thumb: thumb-4.jpg
    text: The 4th image
  - name: image-5.jpg
    thumb: thumb-5.jpg
    text: The 5th image
  - name: image-6.jpg
    thumb: thumb-6.jpg
    text: The 6th image
---

{% include galheader.html %}

Some text here, then two images:

{% include gal.html image="image-4.jpg" %}
{% include gal.html image="image-5.jpg" %}

...and more text...

Even more text and the last image:

{% include gal.html image="image-6.jpg" %}

Some text at the end

The generated HTML

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<p><link href="/css/lightbox.css" rel="stylesheet" /></p>

<p>Some text here, then two images:</p>

<p><a href="/img/demopage/image-4.jpg" data-lightbox="1" title="The 4th image"><img src="/img/demopage/thumb-4.jpg" title="The 4th image"></a></p>

<p><a href="/img/demopage/image-5.jpg" data-lightbox="1" title="The 5th image"><img src="/img/demopage/thumb-5.jpg" title="The 5th image"></a></p>

<p>...and more text...</p>

<p>Even more text and the last image:</p>

<p><a href="/img/demopage/image-6.jpg" data-lightbox="1" title="The 6th image"><img src="/img/demopage/thumb-6.jpg" title="The 6th image"></a></p>

<p>Some text at the end</p>