How to create and apply an independent template for a specific single page (such as "About Us")?

As a website operator who is well-versed in the operation of AnQiCMS, I understand your need to create and apply an independent template for a specific single page (such as "About Us").This not only allows the page content to be displayed with more personalization, but also effectively meets specific design and function requirements.AnQiCMS provides a flexible template mechanism, making this process intuitive and efficient.

A detailed guide for creating and applying an independent template for a specific single-page of AnQi CMS

AnQiCMS with its high customizability and flexibility, allows website operators to easily meet diverse content display needs.For single pages that have unique styles or structural requirements, such asThis guide will detail how to create and apply a custom template for a specific single-page in AnQiCMS.

Step 1: Create a custom template file

In AnQiCMS, all template files are stored in the root directory of the website/templateIn the folder. First, you need to enter the directory of the current theme template you are using. Under this theme directory, according to the convention of AnQiCMS, the custom template for a single page is usually stored inpage/subdirectory.

You can intemplate/[您的主题目录]/page/Create a new HTML file in the path, for example, if you want to create an independent template for the "About Us" page, you can name itabout.html. Therefore, the complete file path may betemplate/[您的主题目录]/page/about.html.

This new HTML file will serve as your exclusive template for the 'About Us' page. In the file, you can introduce the basic layout according to your design requirements,{% extends 'base.html' %}or{% include 'partial/header.html' %}等方式），并定义内容区域的结构。AnQiCMS规定，模板用到的样式、JS脚本、图片等静态资源，应单独存放在/public/static/Index, and correctly reference it in the template.

Step 2: Write the template content

Inpage/about.htmlIn the file, you can start writing the specific page structure and dynamic content.AnQiCMS supports Django template engine syntax, allowing you to easily insert page titles, content, images, and other system information.

For example, to get the title, description, and main content of the "About Us" page, you can usepageDetailTags. You can also call the global system information, contact information, or navigation list, etc.

Here is an example template code snippet:

{% extends 'base.html' %} {# 继承您的基础模板，确保页面包含统一的头部、底部等元素 #}

{% block title %}
    {# 获取页面的SEO标题，并附加网站名称，提升搜索引擎友好性 #}
    <title>{% tdk with name="Title" siteName=true %}</title>
    {# 获取页面的SEO关键词 #}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    {# 获取页面的SEO描述 #}
    <meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}

{% block content %}
    <div class="about-us-container">
        {# 使用pageDetail标签获取当前单页面的标题 #}
        {%- pageDetail pageTitle with name="Title" %}
        <h1>{{ pageTitle }}</h1>

        {# 使用pageDetail标签获取当前单页面的主要内容 #}
        {%- pageDetail pageContent with name="Content" %}
        <div class="about-content">
            {# 输出内容时，使用safe过滤器防止HTML标签被转义，确保页面样式正确渲染 #}
            {{ pageContent|safe }}
        </div>

        {# 示例：集成系统预设的联系方式，避免在模板中硬编码 #}
        <div class="contact-info">
            <h2>联系我们</h2>
            <p>电话: {% contact with name="Cellphone" %}</p>
            <p>邮箱: {% contact with name="Email" %}</p>
            <p>地址: {% contact with name="Address" %}</p>
        </div>
    </div>
{% endblock %}

In this example,pageDetailThe tag is used to dynamically retrieve the title and content of the current single page.tdkThe tag is used to set the SEO title, keywords, and description of the page, whilecontactLabels are used to display preset contact information. Please note that when outputting content containing HTML tags (such aspageContent), be sure to use|safeFilter to ensure that HTML content is rendered correctly rather than being escaped.

Step 3: Apply the custom template in the background.

Template file creation and writing is complete. The next step is to apply this template to your "About Us" single page in the AnQiCMS backend.

Login to AnQiCMS admin panel, navigate toPage resources -> Page management.

Here, you can find or create your "About Us" page. Click edit to enter the page details.

Scroll down in the page editing form to find the one named“Single Page Template”The field. In this input box, enter the relative path of the custom template file you just created, for examplepage/about.html.AnQiCMS's system will search for and render your custom template based on this path.

Confirm all information is correct and click the save button. AnQiCMS will associate this custom template with the 'About Us' single page based on the path you fill in.

Fourth step: Preview and Optimization

After completing the above steps, you can visit the 'About Us' page through your browser