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网址的正确方法，我们可以使用{{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完成，但这是另一个故事。

下一页按钮导航方式错误

1 个答案: