用液体创造一个可访问的分页_极简慕枫

构建在线商店的关键要素之一是创建分页系统。分页使用户能够浏览一系列页面，其中内容已被拆分以用于设计目的，可用性，更快加载等。分页可能不是网上商店中最性感的组成部分，但它绝对是最重要的组成部分之一。郑州网站设计

什么是分页，我可以在主题中分页？

分页是页面的有序编号，通常位于网页的顶部或底部。分页有助于跨多个页面拆分产品，博客文章和搜索结果。在Shopify中，它是主题设计的必要部分，因为每页限制为50个结果forloop。

paginate标签以最简单的形式与标签配合使用for，将内容分成多个网页。它必须包装for循环通过数组的标记块。

{% paginate collection.products by 5 %}
  {% for product in collection.products %}
    <!--show product details here -->    
  {% endfor %}
  <!-- show pagination links here -->  {% endpaginate %}

您可能也喜欢：了解多语言商店的hreflang标签。

建立一个可访问的分页

我最喜欢的教程会立即显示结果的完整示例，以节省时间并提供上下文。对于本文，我认为最好先查看完整示例，然后引导您完成代码以及使这个分页可访问的原因。下面将解释此示例的每个元素如何协同工作以创建功能可访问的分页，因此请继续阅读以了解如何构建它。

Paginate标签

要使此代码有效，它必须出现在paginate代码中。在paginate标记内，您可以访问该paginate对象并为您的分页创建标记以正确呈现。

在此示例中，我们将博客文章分页，因此此代码将显示在blog.liquid模板上，或显示在模板中包含的部分模板中blog.liquid。

您可以通过指定by参数来设置要在一页上显示的“限制”或博客数量。此参数后跟一个介于1和50之间的整数，该整数告诉paginate标记每页应输出多少结果。例如，如果我想用我的分页每页显示10篇文章，那么我会将上面的示例更改为：

{%- paginate blog.articles by 10 -%}

使用语义标记

在完整示例中，您将注意到我们已经使用了nav元素和<ol>元素。该<nav>元素向浏览器指定这是允许用户导航网站的链接列表，并<ol>指定有序列表。我们使用这种类型的列表的原因是因为语义上的内容（我们的分页链接）是有序项的列表。它们必须以特定的顺序排列才有意义，因此最好用带有有序列表的HTML表示。我们可以在本教程结尾处使用CSS来更改分页的可视化呈现，但从语义上来说这是最合适的。

ARIA角色和属性

如果您之前从未使用过ARIA（可访问的富Internet应用程序），我建议您阅读它们。简而言之，ARIA属性有助于使残障人士更容易访问Web内容和Web应用程序（尤其是那些使用JavaScript开发的应用程序）。ARIA属性补充HTML，以便应用程序中常用的交互可以轻松传递给辅助技术，并有助于提供用户体验。

在主要示例中，我们使用了role属性并将其设置为一种类型navigation。

<nav role="navigation">

此外，为了确保屏幕阅读器不会大声朗读箭头«和»实际上只对有视力的用户有用的箭头，我们已将aria-hiddenset 的属性添加到true。这确保了有视力的用户可以使用箭头，而不会对使用屏幕阅读器的人的体验产生负面影响。

<span aria-hidden="true">&laquo;</span>

最后，我们还使用了aria-current属性集来page向屏幕阅读器指示这是容器或相关元素集中的活动或当前项。我们确定我们所在的页面是否是当前页面，通过使用检查来查看是否part.title等于paginate.current_page，并在这种情况下删除链接（禁用输出被点击，以及将aria-current属性放在<li>。

{%- if part.title == paginate.current_page -%}
  <li class="active" aria-current="page">
    <span class="visuallyhidden">page</span> {{ part.title }}
  </li>
{%- else -%}

添加CSS

您可能已经看过visuallyhidden之前在主题中使用过的类，或者即使您使用过Bootstrap或HTML5 Boilerplate。该visuallyhidden班是用来隐藏那些我们不想在视觉上在浏览器中看到的内容，但我们希望还是要提供给屏幕阅读器和搜索引擎。在这种情况下，我们使用了visuallyhidden单词“页”，围绕类，以便屏幕阅读器读出Previous page和Next page或Page one，并Page two通过我们的分页链接去时。但是，我们在屏幕上显示的是简单的，Previous，Next，1，2，等。

.visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
   white-space: nowrap;
}

所有这些元素相结合，有助于使这个分页完全可访问和屏幕阅读器友好。

开始构建更易访问的主题！

可访问性不应该是事后的想法，添加或在项目结束时完成的事情。相反，我们应该尝试将可访问性构建到我们从一开始构建的所有内容中，包括主题和构成它们的组件。

注意：default_pagination过滤器

该default_pagination过滤器可以用来创建一个简单的分页，但是在当前状态下滤波器的输出没有完全。它看起来像这样：

{{ paginate | default_pagination }}

我们目前正在纠正这个问题，但是现在上面的示例是可访问的，并且您可以在主题中更精细地自定义标记。

郑州网站设计