Кнопки со следующей страницей не работают

Question

Я только что начал писать около недели назад, чтобы узнать, как настроить сайт для проекта, над которым я работаю. Я использую Jekyll, и я установил довольно аккуратную тему, чтобы пойти с моим сайтом. Проблема в том, что кнопки для перехода на следующую страницу сообщений сталкиваются с неправильным способом (кнопка, которая должна перейти на следующую страницу сообщений, перемещается на предыдущую страницу сообщений). Что делает его выглядеть следующим образом:

LOOK AT HOW THE WRONG BUTTON IS HIGHLIGHTED

Я не совсем уверен, что я должен искать, но вот кусок сценария в моей 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> 

Если это Безразлично Не имеет смысла, вот ссылка на мой github repo https://github.com/colinphipps/Sortis

Любая помощь вообще была бы удивительной. Большое спасибо всем вам!

Answer 1

Вкратце копировать код вставки может привести к дерьму. Как разработчик, ваша задача - понять, что делает код.

Здесь вам повезло, это всего лишь логическая ошибка. Но завтра это может быть недостатком безопасности.

ОК, после утреннего рассвета, давайте отлаживаем эту вечеринку спагетти.

Прежде всего: RTFM Документация является вторым источником истины после самого кода. Адрес Jekyll's documentation about Pagination.

Второй удалить все ненужный код из вопроса. Здесь вы даете нам логические и презентационные коды. И как вы представляете стрелку влево с:

<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> 

не имеет интереса и вводит шум.

Давайте перефразируем:

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

Теперь мы ясно видим, части дерева в нашем коде:

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

Мы должны переместить некоторые части кода более логичным.

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

Теперь презентационный проблема

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

Так что теперь ваш код

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

Как {{ site.baseurl }}/page{{paginator.previous_page}} не правильно напечатать Paginator URL, давайте делать это с {{site.baseurl}}{{paginator.previous_page_path}}. Это дает нам более кратким:

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

Обратите внимание на разложение повторных презентационных компонентов arrowLeft и arrowRight.Это также можно сделать с includes, но это уже другая история.