How to customize templates to achieve personalized display for single-page content (such as 'About Us')?

In website operation, personalized display is crucial for shaping brand image and enhancing user experience.Especially for single pages such as "About Us" and "Contact Information" that carry the core information of a company, customized design can better convey the brand story and enhance user trust.AnQiCMS (AnQiCMS) provides a flexible way to achieve this goal, even for users with a shallow technical background, making it easy to get started.

Understanding the single-page content mechanism of Anqi CMS

In the AnQi CMS, single-page content (such as "About Uspage/detail.htmlThis means that if you do not make any special settings, all single pages will adopt this unified layout.

However, when you want a specific single page to have a unique appearance or functionality, such as designing a more narrative layout for the "About Us" page or integrating specific interactive elements for the "Contact Us" page, the custom template feature of Anqi CMS comes in handy.

Implement the core steps of a single-page personalized display

The Auto CMS allows you to specify a completely independent template file for a single page, thus breaking the default unified layout.This process is mainly divided into two core steps: creating a custom template file, and associating the file with specific single-page content in the background.

Step 1: Create a custom template file

Firstly, you need to create a custom template file under the directory of the current template theme you are using. Anqi CMS has clear conventions for the organization of template files:

  1. Template storage path:Your custom single page template file should be placed in the current theme directory underpage/. For example, if your template theme directory istemplate/default/, then your custom file should be placed intemplate/default/page/under.

  2. Template naming:You can name it according to the page ID, for example:page/detail-10.html（If the ID of the “About Us” page is 10), but it is more recommended to use meaningful custom names. For example, you can create a name for the “About Us” page such asabout-us.htmlThe template file, its complete path will betemplate/default/page/about-us.html. This method is more intuitive, convenient for management and identification.

  3. Template content:In this newly created.htmlIn the file, you can freely write the HTML structure of the page and combine it with the template tags provided by Anqi CMS to dynamically obtain page content. Anqi CMS uses syntax similar to Django template engine, with variables enclosed in double curly braces{{变量}}English logic judgment and loop use single curly brackets and percent signs{% 标签 %}.

Step two: Associate the custom template in the background

Create the template file first, and then associate it with specific single-page content:

  1. Enter Page Management:Log in to the Anqi CMS backend, navigate to “Page Resources” -> “Page Management”.
  2. Edit target page:Find the single page you want to customize (e.g., "About Us"), click edit to enter the page editing interface.
  3. Specify a custom template:In the "other parametersHere, enter the relative path and filename of the custom template file you just created.template/default/page/about-us.htmlThen in this field, you just need to fill inpage/about-us.html.
  4. Save and preview:After filling in, save the page and refresh the front page of the website to view the effect.

Build personalized single-page content (code example)

Custom template files are where you can let your creativity soar.Here, you can use the powerful template tags of AnQi CMS to organize page content.page/about-us.htmlTemplate retrieves the title, content, images, and contact information of the "About Us" page:

{# Set page title, keywords and description, which is usually obtained from the TDK settings of the current single page #} {% block title %}{% pageDetail with name=“Title” %} - {% system with name=“SiteName” %}{% endblock %} {% block keywords %}{% endblock %} {% block description %}{% endblock %}

{% block content %}

{# 获取当前单页面的标题 #}
<h1 class="text-center mb-4">{% pageDetail with name="Title" %}</h1>

{# 获取单页面设置的Banner图或幻灯片组图，如果有多张图，这里取第一张作为Banner #}
{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
<div class="page-banner text-center mb-5">
    <img src="{{ pageImages[0] }}" alt="{% pageDetail with name="Title" %} Banner" class="img-fluid rounded shadow-sm">
</div>
{% endif %}

<div class="row">
    <div class="col-md-8 mx-auto">
        {# 获取单页面的主要内容，并使用 |safe 过滤器确保