~xdavidwu/xdavidwu.link

c15807d91b9558c47df230bb43dd66be78dc18cb — xdavidwu 2 years ago 67f135c
use icons for pagination
2 files changed, 31 insertions(+), 9 deletions(-)

M _includes/paginator.html
M _includes/post_pagination.html
M _includes/paginator.html => _includes/paginator.html +19 -5
@@ 5,12 5,20 @@
    {% comment %} Link for previous page {% endcomment %}
    {% if paginator.previous_page %}
      {% if paginator.previous_page == 1 %}
        <li><a href="{{ first_page_path }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
        <li><a href="{{ first_page_path }}">
          <i class="fa fa-angle-left"></i>
        </a></li>
      {% else %}
        <li><a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | relative_url }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
        <li><a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | relative_url }}">
          <i class="fa fa-angle-left"></i>
        </a></li>
      {% endif %}
    {% else %}
    <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</span></a></li>
    <li><a href="#" class="disabled">
      <span aria-hidden="true">
        <i class="fa fa-angle-left"></i>
      </span>
    </a></li>
    {% endif %}

    {% comment %} First page {% endcomment %}


@@ 60,9 68,15 @@

    {% comment %} Link next page {% endcomment %}
    {% if paginator.next_page %}
      <li><a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | relative_url }}">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a></li>
      <li><a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | relative_url }}">
        <i class="fa fa-angle-right"></i>
      </a></li>
    {% else %}
      <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</span></a></li>
      <li><a href="#" class="disabled">
        <span aria-hidden="true">
          <i class="fa fa-angle-right"></i>
        </span>
      </a></li>
    {% endif %}
  </ul>
</nav>

M _includes/post_pagination.html => _includes/post_pagination.html +12 -4
@@ 1,14 1,22 @@
{% if page.previous or page.next %}
  <nav class="pagination">
    {% if page.previous %}
      <a href="{{ page.previous.url | relative_url }}" class="pagination--pager" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a>
      <a href="{{ page.previous.url | relative_url }}" class="pagination--pager" title="{{ page.previous.title | markdownify | strip_html }}">
        <i class="fa fa-angle-left"></i>
      </a>
    {% else %}
      <a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a>
      <a href="#" class="pagination--pager disabled">
        <i class="fa fa-angle-left"></i>
      </a>
    {% endif %}
    {% if page.next %}
      <a href="{{ page.next.url | relative_url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a>
      <a href="{{ page.next.url | relative_url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">
        <i class="fa fa-angle-right"></i>
      </a>
    {% else %}
      <a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a>
      <a href="#" class="pagination--pager disabled">
        <i class="fa fa-angle-right"></i>
      </a>
    {% endif %}
  </nav>
{% endif %}
\ No newline at end of file