In AnQiCMS, single pages (such as "About Us", "Contact Information", or specific product landing pages) are an important part of our website content.They usually carry unique information and require a different layout and visual style from other content on the website.Fortunately, AnQiCMS offers great flexibility, allowing you to easily set up a dedicated independent template for each single page, thereby creating a unique user experience.

AnQiCMS template basics: Understanding the presentation mechanism of a single page

AnQiCMS uses a syntax similar to Django's template engine, which makes template creation and customization intuitive and easy to learn. It enables.htmlFormat template files to control page display. Usually, these template files are stored in/templatethe directory of the currently enabled template theme folder.

For single pages, AnQiCMS defaults to searching for and using a 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 landing page with a stronger visual impact, or a contact page containing a specific form, it is particularly necessary to customize a template for it.

The strength of AnQiCMS lies in the fact 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 the single page to be highlighted a unique visual and functional feature.

Teach you step by step how to set up a separate template for single pages

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

Step 1: Create your exclusive template file

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

For example, if you want to create a unique layout for the "About Us" page, you can/template/default/page/Create a file namedabout.htmlThe new file. This file will carry the entire layout and design of the "About Us" page. Similarly, if you have a "Contact Us" page, you can createcontact.html.

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

Step two: carefully write the template content.

After you have created your custom template file, you can start writing its content.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 helps you get the title, content, description, and other detailed information 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' %}Inherited a basic layout, which helps maintain the overall structure and style of the website.
  • IntitleBlocks, we go throughpageDetail with name="Title"Retrieved the title of the current single page and usedsiteName=trueAdded the website name while usingtdkTags set keywords and descriptions, which help with SEO.
  • IncontentBlocks, we use<h1>The label displayed the single page title and throughpageDetail pageContent with name="Content"Obtained the detailed content entered in the page editing area. Note that here the use of|safeFilter, because the content entered from the back-end editor usually contains HTML tags,safeThe filter ensures that these HTML tags are correctly parsed by the browser instead of being displayed as plain text.
  • Also, you can flexibly embed other AnQiCMS tags according to your needs, such ascontacttags to display the preset contact information.

Step 3: Associate the template with the single page in the background

After completing 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. Log in to the AnQiCMS admin interface.
  2. Find and click in the left navigation bar"Page Resources"and then select“Page Management”.
  3. Here, you can choose to edit an existing single page or click“Add Single Page”to create a new page.
  4. After entering the editing page of a single page, you will see a namedSingle page templatefield.
  5. In this field, you need to enter the relative path and filename of the custom template file you just created. For example, if you create a file is/template/default/page/about.html, then you just need to fill in the field here.page/about.html.
  6. Click after filling in“OK”Save your changes.

Step 4: Publish and verify

After saving the settings, please clear the website cache (there is an option to "Update Cache" at the bottom left of the admin menu), then visit your website's front end and check the corresponding single page. At this point, you should be able to see that the page has been customized according to your settings.about.htmlThe template style is displayed correctly. Check the layout, content, and functionality to ensure they meet expectations.

Create a unique user experience.

By setting up a separate template for the single page, you will gain great content operation flexibility.This can not only help you create more attractive exclusive pages for important brand stories, product introductions, or marketing activities, improve user experience, but also benefit from SEO, through differentiated page structure and content layout, better serving specific search intentions.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 theme directory.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 of the template files clear, convenient for management and maintenance.

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

A2:In this situation, you can check 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 in the background are exactly the same as the actual created file (including case).
  2. Check if the template file exists:Make sure you create the.htmlThe file indeed exists in the specified template directory.
  3. Clear the cache:At the bottom of the left menu in the AnQiCMS admin panel, 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.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 a custom single-page template, what AnQiCMS tags can I use to get page content and site information?

A3:In a 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" %}Get the title,{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}Get page content.
  • systemTags:Used to get global configuration information of the website, such as website name{% system with name="SiteName" %}Website Logo{% system with name="SiteLogo" %}etc.
  • tdkTags:Used to set or get page SEO meta information, such as title, keywords and description. For example<title>{% tdk with name="Title" %}</title>.
  • contactTags:Get the website contact information, such as phone{% contact with name="Cellphone" %}, email, etc.
  • **`navList