Separate Contents of a Post Into Different Portion of a Layout

1

Usually, the text content of my website is accompanied by sources from where I mined information. But, for design preferences, I would like to keep the actual content and the sources list separated into two elements on the HTML structure provided by the layout.

Here is an illustrative example of what I want to achieve:

_layouts/post.html

<div class="content">
  {{ page,content }}
</div>
<div class="sources">
  {{ page.sources }}
</div>

_posts/2021-10-03-mypost.html

---
layout: post
---
My text on the subject.

Source 1
Source 2 
Source 3

Result expected:

<div class="content">
    My text on the subject.
</div>
<div class="sources">
    Source 1
    Source 2 
    Source 3 
</div>

Iā€™m not sure if that dynamic is possible to achieve using Jekyll. I read about the page object at Jekyll docs, but could not find a solution.

How could I make ithat happen?

2

A plug-in like this would do what you want.

It can also be done with YAML front matter if you build the logic into your layouts and includes. Forestry has a post talking about how to do it along with a theme which might give you some inspiration.

2 Likes
3

Indeed move your sources to YAML.

As a multi-line string. Limited though as if the source is a link it will be plain text and not a hyperlink

---
layout: post

sources: |
  - Source 1
  - Source 2 
  - Source 3 
---
My text on the subject.

And {{ page.sources | markdownify }}

Anything in the body of the page will be page.content

Or using a list of key-value pairs.

---
layout: post

sources:
  - title: Source 1
    url: https://...
  - title: Source 2 
    url: ...
  - title: Source 3 
    url: ...
---
My text on the subject.

Layout


<div>
  {{ page.content }}
</div>

<ul>
  {% for item in page.sources %}
    <li>
        <a href="{{ item.title }}">
            {{ item.url }}
       </a>
    </li>
  {% endfor %}
</ul>
1 Like