Next page buttons navigating the wrong way

Question

I just started scripting about a week ago in order to learn how to set up a website for a project I'm working on. I'm using Jekyll, and I installed a pretty neat-o theme to go with my site. The problem is, the buttons to navigate to the next page of posts are faced the wrong way (the button that should move to the next page of posts moves to the previous page of posts). Making it look like this:

LOOK AT HOW THE WRONG BUTTON IS HIGHLIGHTED

I'm not exactly sure what I should be looking for, but here's a piece of script in my index.html

<nav class="pagination" role="navigation">
  <p>
    {% if paginator.next_page %}
    <a class="newer-posts" href="{{ site.baseurl }}/page{{paginator.next_page}}">
      <span class="fa-stack fa-lg">
        <i class="fa fa-square fa-stack-2x"></i>
        <i class="fa fa-angle-double-left fa-stack-1x fa-inverse"></i>
      </span>
    </a>
    {% else %}
    <span class="fa-stack fa-lg">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-angle-double-left fa-stack-1x fa-inverse"></i>
    </span>
    {% endif %}
    <span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
    {% if paginator.previous_page %}
      {% if paginator.page == 2 %}
      <a class="newer-posts" href="{% if site.baseurl %}{{ site.baseurl }}{% endif %}/">
        <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-angle-double-right fa-stack-1x fa-inverse"></i>
        </span>
      </a>
      {% else %}
      <a class="newer-posts" href="{{ site.baseurl }}/page{{paginator.previous_page}}">
        <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-angle-double-right fa-stack-1x fa-inverse"></i>
        </span>
      </a>
      {% endif %}
    {% else %}
    <span class="fa-stack fa-lg">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-angle-double-right fa-stack-1x fa-inverse"></i>
    </span>
    {% endif %}
  </p>
  <p>
    <a href="{{ site.baseurl }}/posts">View All Posts by Category</a>
  </p>
</nav>

If that doesn't make sense, here's the link to my github repo https://github.com/colinphipps/Sortis

Any help at all would be amazing. Thank you all so much!

Answer 1

Blindly copy pasting code can lead to crap. As a developer, it's your job to understand what the code does.

Here, you're lucky, it's only a logic error. But tomorrow, it can be a security flaw.

Ok, after this morning rant, let's debug this spaghetti party.

First of all : RTFM Documentation is the second source of truth after code itself. Here is Jekyll's documentation about Pagination.

Second remove all unnecessary code from you question. Here you give us both logic and presentational codes. And the way you represent a left arrow with :

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-angle-double-left fa-stack-1x fa-inverse"></i>
</span>

has no interest and introduces noise.

Let's rephrase :

{% if paginator.next_page %}
  <a class="newer-posts" href="{{ site.baseurl }}/page{{paginator.next_page}}">
    arrow left
  </a>
{% else %}
  arrow left
{% endif %}

<span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>

{% if paginator.previous_page %}
  {% if paginator.page == 2 %}
  <a class="newer-posts" href="{% if site.baseurl %}{{ site.baseurl }}{% endif %}/">
    arrow right
  </a>
  {% else %}
  <a class="newer-posts" href="{{ site.baseurl }}/page{{paginator.previous_page}}">
    arrow right
  </a>
  {% endif %}
{% else %}
  arrow right
{% endif %}

Now we clearly see tree parts in our code :

[<< next page] [current page number] [previous page >>]

We have to move some parts of the code to be more logical.

[previous page >>] [current page number] [<< next page]

Now the presentational problem

[<< previous page] [current page number] [next page >>]

So now your code is

{% if paginator.previous_page %}
  {% if paginator.page == 2 %}
  <a class="newer-posts" href="{% if site.baseurl %}{{ site.baseurl }}{% endif %}/">
    arrow left
  </a>
  {% else %}
  <a class="newer-posts" href="{{ site.baseurl }}/page{{paginator.previous_page}}">
    arrow left
  </a>
  {% endif %}
{% else %}
  arrow right
{% endif %}

<span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>

{% if paginator.next_page %}
  <a class="newer-posts" href="{{ site.baseurl }}/page{{paginator.next_page}}">
    arrow right
  </a>
{% else %}
  arrow right
{% endif %}

As {{ site.baseurl }}/page{{paginator.previous_page}} is not the right way to print a paginator url, let's do it with {{site.baseurl}}{{paginator.previous_page_path}}. This give us the more concise :

{% capture arrowLeft %}
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-angle-double-left fa-stack-1x fa-inverse"></i>
</span>
{% endcapture %}
{% capture arrowRight %}
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-angle-double-right fa-stack-1x fa-inverse"></i>
</span>
{% endcapture %}

<nav class="pagination" role="navigation">
  <p>
    {% if paginator.previous_page %}
      <a class="newer-posts" href="{{site.baseurl}}{{paginator.previous_page_path}}">
        {{ arrowLeft }}
      </a>
    {% else %}
      {{ arrowLeft }}
    {% endif %}

    <span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>

    {% if paginator.next_page %}
      <a class="newer-posts" href="{{ site.baseurl }}{{paginator.next_page_path}}">
        {{ arrowRight }}
      </a>
    {% else %}
      {{ arrowRight }}
    {% endif %}
  </p>
  <p><a href="{{ site.baseurl }}/posts">View All Posts by Category</a></p>
</nav>

Note the factorization of repeated presentational components arrowLeft and arrowRight. This can also be done with includes, but it's another story.