Pagination

Example

This is an example of a pagination:

A11y

For pagination, several aria attributes have been added for accessibility reasons and for users with assistive technologies:

• The back and forward buttons have been given the attribute aria-label.
• The current page has been given the attribute aria-current="page".
• The list element with the ellipsis has been given the attribute aria-hidden="true", so that it is not detected by screen readers.

SEO

For better search engine optimization, the get parameter page=1 has been removed from the link to page 1 to avoid duplicate content.

The “prev” and “next” links have also been given the rel attribute:

• rel="prev"
• rel="next"

Data source

1. In the Data source, enable pagination by ticking the checkbox “Pagination”.
2. In the field “Entries per Page” enter the number of entries you want to show on a page (e.g. 10).
3. In the field “Page Number” enter the URL parameter that will control the page number.
   For example, if you want to paginate with the GET parameter ?page=2, enter {url-page}.
   This way, the value of page from the URL will be passed to the Data source.

Once set up, the resulting XML output will include a <pagination> node at the top of the Data source:

              
<name-of-your-datasource>
  <pagination total-entries="34" total-pages="7" entries-per-page="5" current-page="1" />
  ...
</name-of-your-datasource>

            

Call template

Add the template for pagination to your main template, eg. <xsl:import href="utility-pagination.xsl"/>.

Below is a simple example of how to call up pagination in your template.

              
<xsl:if test="/data/name-of-your-datasource/pagination">
    <xsl:call-template name="pagination">
        <xsl:with-param name="pagination" select="/data/name-of-your-datasource/pagination" />
        <xsl:with-param name="pagination-url" select="concat($root ,'/example-page/?page=$')" />
    </xsl:call-template>
</xsl:if>

            

Pagination in Title

For better SEO and to avoid duplicate titles, you can put the pagination easely in the title of your pages, so that every page has a unique title.
Example: <title>All Articles (Page 2) – Your Website</title>

<xsl:text>All Articles</xsl:text>
<xsl:if test="normalize-space(/data/params/url-page) and /data/params/url-page &gt; 1">
    <xsl:text> (Page </xsl:text>
    <xsl:value-of select="/data/params/url-page" />
    <xsl:text>)</xsl:text>
</xsl:if>
<xsl:value-of select="$separator" />
<xsl:value-of select="$website-name" />

Style

Add the following style to your project and the pagination will work out of the box, as Sym8 already has Pico CSS integrated by default.

/* Pagination */

.pagination  {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-left: calc(var(--pico-spacing) / 2);
}
.page-item {
    flex: none;
    min-width: 2.5rem;
    padding: 0;
}

nav li :where(a.page-link, span.page-link) {
    margin: 0;
}

.page-link{
    background-color: var(--pico-card-background-color);
    border: 1px solid var(--pico-secondary-border);
    border-radius: 0;
    color: var(--pico-color);
    display: block;
    margin-bottom: -1px;
    margin-right: -1px;
    padding: calc(var(--pico-nav-element-spacing-vertical) / 2) calc(var(--pico-nav-element-spacing-horizontal) * 2 );
    text-decoration: none;
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--pico-border-radius);
    border-bottom-left-radius: var(--pico-border-radius);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--pico-border-radius);
    border-bottom-right-radius: var(--pico-border-radius);
}

.current .page-link {
    --pico-background-color: var(--pico-primary-background);
    --pico-color: var(--pico-primary-inverse);
    background-color: var(--pico-background-color);
    color: var(--pico-color);
}

.current .page-link:focus,
.current .page-link:hover {
    --pico-background-color: var(--pico-primary-hover-background);
    --pico-color: var(--pico-primary-inverse);
}

.disabled .page-link,
.ellipsis .page-link {
    color: var(--pico-muted-color);
}