How to customize a template to achieve personalized display of single-page content (such as "About Us")?

In website operation, personalized display is crucial for shaping brand image and improving user experience.Especially single pages such as "About Us" and "Contact Information" that carry the core information of a company, through 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 little technical background.

Understand the single-page content mechanism of Anqi CMS

In Anqi CMS, single-page content (such as "About Us", "Service Introduction", etc.) is unifiedly maintained in the background under "Page Resources" -> "Page Management". The system provides a default display template for single pages, usually located in the current theme directory.page/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" page, the custom template feature of Anqi CMS can come in handy.

The core steps to implement a single-page personalized display

The AnQi CMS allows you to specify a completely independent template file for a single page, thereby 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

First, you need to create a custom template file in the directory of the template theme you are currently using. Anqicms 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.page/In the folder. For example, if your template theme directory istemplate/default/, then your custom file should be placed intemplate/default/page/below.

2. Template naming:You can name it according to the page ID, for examplepage/detail-10.html(If the ID of the "About Us" page is 10), but it is more recommended to use a meaningful custom name. For example, you can create a name for the "About Us" page namedabout-us.htmlThe template file, then its full path will betemplate/default/page/about-us.htmlThis method is more intuitive, convenient for management and identification.

3. Template content:In this new one.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 the page content. Anqi CMS uses a syntax similar to the Django template engine, and variables are enclosed in double curly braces{{变量}}Logical judgments and loops use single curly braces and percent signs{% 标签 %}.

Step two: Associate the custom template in the background

After creating the template file, the next step is to associate it with the specific single-page content:

1. Enter Page Management:Log in to the AnQi CMS backend, navigate to "Page Resources" -> "Page Management".
2. Edit the target page: Find the single page you want to customize (for example, "About Us"), click edit to enter the page editing interface.
3. Specify a custom template:In the 'Other Parameters' section of the page editing interface, you will find a field named 'Single Page Template'.Enter the relative path and filename of the custom template file you just created.For example, if you create a file that istemplate/default/page/about-us.html, then you just need to fill in this field.page/about-us.htmlJust do it.
4. Save and preview:After filling in, save the page and refresh the front desk of the website to view the effect.

Build personalized single-page content (code example)

The custom template file is where you can unleash your creativity. Here, you can use the powerful template tags of Anqi CMS to organize page content.This is a simplified example of how topage/about-us.htmlRetrieve the title, content, images, and contact information of the "About Us" page from the template:

`twig {# Assume there is a basic layout template, such as base.html, for a unified header, footer, etc. #} {% extends 'base.html' %}

{# Set page title, keywords and description, which are usually obtained from the TDK settings of the current single page #} {% block title %}{% 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 过滤器确保