Việc thêm nút điều hướng bài viết mới hơn và bài viết cũ hơn ở cuối bài viết sẽ giúp độc giả dễ dàng tiếp cận với các bài viết khác trong blog.

Để thêm nút này, mở file post.html trog thư mục _layout, tìm đoạn code tương tự như:

<div class="post-content" itemprop="articleBody">
    {{ content }}
</div>

Sau đó thêm bên dưới nó đoạn code:

     <ul class="pager blog-pager">
        {% if page.previous.url %}
        <li class="previous">
          <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
        </li>
        {% endif %}
        {% if page.next.url %}
        <li class="next">
          <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
        </li>
        {% endif %}
      </ul>

Lưu file này lại, mở một bài viết bất kỳ để xem kết quả.

Để trang trí cho các nút điều hướng này, sử dụng CSS:

ul.blog-pager {margin-left: 0;}.blog-pager li {list-style: none;}li.previous {float: left;}li.next {float: right;}.pager li a{text-transform:uppercase;font-size:14px;font-weight:bold;letter-spacing:1px;padding:10px 5px;background:#FFF;border: 1px solid #ddd;border-radius:0;color:#404040;}.pager li a:hover,.pager li a:focus{color:#FFF;text-decoration:none;background:#0085a1;border:1px solid #0085a1;}