自定义Shopify中的Default_pagination编号样式

Question

我正在尝试自定义Default_Pagination过滤器的数字。我需要在数字上显示一个盒子。因此，为此，我需要为数字创建一个自定义类，并更改CSS中的样式。但是我不知道该怎么做。一点点帮助将不胜感激。

这是我的代码：

<div class="container">
    {% paginate collection.products by 5 %}
        {% for product in collection.products %}
            <a href="{{ product.url }}"><img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
                <figcaption>{{ product.title }} 
                    {% if product.compare_at_price_max > 0 %}
                        <span>{{ product.compare_at_price_max | money }}</span>
                        <span>{{ product.price | money }}</span>
                    {% else %} 
                        <span>{{ product.price | money }}</span>
                    {% endif %}
                </figcaption>
            </a>
        {% endfor %}
    {{ paginate | default_pagination: next: '>', previous: '<' }}   
   {% endpaginate %}
</div>

Answer 1

而不是使用Shopify Liquid default_pagination

<nav class="Pagination">
  <ul class="Pagination__List">
    {%- if paginate.previous -%}
      <li>
        <a
          class="Pagination__Item Pagination__Item--Next" 
          href="{{ paginate.previous.url }}"
          >
          Next Page
        </a>
      </li>
    {%- endif -%}

    {%- for part in paginate.parts -%}
      <li>
        {%- if part.is_link -%}
          <a
            class="Pagination__Item"
            href="{{ part.url }}"
            >
            {{ part.title }}
          </a>
        {%- else -%}
          {%- if part.title == paginate.current_page -%}
            <span class="Pagination__Item Pagination__Item--Current">{{ part.title }}</span>
          {%- else -%}
            <span class="Pagination__Item">{{ part.title }}</span>
          {%- endif -%}
        {%- endif -%}
      </li>
    {%- endfor -%}

    {%- if paginate.next -%}
      <li>
        <a
          class="Pagination__Item Pagination__Item--Prev"
          href="{{ paginate.next.url }}"
          >
          Previous Page
        </a>
      </li>
    {%- endif -%}
  </ul>
</nav>

查看液体分页对象有关更多信息。

然后，按照您想要的方式进行造型应该很容易。如果您需要帮助，请发表评论。我很高兴提供帮助:)