In AnQiCMS, single-page content (such as 'About Us', 'Contact Information', or specific product landing pages) is an important part of our website.They usually carry unique information and require a different layout and visual style from other content on the website (such as article lists or product details).幸运的是，AnQiCMS 提供了极高的灵活性，让你可以轻松地为每一个单页面设置专属的独立模板，从而打造独一无二的用户体验。

AnQiCMS Template Basics: Understanding the Presentation Mechanism of a Single Page

AnQiCMS uses syntax similar to Django's template engine, making template creation and customization intuitive and easy to get started with. It allows for.htmlThe template file format to control the display of the page. Typically, these template files are stored in/templatethe folder of the theme you are currently using under the directory.

For single-page, AnQiCMS defaults to searching for and using a template namedpage/detail.htmlThe template file to display its content.This means that if you do not make any special settings, all single pages will share this default template.However, when a single page requires special design, such as a visually striking landing page for an event or a contact page containing specific forms, it is particularly necessary to customize a template for it.

The strength of AnQiCMS lies in that it not only has default templates, but also allows you to specify custom template files for specific pages.This way, you can maintain the overall style of the website while giving unique visual and functional features to single pages that need to be highlighted.

Hand-holding tutorial on setting up an independent template for single-page

Next, we will introduce how to set up an independent template for a single page in AnQiCMS and ensure that its content is displayed correctly.

First step: Create your exclusive template file

Firstly, you need to create a new template file. To keep the template directory clear and organized, we recommend creating a new template file under the currently enabled template theme folder (for example/template/default/) under create apageSubdirectory, and place all single-page custom template files in thispagethe directory.

For example, if you want to create a unique layout for the "About Us" page, you can/template/default/page/in the directoryabout.htmlThe new file. This file will carry all the layout and design of the "About Uscontact.html.

You can name the template file according to the actual page function or name, which is convenient for management and more identifiable.

Step 2: Carefully write the template content

After you create a custom template file, you can start writing the content within it.In AnQiCMS templates, you can use various tags and variables to dynamically retrieve and display data.

For a single page, the most core tag ispageDetail. This tag can help you get detailed information such as the title, content, and description of the current page.

For example, in yourabout.htmlIn the template, you can write it like this:

{% extends 'base.html' %} {# 继承基础布局，确保网站头部和底部一致 #}

{% block title %}
    <title>{% pageDetail with name="Title" siteName=true %}</title> {# 显示页面标题，并附加网站名称 #}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}

{% block content %}
<div class="container about-us-page">
    <h1 class="page-title">{% pageDetail with name="Title" %}</h1> {# 显示单页面标题 #}
    <div class="page-content">
        {% pageDetail pageContent with name="Content" %} {# 获取并显示单页面内容 #}
        {{ pageContent|safe }} {# 使用 safe 过滤器确保 HTML 内容正确解析 #}
    </div>
    <div class="contact-info">
        {# 假设你需要显示联系方式，可以使用联系方式标签 #}
        <h3>联系我们</h3>
        <p>电话：{% contact with name="Cellphone" %}</p>
        <p>邮箱：{% contact with name="Email" %}</p>
        <p>地址：{% contact with name="Address" %}</p>
    </div>
</div>
{% endblock %}

In this example:

  • We first use{% extends 'base.html' %}Inherits a basic layout, which helps maintain the overall structure and style of the website.
  • IntitleBlocks, we use throughpageDetail with name="Title"Retrieved the title of the current page andsiteName=trueAdded the website name, usingtdkTags set keywords and descriptions, which are helpful for SEO.
  • IncontentBlocks, we use<h1>Label displayed the single page title, and throughpageDetail pageContent with name="Content"Obtained the detailed content of the page editing area. Note, here the following|safeFilter, this is because the content entered from the backend editor usually contains HTML tags,safeThe filter ensures that these HTML tags are correctly parsed by the browser rather than displayed as plain text.
  • Additionally, you can flexibly embed other AnQiCMS tags according to your needs, such ascontacttags to display preset contact information.

Third step: Associate the template with the single-page in the background

Completed the creation and writing of the custom template file, the final step is to inform AnQiCMS which single page should use this new template.

  1. Login to the AnQiCMS admin interface.
  2. Find and click on it in the left navigation bar.“Page Resources”then select"Page Management".
  3. Here, you can choose to edit an existing single-page, or click“Add a single-page”to create a new page.
  4. Enter the editing page of a single page, you will see a page named“Single Page Template”field.
  5. In this field, you need to enter the relative path and filename of the custom template file you just created. For example, if the file you created is/template/default/page/about.html, then you just need to fill in herepage/about.html.
  6. Filled in after, click“OK”Save your changes.

Step 4: Publish and verify

After saving the settings, please clear the website cache (there is an option "Update Cache" at the bottom of the left menu in the background), then visit your website's front end and check the corresponding single page. At this time, you should be able to see that the page has been updated according to your customabout.htmlThe template style displays content correctly. Please check if the layout, content, and functionality are all as expected.

Create a unique user experience

By setting up an independent template for the single-page, you will gain great content operation flexibility.This not only allows you to create exclusive and attractive web pages for important brand stories, product introductions, or marketing campaigns, enhancing user experience, but also benefits in SEO by providing differentiated page structure and content layout to better serve specific search intent.AnQiCMS is committed to providing highly customized solutions, and the single-page independent template is a microcosm of its powerful functions, helping small and medium-sized enterprises and content operation teams stand out in the fierce market competition.

Frequently Asked Questions (FAQ)

Q1: The custom single-page template file should be placed in which directory of AnQiCMS?

A1:It is recommended to place the custom single-page template file in the currently enabled template theme.pageUnder the subdirectory. For example, if your template theme isdefault, then the file path can be/template/default/page/your-custom-page.html. This helps to keep the organization structure of the template files clear, convenient for management and maintenance.

Q2: If I set a custom template, but the front-end page displays incorrectly, how should I investigate?

A2:In this case, you can investigate from the following aspects:

  1. Check the template file path and name:Confirm that the path and filename you entered in the "Single Page Template" field on the backend are exactly the same as the actual file created (including case).
  2. Check if the template file exists:Ensure that you have created.htmlThe file indeed exists in the specified template directory.
  3. Clear cache:In the AnQiCMS backend left menu bottom, click "Update Cache" to ensure the system loads the latest template files.
  4. Check for template syntax errors:Check if there are any syntax errors in your custom template file for HTML or AnQiCMS template tags.Even a small error can cause the page to fail to parse normally.
  5. CheckextendsandincludePath:If your custom template inherits from other templates or includes code snippets, make sure that the paths for inheritance and inclusion are correct.

Q3: In the custom single-page template, what AnQiCMS tags can I use to get page content and site information?

A3:In the custom single-page template, you can use various AnQiCMS tags to retrieve and display content:

  • pageDetailTags:This is the tag to retrieve the core content of the current single page, for example:{% pageDetail with name="Title" %}to get the title,{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}Get page content.
  • systemTags:Used to get the global configuration information of the website, such as the website name{% system with name="SiteName" %}、website logo{% system with name="SiteLogo" %}etc.
  • tdkTags:Used to set or get the page SEO meta information, such as title, keywords, and description. For example<title>{% tdk with name="Title" %}</title>.
  • contactTags:Get the contact information of the website, such as phone number{% contact with name="Cellphone" %}, email, etc.
  • **`navList