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

As an experienced website operator who deeply understands the operation of AnQiCMS, I understand that you want to create and apply an independent template for a specific single page (such as "About Us").This can not only make the page content display more personalized, but also effectively meet specific design and functional requirements.AnQiCMS provides a flexible template mechanism, making this process intuitive and efficient.

Create and apply a detailed guide for an independent template for a specific single-page of Anqicms

AnQiCMS with its high customizability and flexibility, allows website operators to easily meet the diverse needs of content display.Creating and applying independent templates is an effective way to enhance user experience and brand image for single-page websites that have unique styles or structures.This guide will elaborate on 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 currently used template theme. Under the theme directory, according to the AnQiCMS convention, the custom templates for single pages are usually stored inpage/In the subdirectory.

You cantemplate/[您的主题目录]/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 might betemplate/[您的主题目录]/page/about.html.

This new HTML file will serve as the exclusive template for your "About Us" page. In the file, you can introduce the basic layout according to your design needs (via{% extends 'base.html' %}or{% include 'partial/header.html' %}In order to define the structure of the content area, AnQiCMS stipulates that the styles, JS scripts, images, and other static resources used by the template should be stored separately./public/static/Table of contents, and reference it correctly in the template.

Step two: 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 usepageDetailLabel. You can also call 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.contactLabels are used to display preset contact information. Please note that when outputting content that includes HTML tags (such aspageContent), be sure to use|safeA filter to ensure that HTML content is rendered correctly rather than being escaped.

Step 3: Apply custom templates in the background

After the template file is created and written, the next step is to apply this template to your "About Us" page in the AnQiCMS backend.

Log in to the 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 field namedSingle page templateThe field. In this input box, enter the relative path of the custom template file you just created, for examplepage/about.htmlThe AnQiCMS system will look for and render your custom template based on this path.

Confirm all information is correct before clicking the save button. AnQiCMS will associate this custom template with the 'About Us' single page according to the path you enter.

Step 4: Preview and Optimize

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