CODEWITHSUNDEEP
paginationjekyll
Shay
Shay

Reputation: 1499

How can I create a multi-page blog post in Jekyll?

I am trying to re-create this Wordpress blog post on Jekyll. The post is made up of images with descriptions, with 5 or 6 such images per page.

I created the page with a Wordpress pagination plugin. Jekyll uses a paginate plugin to paginate blog menus, but it seems I cannot re-use that for a single blog post because:

I use a script to create this post, so I can use HTML, markdown, whatever. I could also make a separate file for each page--and hopefully, figure out how to direct Jekyll to find them without the date prefix.

I don't know Javascript or Ruby, but I can mostly find my way around. What I really need to know is which strategy to take so I can work toward that instead of spending all morning on something that won't work well.

So, how would you do it?

Upvotes: 0

Views: 263

Answers (1)

Christian
Christian

Reputation: 5521

Here's my idea of what it could look like in Jekyll. This is a hack with some potential issues.

TL;DR

The blog post you have shared is using two different layouts for the start page and the subpages. The index has a different position for the menu and the intro. Also, the page content differs.

Good news: Jekyll has layouts, powerful collections (beside posts), as well as includes to reuse content. See the details with some notes below. I have also added short post about the solution to my own blog.

You need two layouts

_layouts\paginated-post.md

---
---

<p>tags here</p> 

<h2>{{ page.title }}</h2>

<!-- page menu -->
<ul>
    <li><a href="{{ page.index | relative_url }}">{{ page.title }}</a></li>
    {% for item in page.page_urls %}
        <li><a href="{{ item.url | relative_url }}">{{ item.title }} Palettes</a></li>
    {% endfor %}
</ul>

{{ content }}

<h2>Pages</h2>

<ul>
    <li><a href="{{ page.index | relative_url }}">1</a></li>
        {% for item in page.page_urls %}
            {% assign page_number = forloop.index  | plus: 1 %}
        <li><a href="{{ item.url | relative_url }}">{{ page_number }}</a></li>
    {% endfor %}
</ul>

_layouts\paginated-post-index.md

---
---

<p>tags here</p> 

<h2>{{ page.title }}</h2>

I created Artificial Intelligence to produce these palettes ...

<h2>Menu</h2>

<!-- page menu here -->
<ul>
    <li><a href="{{ page.index | relative_url }}">{{ page.title }}</a></li>
    {% for item in page.page_urls %}
        <li><a href="{{ item.url | relative_url }}">{{ item.title }} Palettes</a></li>
    {% endfor %}
</ul>

{{ content }}

<h2>Pages</h2>

<ul>
    <li><a href="{{ page.index | relative_url }}">1</a></li>
        {% for item in page.page_urls %}
            {% assign page_number = forloop.index | plus: 1 %}
        <li><a href="{{ item.url | relative_url }}">{{ page_number }}</a></li>
    {% endfor %}
</ul>

Add a new collection

_config.yml

Note: I have chosen permalink path here, the defaults are optional if you set a layout in each collection item). Learn more about Jekyll collections in the docs.

collections:
  palettes:
    output: true
    permalink: /:path/

defaults:
  - scope:
      path: ""
    values:
      layout: paginated-post

New collection folder (_palettes) with two files:

The index on each page defines the palettes index.

_palettes\index.md

---
layout: paginated-post-index
title:  AI-Generated Palettes
index: palettes-index
page_urls: 
  - title: Wes Anderson
    palette: Kind of Bird
    url: /wes-anderson-kind-of-bird/
---

{% include palettes/wes.html %}

_palettes\wes-anderson-kind-of-bird.md

---
title: AI-Generated Palettes
subtitle: Wes Anderson – Kind of Bird
index: palettes-index
page_urls: 
  - title: Wes Anderson
    palette: Kind of Bird
    url: /wes-anderson-kind-of-bird/
---

{% include palettes/wes.html %}

Include file used above in _includes\palettes\wes.html

Note: the first line is the only line which will cause issues in other palette include files - maybe you will find your own solution or can just adjust the index here.

<h2>{{ page.page_urls[0].title }} </h2>

image here

Merin’s Fire: ff9506  
Trojan Horse Brown: 7b571e  
Minestrone: c4280d  
Punch of Yellow: efd185  
Root Brew: 2b0f0b  
Green Ink: 12887f

Upvotes: 1

Related Questions