How to add image icons instead of text for the first page, last page, previous page, and next page links in pagination tags?

Auto CMS pagination navigation refreshed: Say goodbye to text, embrace personalized image icons

As a senior website operator, we fully understand that every detail of user experience is crucial.An intuitive, beautiful navigation system can greatly enhance the browsing comfort of users on the website.In AnQiCMS, the pagination tag is a core component of the content list page, which is presented by default in the form of 'Home', 'Last Page', 'Previous Page', 'Next Page', etc.However, in order to pursue more personalized and visually attractive designs, many operators would like to replace these texts with exquisite image icons.

AnQiCMS is known for its efficient architecture in Go language and flexible template system, which provides a solid foundation for us to achieve this personalized customization.Today, let's delve into how to巧妙地为“首页”、“末页”、“上一页”、“下一页”these key links replace image icons in the pagination tags of AnQiCMS, making your website unique in the details.

Flexible template system is the foundation of customization

AnQiCMS's template design adopts the syntax of Django template engine, allowing developers and operators to deeply customize every display element of the website. All template files are in.htmlThe suffixes are stored in the directory./templateIn the catalog, while the styles, JavaScript scripts, and images required by the website are uniformly placed in/public/static/Under the directory. It is this clear structure that allows us to modify and expand the page features effortlessly.

To implement the pagination icon replacement, we first need to locate the template file that carries the pagination logic. Usually, this will be the content list page (such asarchive/list.html）、Tag List Page（tag/list.html) or search results page (search/index.html), or a page that is related to these pagesincludecoming public pagination fragment.

deeply understand the pagination tag (pagination) mysteries

AnQiCMS provides a namedpaginationpowerful tag for handling all pagination-related logic. When you call it in the template like this: 

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

You will noticepagesThe object providesFirstPage/PrevPage/NextPageandLastPagesub-objects, each sub-object containsName("link text"),Link("link address"), andIsCurrent(whether it is the current page) and other properties. Our goal is to extract these sub-objects fromNameProperty text corresponding to the attribute, replace it with the carefully prepared image icon.

Prepare your pagination icon

Before starting to modify the template, we first need to prepare the required images and icons.Suggest you prepare an icon for each of the following: "Home

  1. Choose icon format:
    • SVG (Scalable Vector Graphics)：EnglishIf your icon is a vector graphic, it is strongly recommended to use SVG format. They can be displayed clearly at any size and are usually very small in file size.
    • PNG (Portable Network Graphics)：EnglishIf it is a bitmap icon, PNG is the **choice with transparent background. Please ensure the image size is moderate and compressed optimally.
  2. Location:Upload the icon file to a subfolder under your AnQiCMS template static resources directory, for example/public/static/{您的模板名称}/images/pagination/. Assuming your template name isdefault, the path may be/public/static/default/images/pagination/.
  3. Naming convention:Give a meaningful and easily recognizable name to the icon, for example:icon-home.svg/icon-prev.svg/icon-next.svg/icon-last.svg.

Modify the template: change text to image icon

Now, let's go back to the template file, and replace the text in the pagination links with image icons. The core idea is that we no longer output{{pages.FirstPage.Name}}such text, but with a<img>Label to carry the icon.

In yourpaginationInside the label, find the corresponding "Home", "End Page", "Previous Page", "Next Page" links and make the modifications:

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}" title="首页">
                {%- set homeIconPath = system("TemplateUrl") ~ "/images/pagination/icon-home.svg" %}
                <img src="{{ homeIconPath }}" alt="首页" class="pagination-icon pagination-home-icon" />
            </a>
        </li>

        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{pages.PrevPage.Link}}" title="上一页">
                {%- set prevIconPath = system("TemplateUrl") ~ "/images/pagination/icon-prev.svg" %}
                <img src="{{ prevIconPath }}" alt="上一页" class="pagination-icon pagination-prev-icon" />
            </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}}" title="下一页">
                {%- set nextIconPath = system("TemplateUrl") ~ "/images/pagination/icon-next.svg" %}
                <img src="{{ nextIconPath }}" alt="下一页" class="pagination-icon pagination-next-icon" />
            </a>
        </li>
        {% endif %}

        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}" title="末页">
                {%- set lastIconPath = system("TemplateUrl") ~ "/images/pagination/icon-last.svg" %}
                <img src="{{ lastIconPath }}" alt="末页" class="pagination-icon pagination-last-icon" />
            </a>
        </li>
    </ul>
    {% endpagination %}
</div>

Code analysis:

  1. {%- set homeIconPath = system("TemplateUrl") ~ "/images/pagination/icon-home.svg" %}:
    • We usesetLabel defines a variable, storing the image path.
    • system("TemplateUrl")It is a system tag provided by AnQiCMS, which dynamically retrieves the root directory address of the static files of the current website template.This ensures that even if the website deployment environment changes, the image path can be correctly parsed.
    • ~The symbol is used to concatenate strings. We concatenate the template URL with the image path in/images/pagination/.
    • {%-and%}of-Symbols are used to remove logical tags (setThe tag itself) may produce extra blank lines during rendering, keeping the HTML output neat.
  2. <img src="{{ homeIconPath }}" alt="首页" class="pagination-icon pagination-home-icon" />:
    • Here we use<img>tags to display images.
    • srcThe value of the property is the dynamically constructed image path mentioned above.
    • altThe property is crucial as it provides the textual description of the image