在Jekyll RB& GH页面,显示下一页和上一页(不发布)

时间:2016-09-13 16:33:28

标签: jekyll liquid github-pages

我知道{{page.previous.url}}  和{{page.next.url}}可用于帖子,但不幸的是我在我的博客上使用了这些项目页面的页面结构。

在每个项目结束时,我想要一个具有

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

doc结构

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

这可能是没有任何插件的Jekyll吗?

更新

因为当前页面没有可用的“索引”,我想我必须遍历site.pages,将site.page.title与page.title相匹配,然后为下一个之前的链接添加和减去forloop.index。

这是唯一的方式还是我过度复杂?

我在下面想到的示例代码:

{% 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 %}

编辑2

JoostS的回答是我需要的出发点。我继续把我的代码包括在内,因为我需要的东西与他们的代码有点不同(main.css被包含在内,以及其他几个不包含在循环中的页面)。非常感谢您的帮助!

使用仅限项目的页面构建阵列

{% 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 %}

有条件地显示下一个和上一个

<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

1 个答案:

答案 0 :(得分:1)

以下是我在网站上使用的代码:

{% 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 %}

然后:

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 %}';
}

这循环遍历页面或通过帖子。请参阅:http://www.usecue.com/