Winse Blog

走走停停, 熙熙攘攘, 忙忙碌碌, 不知何畏.

Jekyll页面实现上/下一篇文章导航

在博客页面在内容会有上一遍和下一遍文章的链接。 在jekyll的page对象包含上下篇的引用 Template Data Api ,只需要在页面进行展示即可。

默认主题中jekyll-bootstrap的twitter主题中包含上下篇文章的实现如下:

<hr>
<div class="pagination">
  <ul>
  {% if page.previous %}
    <li class="prev"><a href="{{ BASE_PATH }}{{ page.previous.url }}" title="{{ page.previous.title }}">&larr; Previous</a></li>
  {% else %}
    <li class="prev disabled"><a>&larr; Previous</a></li>
  {% endif %}
    <li><a href="{{ BASE_PATH }}{{ site.JB.archive_path }}">Archive</a></li>
  {% if page.next %}
    <li class="next"><a href="{{ BASE_PATH }}{{ page.next.url }}" title="{{ page.next.title }}">Next &rarr;</a></li>
  {% else %}
    <li class="next disabled"><a>Next &rarr;</a>
  {% endif %}
  </ul>
</div>
<hr>

注意点

1
2
3
4
{ % highlight % }{ % endhighlight % }

# 用于直接输出liquid标签源码,但是raw不能嵌套使用
{ % raw % } { % endraw % }

参考

–END