How to customize the text content of the 'First Page', 'Previous Page', 'Next Page', 'Last Page' pagination tags in AnQiCMS templates?

As an experienced website operations expert, I am well aware of the importance of website details to user experience and brand image.AnQiCMS (AnQiCMS) with its flexible template mechanism and powerful multilingual support allows us to easily meet these customization needs.Today, let's delve into how to accurately customize the pagination labels such as 'Home', 'Previous Page', 'Next Page', and 'Last Page' in the AnQiCMS template, making your website's pagination not only functional but also full of brand characteristics.

Understand the pagination mechanism of AnQiCMS

The pagination feature in AnQiCMS is usually implemented throughpaginationThe tag is implemented in the template. This tag is responsible for handling complex page number calculations, link generation, and current page status judgment, and then generates a page information that includes all pagination details.pagesThe object is provided for use in the template.

We usually see pagination code like this at the bottom of list pages (such as article list pages, product list pages).

{# 假设我们有一个名为 archives 的文档列表，并且 type="page" 开启了分页 #}
{% archiveList archives with type="page" limit="10" %}
    {# ... 文档列表循环内容 ... #}
{% endarchiveList %}

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        </li>
        {% endif %}
        {# 中间页码 #}
        {% for item in pages.Pages %}
        <li class="page-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{item.Link}}">{{item.Name}}</a>
        </li>
        {% endfor %}
        {# 下一页 #}
        {% if pages.NextPage %}
        <li class="page-item">
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}
        {# 末页 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

In this code, you can see such as{{pages.FirstPage.Name}}/{{pages.PrevPage.Name}}These variables are responsible for outputting texts such as 'Home' and 'Previous Page'.This default text content is usually obtained from the system's language package by AnQiCMS to support multilingual switching.

Custom pagination text: Deep into the language package

The most recommended and flexible way to customize this text is to use the multi-language (locales) mechanism of AnQiCMS.Even if your website currently supports only one language, customizing it in this way can lay a good foundation for future multilingual expansion.

The following are the specific steps:

1. Locate or create a template forlocalesTable of contentsThe template files of AnQiCMS are stored in/templateUnder the directory. Each set of your templates will have an independent directory, for example/template/default. Under this template directory, you need to create a name forlocalesThe folder. If your template already supports multilingual, this directory may already exist.

   `template/ └── your_theme_name/

   ├── config.json
   └── locales/`
   

2. Create or modify the language fileInlocalesIn the directory, you need to create a corresponding folder based on the language of your website, for example, if your website is Simplified Chinese, createzh-cnthe folder; if it is English, createen-us.

   Inzh-cnIn the folder of the language code you choose, create a file nameddefault.ymlYAML file. This file will be used to store your custom text key-value pairs.

   `template/ └── your_theme_name/

   └── locales/
       └── zh-cn/
           └── default.yml`
   

3. Indefault.ymldefined custom textOpen.default.ymlFile, and add the custom pagination text content you want. You can define new keys and values for "Home", "Previous Page", "Next Page", "Last Page". For example:

   YAML

   Example content of default.yml file

   pagination: first_page: “Go to Home Page” previous_page: “<< Previous Page” next_page: “Next Page >>” last_page: “Go to Last Page” # You can also customize the name of the middle page number, if the system does not support the default, you can write it directly in the template