下一页按钮导航错误

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 仓库的链接 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}} 不是打印分页器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 完成，但这是另一回事。