In website operation, we often encounter some pages that require unique design and layout, which do not follow a unified template like ordinary articles or product detail pages, such as a carefully designed \These single pages carry the brand image and special functions, therefore, setting up custom templates and displaying independent content is the key to improving user experience and meeting business needs.

AnQiCMS (AnQiCMS) is a highly flexible content management system that fully considers the needs of users.It not only supports diversified content display and management, but also provides powerful template customization capabilities, making it simple and efficient to set up independent templates for single pages.

How to support custom single page template in AnQiCMS

The AnQiCMS template system is based on syntax similar to the Django template engine, combining modular design and custom page features, making it possible to create and apply dedicated templates for single pages.This flexibility means you can tailor the interface for each special single-page to stand out among many websites.

To achieve this goal, the main steps are as follows: first, prepare your custom template file, then use AnQiCMS template tags to display content within it, and finally associate the template with your single page in the background.

Step 1: Prepare the custom template file

First, you need to create or modify your template file. AnQiCMS template files are usually named with.htmlsuffix and stored in/templateIn the current theme folder under the directory. To better manage single-page templates, we usually create apageThe subdirectory, and put all the single-page related template files here.

For example, if you are using a name calleddefaultThe topic, and you want to create a unique template for the "About Us" page, you can do so in/template/default/page/directory and create a file namedabout-us.html.

This file will contain your page structure and style.In it, you can add elements in the same way as you would build any ordinary HTML page, but the core lies in how to dynamically fill the content of a single page through AnQiCMS template tags.

<!-- /template/default/page/about-us.html -->
{% extends 'base.html' %} {# 继承基础模板，确保页头页脚等公共部分一致 #}

{% block content %}
    <div class="custom-about-us-container">
        <h1 class="page-title">{% pageDetail with name="Title" %}</h1> {# 显示页面标题 #}

        <div class="page-description">
            <p>{% pageDetail with name="Description" %}</p> {# 显示页面简介 #}
        </div>

        <div class="page-content">
            {# 显示页面主体内容，使用safe过滤器防止HTML标签被转义 #}
            {% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}
        </div>

        {# 这里可以根据需求添加更多自定义布局或内容 #}

    </div>
{% endblock %}

Please note that the template file must use UTF-8 encoding to avoid garbled characters.

Step 2: Display single-page content in the custom template.

In the above example, you may have already noticed{% pageDetail with name="..." %}such tags. This is one of the core template tags provided by AnQiCMS, specifically used to obtain detailed data for a single page.

  • {% pageDetail with name="Title" %}：Used to get the title of the current single page.
  • {% pageDetail with name="Description" %}：Used to get the introduction of the current single page.
  • {% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}：This is the key to obtaining the main content of the single page.name="Content"The command system retrieves the content field, andpageContentis the variable that we assign the content to. It is especially important that,|safeThe filter plays an important role here. Since page content usually contains HTML formatting (such as that generated by rich text editors), if not|safeThe system will automatically escape HTML tags for security reasons, causing the page to display as plain text code.|safeTell the system that this content is safe and can be rendered directly as HTML.

You can flexibly call these tags in the template according to the actual needs of a single page, and even combine them with conditional judgments ({% if ... %}), loop ({% for ... %})Other template tags to build more complex page logic.

Step 3: Associate custom templates with single pages in the background.

After completing the creation of the template file and embedding the content tags, the final step is to inform AnQiCMS which single page should use the custom template you have just made.

  1. Log in to the AnQiCMS backend: Log in to the system using your administrator account.

  2. Navigate to page management: Find the 'Page Resources' under the left menu and click on the 'Page Management' feature.

  3. Edit or create a single page: You can choose an existing single page to edit, or click 'Add Single Page' to create a new page.

  4. Specify a custom templateIn the single-page editing interface, you will see a field named "Single Page Template". Here, you need to fill in the relative path of your custom template file.

    • Continue with the previous "About Us" page example, if your template file is/template/default/page/about-us.htmlthen you need to enterpage/about-us.html. The system will automatically recognize and load this file.

    Key Tips:Make sure the path you enter is exactly the same as the relative path of the actual template file in the theme directory.If the path or file name is incorrect, the system will not be able to find the template, which may cause the page to display incorrectly or become inaccessible.

  5. Save and View: Fill in the form and click Save. Now, when you visit this single page, AnQiCMS will use the custom template you just specified to render its content.

Implement an advanced single-page content display

The strength of custom templates goes far beyond this. You can integrate more tags provided by AnQiCMS into single-page templates, making them more functional:

  • Display other content within the site: If you want to display the latest three articles on the "About Us" page, you can use{% archiveList %}tags to call the article list.
  • call global information: Use.{% system %}Tag to get the website name, LOGO and other global configuration information, or use{% contact %}Tag to display contact information such as phone numbers and email addresses.
  • Use a custom URLIn creating a single-page application, you can set a custom URL (for exampleabout-us), combined with pseudo-static rules, to make your single-page link more readable and SEO-friendly.
  • Make full use of image resources: The single page itself supports uploading Banner images and thumbnails, you can display these images through custom templates by{% pageDetail with name="Images" %}tags.

Through such flexible combination, your single page is no longer just a simple information display, but can perfectly integrate with the brand image and provide a unique user experience, becoming a marketing tool.

Frequently Asked Questions (FAQ)

1. Why did the custom template I set not take effect when I accessed the page?The most common reason is that the template path or filename is filled in incorrectly. Please carefully check the content filled in the field of "Single Page Template" in the "Page Management" section of the background, to ensure that it matches the relative path of the actual template file in the theme directory (for examplepage/your-template.html）Perfect match. In addition, AnQiCMS may have a cache, try clearing the system cache and accessing it again.

2. In addition to the title and content, what information can I display in a single-page template?AnQiCMS provides rich template tags, you can call almost all the data stored in the system in a single page template. For example, you can use{% pageList %}To get other single-page lists,{% archiveList %}To display article or product lists,{% system %}Or to show the global configuration of the website,{% contact %}Display contact information. By combining these tags, you can build a single-page with extremely rich functionality.

3. How will the page display if I use incorrect tags or syntax in my custom template file?If the template file has a syntax error, AnQiCMS will report an error when rendering the page.This usually leads to the page displaying incomplete or directly displaying error messages.It is recommended to develop new templates in a test environment first, and closely monitor system logs or front-end error information to correct problems in a timely manner.