Zach Herring
Zach Herring

Reputation: 374

in Jekyll RB & GH Pages, Displaying a next and previous Page (Not Post)

I know the {{page.previous.url}} and {{page.next.url}} is available for posts, but unfortunately I'm using the Page structure for these projects pages on my blog.

At the end of each Project, I would like to have a footer that has

 [ < - Previous Project (if available)]  [ Home ]  [  Next Project -> (if available) ] 

doc structure

root
-- project1/
  - /img
  - /index.md
-- project2/
  - /img
  - /index.md
-- project3/
  - /img
  - /index.md
index.html

Is this possible w/ Jekyll without any plugins?

Update

Because there is no "index" available of the current page you're on, I think I'm going to have to loop through site.pages, match the site.page.title with the page.title and then add and subtract forloop.index for the next and previous links.

Is this the only way or am I overcomplicating?

example code of what I'm thinking below:

{% for entry in site.pages %}
        {% if entry.title == page.title %}
            index is: {{ forloop.index }} <br />

            sites.pages is {{ site.pages[forloop.index].url }} <br />
            {% assign prev = forloop.index | minus:1 %}
            {% assign next = forloop.index | plus:1 %}

            {% assign prevUrl = site.pages[prev].url %}
            {% assign nextvUrl = site.pages[next].url %}

            {% assign currentURL = site.pages[forloop.index].url %}

            previous page is: <em>{{ prevUrl }}</em> <br />
            current page is: <em>{{ currentUrl }}</em> <br />
            next page is: <em>{{ nextUrl }}</em>
        {% endif %}
    {% endfor %}

EDIT 2

JoostS's answer was the starting point I needed. I went ahead and included my code because what I needed is a bit different than their's (main.css was being included as well as a couple of other Pages that weren't meant to be included in the Loop). Thanks a ton for the help!

To Build the Array w/ Project-Only Pages

{% assign sorted_pages2 = site.pages %}

{% assign sorted_pages = "" | split: ""  %}
{% for item in sorted_pages2 %}
    {% if item.type == "project" %}
        {% assign sorted_pages = sorted_pages | push: item %}
    {% endif %}
{% endfor %}

{% for item in sorted_pages %}
    {% if item.url == page.url %}
        {% assign this_i = forloop.index0 %}
        {% assign num_of_pages = forloop.length %}
        {% assign last_i = forloop.length | minus: 1 %}
        {% assign next_i = forloop.index0 | plus: 1 %}
        {% assign prev_i = forloop.index0 | minus: 1 %}
    {% endif %}
{% endfor %}

To Display Next and Previous Conditionally

<div class="flex f-row project-footer">
        <div>
                {% if prev_i < 0 %}
                    <!-- Sorted_Last{{ sorted_pages[last_i].url }} -->
                {% else %}
                    <a href="{{ sorted_pages[prev_i].url }}">
                        👈 <span>Previous Project</span>
                    </a>
            {% endif %}
        </div>
        <div>
            <a href="/">
                 🏠 <span>Home</span>
            </a>
        </div>
        <div>
            {% if num_of_pages > next_i %}
                <a href="{{ sorted_pages[next_i].url }}">
                    <span>Next Project</span> 👉
                </a>
            {% endif %}
        </div>
    </div>

End Result End Result

Upvotes: 0

Views: 436

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12592

Here is the code I use in my website:

{% if page.layout != 'post' %}
{% assign sorted_pages2 = site.pages | sort: 'order' %}
{% else %}
{% assign sorted_pages2 = site.posts reversed %}
{% endif %}

{% assign sorted_pages = "" | split: ""  %}
{% for item in sorted_pages2 %}
    {% if item.url != "/404.html" %}    
        {% assign sorted_pages = sorted_pages | push: item %}
    {% endif %} 
{% endfor %}

{% for item in sorted_pages %}
    {% if item.url == page.url %}
        {% assign this_i = forloop.index0 %}
        {% assign num_of_pages = forloop.length %}
        {% assign last_i = forloop.length | minus: 1 %}
        {% assign next_i = forloop.index0 | plus: 1 %}
        {% assign prev_i = forloop.index0 | minus: 1 %}
    {% endif %}
{% endfor %}

And then:

function next() {
    document.location.href='{% if num_of_pages > next_i %}{{ sorted_pages[next_i].url }}{% else %}{{ sorted_pages[0].url }}{% endif %}';
}
function prev() {
    document.location.href='{% if prev_i < 0 %}{{ sorted_pages[last_i].url }}{% else %}{{ sorted_pages[prev_i].url }}{% endif %}';
}

This loops through the pages OR through the post. See: http://www.usecue.com/

Upvotes: 1

Related Questions