pagination - Shopify 主题开发 - 还有哪些其他分页样式？分页 | default_pagination

Question

我正在尝试查找突出显示 {{ paginate | 附带的其他选项的文档 default_pagination }} 分页标签。

默认样式 {{ paginate | default_pagination }} 创建：

谁能让我知道获得此输出的分页类型是什么：

编辑：感谢您确认除了默认样式之外没有其他内置样式。以下是我实现这种外观的方法：

.pagination {
	margin: 20px;
	color: #0E0530;
}
.pagination,
.pagination-inner {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.pagination-page {
	margin: 0 10px;
	color: #0E0530;
}
.pagination-previous,
.pagination-next {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	border: 1px solid transparent;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	-webkit-transition: all 0.7s;
	transition: all 0.7s;
}
	.pagination-previous:hover,
	.pagination-next:hover {
		border-color: #E20437;
	}

<!--

{% comment %} With shopify code {% endcomment %}

{% if paginate.pages > 1 %}
		<div class="pagination">

			<div class="pagination-inner">

				{% if paginate.previous.is_link %}
				<a class="pagination-previous" href="{{ paginate.previous.url }}"><img src="https://cdn.shopify.com/s/files/1/0043/0886/0977/files/chevvy-red-left.png?1420" class="paginate-prev-icon" alt="prev"></a>
				{% endif %}

				<div class="pagination-page">Page {{ paginate.current_page }} of {{ paginate.pages }}</div>
				
				{% if paginate.next.is_link %}
					<a class="pagination-next" href="{{ paginate.next.url }}"><img src="https://cdn.shopify.com/s/files/1/0043/0886/0977/files/chevvy-red-right.png?1420" class="paginate-next-icon" alt="prev"></a>
				{% endif %}

			</div>
			
		</div>
{% endif %}

-->

<!-- without shopify shortcodes -->
	<div class="pagination">

		<div class="pagination-inner">

			<a class="pagination-previous" href="{{ paginate.previous.url }}"><img src="https://cdn.shopify.com/s/files/1/0043/0886/0977/files/chevvy-red-left.png?1420" class="paginate-prev-icon" alt="prev"></a>

			<div class="pagination-page">Page 1 of 2</div>
			
			<a class="pagination-next" href="{{ paginate.next.url }}"><img src="https://cdn.shopify.com/s/files/1/0043/0886/0977/files/chevvy-red-right.png?1420" class="paginate-next-icon" alt="prev"></a>

		</div>
		
	</div>

标签： paginationthemesshopify

Answer 1

不，没有其他内置的分页样式，但使用 paginatio 对象，您可以轻松创建此分页。为此，您可以查看Shopify Debut Theme中的以下代码

<ul class="list--inline pagination">
  {% unless paginate.previous.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </button>
    </li>
    {% else %}
    <li>
      <a href="{{ paginate.previous.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </a>
    </li>
  {% endunless %}
  <li class="pagination__text">
    {{ 'general.pagination.current_page' | t: current: paginate.current_page, total: paginate.pages }}
  </li>
  {% unless paginate.next.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </button>
    </li>
  {% else %}
    <li>
      <a href="{{ paginate.next.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </a>
    </li>
  {% endunless %}
</ul>

它会输出您需要的相同分页，然后您可以相应地对其进行样式设置。

分页对象