链接列表的上一个/下一个按钮 - 未按预期工作

Question

我正在尝试为 linklist 中的页面构建 "Next / Previous" 页面导航系统。

下面的代码按预期工作...除了链接列表的第一页和最后一页。我希望"Previous"按钮不显示在第一页，"Next"按钮不显示在第一页最后一页。

在第一页上，显示 "Previous" 按钮，并指向最后一页。

在最后一页上，显示了 "Next" 按钮，但指向任何地方。

我哪里错了？我唯一能想到的是我没有给变量正确的类型（我对 Liquid 比较陌生）。

  {% comment %}
    Get the linklist being passed, and the size of the linklist.
  {% endcomment %}

  {% assign thislinklist = __page-navigation-arrows %}
  {% assign thislinklistSize = linklists[thislinklist].links | plus: 0 %}

  {% comment %}
    Finds the index of the current page in the linklist array, and saves it to compare to find previous and next pages.
  {% endcomment %}

  {% for link in linklists[thislinklist].links %}
    {% if page.handle == link.handle %}
      {% assign thisindex = forloop.index0 | plus: 0 %}
    {% endif %}
  {% endfor %}

  {% comment %}
    Saves details of the current page, and indexes of the previous and nex pages.
  {% endcomment %}

  {% assign thisname = page.title %}
  {% assign thislink = page.url %}

  {% assign thisindex = thisindex | plus: 0 %}
  {% assign previndex = thisindex | minus: 1 %}
  {% assign nextindex = thisindex | plus: 1 %}

  {% comment %}
    If it's not the last page in the linklist, save details of the next page. If not, assign a blank string (used later to hide the button).
  {% endcomment %}

  {% if previndex | plus: 0 > 0 %}
    {% assign prevname = linklists[thislinklist].links[previndex].title %}
    {% assign prevlink = linklists[thislinklist].links[previndex].url %}
  {% else %}
    {% assign prevname = '' %}
    {% assign prevlink = '' %}
  {% endif %}

  {% comment %}
    If it's not the first page in the linklist, save details of the previous page. If not, assign a blank string (used later to hide the button).
  {% endcomment %}

  {% if nextindex | plus: 0 < thislinklistSize | minus: 1 %}
    {% assign nextname = linklists[thislinklist].links[nextindex].title %}
    {% assign nextlink = linklists[thislinklist].links[nextindex].url %}
  {% else %}
    {% assign nextname = '' %}
    {% assign nextlink = '' %}
  {% endif %}


  {% comment %}
    Display the navigation.
  {% endcomment %}

  <div class="page-navigation-arrows">

    {% comment %} Hide "Previous" if it's the first page {% endcomment %}
    {% if prevlink != '' or blank %}
      <a class="page-navigation-arrows__prev page-navigation-arrows__arrow" href="{{ prevlink }}" title="{{ prevname }}">
        <img src="{{ 'page-navigation-prev.svg' | asset_url }}" alt="Previous Page">
      </a>
    {% endif %}

    {% comment %} Hide "Next" if it's the last page {% endcomment %}
    {% if nextlink != '' or blank %}
      <a class="page-navigation-arrows__next page-navigation-arrows__arrow" href="{{ nextlink }}" title="{{ nextname }}">
        <img src="{{ 'page-navigation-next.svg' | asset_url }}" alt="Next Page">
      </a>
    {% endif %}

  </div>

Answer 1

没时间测试这个，但我相信你代码是有效的。

但有几点：

{% if nextlink != '' or blank %}

这不是有效的 if 条件。应该是：

{% if nextlink != '' or nextlink == blank %}

这也不是一个有效的 if 语句：

{% if previndex | plus: 0 > 0 %}

它总是 returns true。它应该变成：

{% assign previndex = previndex | plus: 0 %}
{% if previndex > 0 %}
    ...
{% endif %}

解决这些问题后，它应该可以正常工作。

Answer 2

有一个简单的方法可以做到这一点：

{% 除非 forloop.first %} 您之前 link 的代码 {% 无限 %}

{% 除非 forloop.last %} 您下一个 link 的代码 {% 无限 %}

链接列表的上一个/下一个按钮 - 未按预期工作

Previous / Next button for a linklist - not working as expected

liquid

shopify