How to customize AnQiCMS's Tag detail page template (`tag/list.html`)?

As an experienced veteran in website operations for many years, I know that every detail of a page can affect the overall performance of the website, especially in SEO and user experience.AnQiCMS as an efficient and flexible content management system, it provides us with powerful customization capabilities, allowing us to make each page unique.Today, let's talk about a very important template in AnQiCMS - the Tag detail page template (tag/list.htmlHow to perform deep customization to make your website tab page come alive.

Give your tabs more possibilities: customize the AnQiCMS Tag detail page template.tag/list.html)

In a content management system, tags (Tag) are a powerful tool for organizing and associating content.A well-designed tag detail page that not only helps users quickly find related content of interest, but is also the key for search engines to understand the structure of the website content, improve page inclusion, and ranking.AnQiCMS is well-versed in this field, providing us withtag/list.htmlThis core template allows us to freely create the display style of tab pages.

Why do we need customizationtag/list.html?

Perhaps you may ask, the system's default tab page can already display content normally, why do we need to take the trouble to customize it?

The answer is simple: to exceed 'normal' and achieve 'excellent'.

  1. Improve SEO performance:The default template often has single content, which is not conducive to search engine crawling and understanding.By customization, we can set a unique TDK (Title, Description, Keywords) for each tab, add rich text descriptions, even integrate related hot tags, thus enhancing the professionalism and authority of the page.
  2. Optimizing user experience: Users enter the page through tags and expect to see clear, attractive related content.Custom templates allow us to better organize content, provide more intuitive navigation, such as adding breadcrumbs, popular article recommendations, etc., and reduce the bounce rate.
  3. Strengthen brand image:Every page is an extension of the brand image. Customized tab pages can ensure consistency with the overall style of the website, and even in some cases, differentiation design can be made according to the characteristics of the tags, allowing users to feel the professionalism and care of the website.
  4. Business expansion potential:For some websites with specific business models, such as e-commerce and knowledge charging, the tabs can be directly converted into potential marketing entry points by integrating product parameter filtering, specific ad slots, and so on.

Find your “canvas”:tag/list.htmllocation

In the AnQiCMS template system,tag/list.htmlThe file is usually located in the root directory of the theme you are currently using, the specific path is:/template/{您的模板目录名称}/tag/list.html. You can directly edit this file online through the "Template Design" feature of the AnQiCMS backend, or download it locally using FTP or SSH tools to make modifications, and then upload it to overwrite.

The template creation of AnQiCMS follows the Django template engine syntax, which is very friendly for operators familiar with web development. It uses{{变量}}to output data,{% 标签 %}To handle logic control and data calls, concise and powerful.

Core 'Paint': Understand tab data calls

Intag/list.htmlIn the template, there are two key template tags that are the foundation for your customization:

  1. {% tagDetail ... %}: Get the details of the current tagWhen the user visits a tab, the system will automatically identify the ID of the current tab.tagDetailTags allow us to easily obtain the name, description, and link information of the tag itself.This is crucial for constructing page titles, meta descriptions, and displaying tag introductions in the main body of the page.For example, you can go through{% tagDetail with name="Title" %}to get the name of the current tab, or{% tagDetail with name="Description" %}to get the description of the tab.

  2. {% tagDataList ... %}List documents associated with the current tag tag/list.htmlThe main responsibility of the page is to display articles or products associated with the current tag.tagDataListThe tag is exactly for this. It can filter out all documents marked with the current tag ID.At the same time, it also supports pagination, allowing you to easily control the number of items displayed per page.You can call it like this:{% tagDataList archives with type="page" limit="10" %}of whicharchivesIs the variable name you specified for the document list,type="page"Enables pagination,limit="10"It set the display of 10 items per page.

Start drawing: Customtag/list.htmlPractice steps

Now, let's customize your Tag detail page template step by step.

The first step: optimize the page's TDK (Title, Description, Keywords)

This is the most important aspect of SEO optimization. You can usetdkTags, combined withtagDetailTags to dynamically generate this metadata.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {# 页面标题：使用标签名称，并加上网站名称，提升识别度 #}
    <title>{% tdk seoTitle with name="Title" siteName=true sep="_" %}{{seoTitle}}</title>
    {# 页面关键词：使用标签关键词 #}
    <meta name="keywords" content="{% tdk seoKeywords with name="Keywords" %}{{seoKeywords}}">
    {# 页面描述：使用标签描述 #}
    <meta name="description" content="{% tdk seoDescription with name="Description" %}{{seoDescription}}">
    {# 规范链接：有助于避免重复内容问题，提高页面权重 #}
    {%- tdk canonical with name="CanonicalUrl" %}
    {%- if canonical %}
    <link rel="canonical" href="{{canonical}}" />
    {%- endif %}
    {# 引入公共样式和脚本 #}
    {% include "partial/header.html" %} 
</head>
<body>
    {# 页面主体内容，例如导航、Banner等 #}
    {# ... #}

Step two: Build a clear navigation path (breadcrumb)

Breadcrumb navigation can clearly inform the user of their current location, enhancing the ease of use of the website.

    <div class="breadcrumb-nav">
        {% breadcrumb crumbs with index="首页" title=true %}
        <ul>
            {% for item in crumbs %}
                <li><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endfor %}
        </ul>
        {% endbreadcrumb %}
    </div>

Step 3: Display the details of the current tag.

In the main content area of the page, clearly displaying the current tag name and description is an important link to improving user experience.

`twig

<div class="main-content">
    <div class="tag-header">
        <h1>{% tagDetail with name="Title" %}</h1>
        <p>{% tagDetail with name="Description" %}</p>
    </div>

    {# 如果标签有Logo或内容，也可以在这里展示 #}
    {% tagDetail tagLogo with name="Logo" %}
    {% if tagLogo %}
        <img src="{{tagLogo}}" alt="{% tagDetail with name="Title" %}" class="tag-logo">
    {% endif %}

    {% tagDetail tagContent with name="Content" render=true %}