如何在分页标签中，为首页、末页、上一页、下一页的链接添加图片图标而非文字？

安企CMS分页导航焕新颜：告别文字，拥抱个性化图片图标

作为一名资深的网站运营者，我们深知用户体验的每一个细节都至关重要。一个直观、美观的导航系统能极大地提升用户在网站上的浏览舒适度。在AnQiCMS中，分页标签是内容列表页面的核心组成部分，它默认以“首页”、“末页”、“上一页”、“下一页”等文字形式呈现。然而，为了追求更具个性和视觉吸引力的设计，许多运营者都希望能够将这些文字替换为精美的图片图标。

AnQiCMS以其Go语言的高效架构和灵活的模板系统著称，这为我们实现这种个性化定制提供了坚实的基础。今天，我们就来深入探讨如何在AnQiCMS的分页标签中，巧妙地为“首页”、“末页”、“上一页”、“下一页”这些关键链接替换上图片图标，让您的网站在细节处也散发独特魅力。

灵活的模板系统是定制的基础

AnQiCMS的模板设计借鉴了Django模板引擎的语法，允许开发者和运营者深度定制网站的每一个显示元素。所有的模板文件都以.html后缀存放于/template目录中，而网站所需的样式、JavaScript脚本和图片等静态资源，则统一归置在/public/static/目录下。正是这种清晰的结构，让我们能够游刃有余地修改和扩展页面功能。

要实现分页图标的替换，我们首先需要定位到承载分页逻辑的模板文件。通常，这会是内容列表页（如archive/list.html）、标签列表页（tag/list.html）或搜索结果页（search/index.html）中，或者是一个被这些页面include进来的公共分页片段。

深入理解分页标签（pagination）的奥秘

AnQiCMS提供了一个名为pagination的强大标签，用于处理所有分页相关的逻辑。当您在模板中这样调用它时：

{% 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 %}

您会注意到pages对象提供了FirstPage、PrevPage、NextPage和LastPage等子对象，每个子对象都包含Name（链接文本）、Link（链接地址）和IsCurrent（是否为当前页）等属性。我们的目标，就是将这些子对象中的Name属性所对应的文本，替换成我们精心准备的图片图标。

准备您的分页图标

在着手修改模板之前，我们首先需要准备好所需的图片图标。建议您为“首页”、“末页”、“上一页”、“下一页”各准备一个图标。为了保持良好的视觉效果和加载速度，这里有几点建议：

  1. 图标格式选择：
    • SVG (Scalable Vector Graphics)： 如果您的图标是矢量图形，强烈推荐使用SVG格式。它们可以在任何尺寸下清晰显示，且文件体积通常很小。
    • PNG (Portable Network Graphics)： 如果是位图图标，PNG是透明背景的**选择。请确保图片尺寸适中，并进行压缩优化。
  2. 存放位置： 将图标文件上传到您的AnQiCMS模板静态资源目录下的一个子文件夹，例如 /public/static/{您的模板名称}/images/pagination/。假设您的模板名为default，则路径可能为 /public/static/default/images/pagination/。
  3. 命名约定： 为图标起一个有意义且易于识别的名称，例如：icon-home.svg、icon-prev.svg、icon-next.svg、icon-last.svg。

修改模板：将文字变为图片图标

现在，让我们回到模板文件，将分页链接中的文字替换为图片图标。核心思路是，我们不再直接输出{{pages.FirstPage.Name}}这样的文本，而是用一个<img>标签来承载图标。

在您的pagination标签内部，找到对应的“首页”、“末页”、“上一页”、“下一页”链接部分，并进行修改：

<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>

代码解析：

  1. {%- set homeIconPath = system("TemplateUrl") ~ "/images/pagination/icon-home.svg" %}：
    • 我们使用set标签定义一个变量，将图片路径存储起来。
    • system("TemplateUrl")是AnQiCMS提供的一个系统标签，它会动态获取当前网站的模板静态文件根目录地址。这保证了即使网站部署环境发生变化，图片路径也能正确解析。
    • ~符号用于拼接字符串。我们将模板URL与图片在/images/pagination/下的相对路径拼接起来。
    • {%- 和 %} 中的 - 符号是为了移除逻辑标签（set标签本身）在渲染时可能产生的多余空行，保持HTML输出的整洁。
  2. <img src="{{ homeIconPath }}" alt="首页" class="pagination-icon pagination-home-icon" />：
    • 这里直接使用<img>标签来显示图片。
    • src属性的值就是我们上面动态构建的图片路径。
    • alt属性至关重要，它提供了图片的文字描述