How to implement template customization for specific categories or pages, for example `page/about.html`?

As an experienced CMS website operation personnel of a well-known security company, I am well aware of the importance of content presentation for user experience and Search Engine Optimization (SEO).AnQiCMS provides a powerful and flexible template customization mechanism, allowing us to create exclusive visual and functional layouts based on different content types or specific page requirements.Today, I will explain in detail how to implement template customization for specific categories or pages in AnQiCMS, for example, the ones we often encounterpage/about.htmlSuch a requirement.

The value of AnQiCMS template customization

In content operation, not all pages are suitable for a unified template.For example, an 'About Us' page may require a simpler layout and corporate culture display, while a 'Product Details' page needs to highlight product images, specifications, and purchase information.By using a custom template, we can accurately control the structure, style, and data calls of each page, thereby optimizing the user experience, increasing page conversion rates, and passing clearer page theme information to search engines, which helps to improve the ranking of relevant content.AnQiCMS based on its high-performance architecture in Go language and Django template engine syntax, provides a solid foundation for this flexible customization.

Understand the structure of AnQiCMS template files

All template files of AnQiCMS are stored uniformly in/templateIn the directory. Each topic (or template package) will have its own independent folder, such as/template/defaultor/template/your_theme_nameIn these thematic folders, we can organize our based on different page types and functions..htmltemplate file. The styles (CSS), JavaScript scripts, and static resources such as images used in the template are stored in/public/static/In the catalog and pass through{% system with name="TemplateUrl" %}tags to refer to.

The template file uses a syntax similar to the Django template engine, variables are enclosed in double curly braces{{变量}}Conditional judgments and loop controls use single curly braces and percent signs{% 标签 %}And it needs to appear in pairs, for example{% if ... %} ... {% endif %}.

Realize the core mechanism of template customization

AnQiCMS provides two main methods for customizing templates for specific categories or pages: throughnaming conventions automatically recognizedandmanually specifying template files in the background.

Firstly, the system itself supports some default custom naming conventions.As long as your template file conforms to these conventions, AnQiCMS will automatically apply them without any additional backend settings. For example:

• Document (article/product) details page:{模型table}/{文档ID}.htmlThis means that if you have a model table namedarticleand an article ID of123thenarticle/123.htmlwill be the exclusive template for that article.
• Document list page:{模型table}/list-{分类ID}.htmlFor example,article/list-45.htmlcan be used as ID for45The list template of article classification.
• a single page detail page:page/{单页面ID}.htmlIf your "About Us" single page in the AnQiCMS backend ID or custom URL alias isaboutthenpage/about.htmlThe file will automatically become the template for this page.

Secondly, for those pages that do not fully comply with the naming conventions or where you want more fine-grained control, AnQiCMS allows you to do so in the backend management interface.Manually specify the template fileThis approach provides great flexibility, ensuring that each page can have its unique appearance and functionality.You can enter the name of your custom template file in the corresponding "Template" field when creating or editing documents, categories, or single pages.For example, for a category named 'Download Center', you can specify the use on its editing pagedownload_list.htmlAs a category list template.

Start withpage/about.htmlguide to practical applications

let's take the request inpage/about.htmlfor example, detailed instructions on how to create a custom template for the 'About Us' single page.

Step 1: Plan the template file path

In your AnQiCMS template theme folder (for example/template/default/), create a subdirectory namedpagein the subdirectory. Then, create your custom template file in the subdirectory, namedabout.html. The final path may be/template/default/page/about.htmlMake sure the encoding of this file is UTF-8 to avoid garbled characters.

Step two: Writepage/about.htmlTemplate content

Inabout.htmlIn the file, you can write the HTML structure according to the content requirements of the "About Us" page, and use AnQiCMS template tags to dynamically retrieve data. Typically, such pages inherit a basic template (such asbase.html）To maintain the overall consistency of the website, and usepageDetailtags to obtain the specific content of a single page.

{% extends "base.html" %} {# 继承您的基础模板，通常包含头部、尾部等通用元素 #}

{% block title %}
    {# 调用页面 TDK 标签来设置页面标题，并附加网站名称 #}
    <title>{% tdk with name="Title" siteName=true sep=" - " %}</title>
{% endblock %}

{% block keywords %}
    {# 调用页面 TDK 标签来设置页面关键词 #}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
{% endblock %}

{% block description %}
    {# 调用页面 TDK 标签来设置页面描述 #}
    <meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}

{% block content %}
    <div class="container about-page">
        {# 使用 pageDetail 标签获取当前单页面的详细信息 #}
        {# 假设当前页面就是 'about' 页面，或者ID为'about' #}
        {% pageDetail aboutPage with name="All" %} 
        
        <h1 class="page-title">{{ aboutPage.Title }}</h1>
        
        {% if aboutPage.Images %}
            <div class="page-banner">
                {# 如果设置了Banner图，显示第一张 #}
                <img src="{{ aboutPage.Images[0] }}" alt="{{ aboutPage.Title }}" />
            </div>
        {% endif %}

        <div class="page-content">
            {# 单页面内容，通常包含HTML，需要使用 safe 过滤器防止转义 #}
            {{ aboutPage.Content|safe }}
        </div>

        <div class="contact-info">
            <h2>联系我们</h2>
            <ul>
                <li>联系人：{% contact with name="UserName" %}</li>
                <li>电话：{% contact with name="Cellphone" %}</li>
                <li>邮箱：{% contact with name="Email" %}</li>
                <li>地址：{% contact with name="Address" %}</li>
            </ul>
        </div>
        {% else %}
            <p>很抱歉，关于我们页面内容暂未发布。</p>
        {% endpageDetail %}
    </div>
{% endblock %}

Step 3: Associate the custom template in the AnQiCMS backend

Log in to the AnQiCMS backend, navigate to **Page Resources ->