How to customize independent display templates for single pages like 'About Us' to meet specific display requirements?

AnQi CMS template mechanism overview

The template system of AnQi CMS is designed to be very intuitive and powerful, based on the syntax similar to Django template engine, which separates the content presentation from logic control, allowing even users not very familiar with programming to achieve rich page effects through simple editing. All template files are stored in the root directory of the website./templateIn the folder. For a single page, the system usually has a default display template, such aspage/detail.html。But the exquisite part of the CMS is that it allows us to specify any single page to call a completely independent, customized template file.

How to customize an independent display template for a single-page

The goal is mainly achieved in three steps: understanding the structure of the template file, creating and editing a custom template file, and associating the template file with a specific single page in the background.

Step 1: Understand the structure of the CMS template files

Firstly, we need to understand the storage location and naming conventions of single-page templates. Under your CMS template theme directory, there is usually a file namedpageThe folder. By default, all single-page displays may share.page/detail.htmlThis file. The Auto CMS supports a very flexible custom naming method: you can create a name for a specific single page likepage/{单页面ID}.htmlorpage/{自定义URL别名}.htmlThis template file. For example, if you have a "About Us" page, its custom URL alias isabout，那么您可以创建一个名为page/about.htmltemplate file.

第二步：Create and edit independent custom template files

  1. Copy base template as a starting point:For easy start, it is recommended that you first copy the default single-page detail templatepage/detail.htmlto the same directorypageIn the directory, and rename it to the custom name you want, for examplepage/about-us.htmlThe advantage of this is that the new template already includes all the basic page structure and data call logic, allowing you to modify and adjust on this basis without starting from scratch.

  2. Edit template content:Open with text editorpage/about-us.htmlFile.In this file, you can freely use HTML, CSS, and JavaScript to build the visual effects of the page.In terms of content presentation, Anqi CMS provides a rich set of template tags to call backend data.pageDetailTags, it helps us get the title, content, description and other information of the page. For example, to display the title of the page, you can write it like this: 

    <h1>{% pageDetail with name="Title" %}</h1>

    To display the detailed content of the page, this is the core part, which usually includes HTML code generated by a rich text editor, so it is necessary to use|safeFilter to ensure HTML code is parsed and displayed correctly, rather than being escaped: English

    <div class="content-area">
    {% pageDetail pageContent with name="Content" %}
    {{ pageContent|safe }}
</div>

    In addition, you can also call other page elements, such as thumbnails, banner images, etc., and arrange them according to your design requirements. Don't forget to include the common header (header) and footer (footer), which can usually be used{% include "partial/header.html" %}and{% include "partial/footer.html" %}To maintain the consistency of the overall website style.

    Important reminder:Please make sure that your template file is saved in UTF-8 encoding to avoid Chinese character garbling issues.

Third step: Associate the custom template with a single page in the background.

This is a critical step, binding the custom template you have carefully created with a specific single page.

  1. Logging into the Anqi CMS backend:Access your security CMS backend management interface.

  2. Enter 'Page Management':In the left navigation bar, find and click on "Page Resources" under "Page Management". Here is a list of all single pages on your website.

  3. Edit the target single page:Find the single page (such as "About Us

  4. Specify "Single Page Template":In the single-page editing page, you will see an input box named "Single Page Template".Here, you need to enter the relative path and filename of your custom template file.page/about-us.htmlThen, fill in the input box herepage/about-us.html.

  5. Save and view the effect:Completed after filling in, click the 'OK' button at the bottom of the page to save changes.Then, you can visit the 'About Us' page on the front desk of the website, refresh the browser cache, and you will see the effect of the customized template you created.

Application scenarios of custom template

This ability to customize independent templates for single pages greatly expands the display possibilities of Anqi CMS:

  • Unique brand story page:Allow you to showcase your company's history, culture, or team members in a more creative and attractive way.
  • Interactive contact page:In addition to basic contact information, you can integrate maps, online forms, or social media entries to provide a richer user experience.
  • Special topic or event landing page:Design a dedicated page for specific marketing activities or thematic content to avoid distraction and improve conversion rates.
  • Download center or materials display page:Efficiently display file lists, document previews, and other features with a specific layout.

Through the above steps and thinking, you can skillfully control the display of single pages in the Anqi CMS, making your website content more personalized and attractive.

Common Questions (FAQ)

Q1: Why does the front page show a blank screen or an error message if I set a custom template for the single page?A1：This is usually caused by an incorrect template file path, a missing template file, or a syntax error in the template file content.Please first carefully check whether the path you filled in the field of "Single Page Template" in the background is completely consistent with the actual file path (including case).Then, ensure that the file actually exists in your template theme directory.If the path is correct, please check whether there are missing end tags, incorrect variable names, or incorrect tag usage in the template file content.Finally, try clearing the website cache and browser cache.

Q2：How can I prevent the custom template from inheriting the common header and footer?A2：Of course, you can. When creating a custom template, you can choose not to use{% extends "base.html" %}Such inheritance label.Instead, start from scratch writing the HTML structure, containing only the exclusive content of your single page.base.html, and only overwrite{% block content %}等内容区域。If you do not inherit at all, you need to manually include all necessary HTML structure in the custom template, including<head>metadata, CSS, and JS references.

Q3: How do I call the custom fields added to the background of a single page in my custom template (such as the 'Honor Qualifications' list)?A3: If your single page model includes custom fields, you can call them throughpageDetailtags. For example, if you have added a field namedhonor_listThe custom field, and the field stores a list of images, you can call it in the template like this: “`twig {% pageDetail honorImages with name=“honor_list” %} {% if honorImages %}

<div class="honor-section">
    <h3>荣誉资质</h3>
    <ul>
        {% for imgUrl in honorImages %}
            <li><img src="{{ imgUrl }}" alt="荣誉图片"></li>
        {% endfor %}
    </ul>