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

As an experienced CMS website operation person, I know 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 dedicated visual and functional layouts according to different content types or specific page requirements.page/about.htmlSuch a requirement.

English custom value of AnQiCMS template

In content operations, 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 customizing the template, we can accurately control the structure, style, and data calls of each page, thereby optimizing the user experience, improving page conversion rates, and conveying clearer page theme information to search engines, which helps to enhance the ranking of relevant content.AnQiCMS based on the high-performance architecture of Go language and Django template engine syntax, provides a solid foundation for this flexible customization.

Understand the template file structure of AnQiCMS

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

Template files use syntax similar to Django template engine, variables are enclosed in double curly braces{{变量}}Condition judgments and loop controls use single curly braces and percentage signs{% 标签 %}English and the end tags must be paired, for example{% if ... %} ... {% endif %}.

The core mechanism for implementing template customization

AnQiCMS provides two main methods to implement template customization for specific categories or pages: throughnaming conventions recognized automaticallyandmanually specifying the template file in the backend.

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

• Document (article/product) details page:{模型table}/{文档ID}.htmlThis means that if you have a model table namedarticleand an article ID of123so thatarticle/123.htmlwill be the exclusive template for this article.
• Document List Page:{模型table}/list-{分类ID}.htmlFor example,article/list-45.htmlcan be used as ID of45The list template of article classification.
• Single Page Detail Page:page/{单页面ID}.htmlIf your 'About Us' single page in AnQiCMS backend ID or custom URL alias isaboutso thatpage/about.html文件将会自动成为该页面的模板。

Secondly, for pages that do not completely conform to naming conventions, or those you wish to control more finely, AnQiCMS allows you to do so in the backend management interface.Manually specify the template file.This method provides great flexibility, ensuring that each page can have its unique appearance and functionality.You can enter a custom template filename in the corresponding 'template' field when creating or editing a document, category, or single page.download_list.htmlAs a category list template.

Bypage/about.htmlEnglish of 为例的实战指南

English of 让我们以请求中的page/about.htmlEnglish of 为例，详细说明如何为“关于我们”单页面创建一个自定义模板。

English of 第一步：规划模板文件路径

In your AnQiCMS template theme folder (for example/template/default/), create a folder namedpagecreate your custom template file namedabout.html. The final path may be/template/default/page/about.htmlPlease ensure that the encoding of this file is UTF-8 to avoid garbled text issues.

Step 2: Writepage/about.htmltemplate content

Inabout.htmlIn the file, you can write HTML structure according to the content requirements of the "About Us" page, and use AnQiCMS template tags to dynamically obtain data. Usually, such pages inherit a basic template (such asbase.html）to maintain the overall consistency of the website and usepageDetailtags to access 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 a custom template in the AnQiCMS backend

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