Reputation: 374
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>
Upvotes: 0
Views: 436
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