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

AnQi CMS page navigation gets a new look: goodbye text, embrace personalized image icons

As a senior website operator, we are fully aware of the importance of every detail of user experience.A user-friendly and aesthetically pleasing navigation system can greatly enhance the browsing comfort of users on the website.In AnQiCMS, pagination tags are the core components of the content list page, and they are presented by default in text forms such as 'Home', 'Last Page', 'Previous Page', 'Next Page', and so on.However, in order to pursue more personalized and visually appealing designs, many operators hope to replace these texts with exquisite picture icons.

AnQiCMS is renowned for its efficient Go language architecture and flexible template system, which provides a solid foundation for us to achieve this personalized customization.Today, let's delve into how to cleverly replace the images for the key links such as 'Home', 'Last Page', 'Previous Page', 'Next Page' in the pagination tags of AnQiCMS, making your website shine with unique charm in the details.

Flexible template system is the foundation of customization

The template design of AnQiCMS has borrowed the syntax of Django template engine, allowing developers and operators to deeply customize every display element of the website. All template files are written in.htmlsuffixes stored in/templateIn the catalog, while the styles, JavaScript scripts, and static resources such as images required by the website are all placed in/public/static/Under the directory. It is this clear structure that allows us to modify and expand the page functions with ease.

To replace the pagination icons, 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.htmlOr search result page (search/index.htmlOr a page among theseincludeA common pagination snippet comes in.

Deep understanding of pagination tags (pagination) The mysteries of

AnQiCMS provides a namedpaginationThe powerful tag, used to handle all pagination 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/NextPageandLastPageand child objects, each child object containsName(Link text),Link(link address) andIsCurrent(Is it the current page) and other properties. Our goal is to replace the text corresponding to these properties in the sub-objects with the carefully prepared image icons.{"key":2Name属性所对应的文本，替换成我们精心准备的图片图标。

Prepare your pagination icon

Before starting to modify the template, we first need to prepare the required image icons.It is recommended that you prepare an icon for “Home”, “End”, “Previous Page”, and “Next Page” each.In order to maintain good visual effects and loading speed, here are some suggestions:

  1. Choose icon format:
    • SVG (Scalable Vector Graphics):If 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):If it is a bitmap icon, PNG is the choice with a transparent background. Please ensure the image size is moderate and compress it for optimization.
  2. Location:Upload the icon file to a subfolder under the static resource directory of your AnQiCMS template, for example/public/static/{您的模板名称}/images/pagination/. Assuming your template name isdefault, the path may be/public/static/default/images/pagination/.
  3. Naming conventions: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, replace the text in the pagination links with image icons. The core idea is that we no longer output directly{{pages.FirstPage.Name}}such text, but with a<img>Label to carry the icon.

Before yourpaginationInside the label, find the corresponding links for 'Home', 'End', 'Previous Page', 'Next Page' and modify them:

<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 usesetTag defines a variable to store the image path.
    • system("TemplateUrl")It is a system tag provided by AnQiCMS that 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 still be correctly parsed.
    • ~The symbol is used to concatenate strings. We concatenate the template URL with the image/images/pagination/path relative to it.
    • {%-and%}of-Symbols are used to remove logical tags (setThe tag itself) may cause extra blank lines during rendering, maintaining the neatness of the HTML output.
  2. <img src="{{ homeIconPath }}" alt="首页" class="pagination-icon pagination-home-icon" />:
    • Here we use<img>tags to display images.
    • srcThe value is the dynamically constructed image path mentioned above.
    • altThe attribute is crucial as it provides the textual description of the image.