简体   繁体   中英

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 最终结果

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/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM