下一页按钮以错误的方式导航

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 回购 的 link https://github.com/colinphipps/Sortis

任何帮助都会很棒。非常感谢大家！

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.

好吧，今天上午的吐槽过后，我们来调试一下这个意大利面条派对吧。

首先：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 来完成，但这是另一回事了。

下一页按钮以错误的方式导航

Next page buttons navigating the wrong way

html

css

pagination

jekyll

github-pages