In website operation, pages such as "About UsAnQiCMS as an efficient content management system, provides a very flexible and intuitive way to create and display the detailed content of these single pages.

一、Understanding the Position of Independent Pages in AnQiCMS

AnQiCMS classifies such pages as "single-page", which is different from conventional articles or product lists. Each single-page usually carries a unique, non-periodic updated information.The system provides a dedicated management entry and rich customization options for these pages, ensuring that you can easily publish and update them.

二、Creating and Managing Independent Pages in AnQiCMS Backend

To start creating an independent page, simply log in to the AnQiCMS backend, navigate to the "Page ResourcesHere, you can add new pages or edit existing pages.

When adding or editing a page, you will see a series of fields that help you fully define this page:

  • Page NameThis is the title displayed on your page in the front end, such as "About Us" or "Contact Us".
  • SEO title, keywords, and descriptionThese fields are designed for search engine optimization, which can help your page achieve better visibility in search results. You can fill in relevant SEO information based on the page content.
  • Custom URL：AnQiCMS allows you to set a simple and friendly URL address for the page (for example/about-usor/contactThis is not only beautiful but also helps to improve SEO effectiveness.The system will automatically generate a pinyin URL based on the page name you enter as the default value, and you can also manually modify it as needed.
  • Single page contentThis is the core of the page, where you can enter all detailed information.AnQiCMS provides a richly featured editor, supporting mixed layout of text and images, video insertion, code display, and other types of content.It is worth mentioning that if the Markdown editor is enabled on the backend, you can even directly write content using Markdown syntax. The system will automatically convert it to HTML when displaying on the frontend, making content creation more efficient.
  • Single Page TemplateThis is a powerful feature provided by AnQiCMS, where you can specify a unique template file for a specific single page.This means that the "About Us" page can have Style A, while the "Contact Us" page can have Style B, achieving a highly personalized display.page/detail.htmltemplates.
  • Banner image and thumbnailIf your page needs to display a header banner or list thumbnail, you can upload the corresponding images here.

Through these detailed settings, you can ensure that each independent page has a clear structure, optimized content, and a unique display style.

Three, Display independent page content in the front-end template

When you create a standalone page in the background, the next step is to display its content in the front-end template of your website. AnQiCMS provides special template tagspageDetailCome easily to achieve this.

In most cases, the details of independent pages will usepage/detail.htmlOr the custom template file specified in the background. In this template file, you can make use ofpageDetailLabel to get and render data from the page.

Here are some commonly used ones.pageDetailLabel usage examples, used to get page title, content, description, etc.:

  • Get page title:<h1>{% pageDetail with name="Title" %}</h1>If you want the title to include the website name, you can write it like this:<h1>{% pageDetail with name="Title" siteName=true %}</h1>

  • Get the main content of the page： Page main text content usually contains rich HTML text, so it needs to be output using|safefilters to prevent HTML tags from being escaped and ensure correct rendering.

    <article>
    {% pageDetail pageContent with name="Content" %}
    {{ pageContent|safe }}
</article>

  • Get page description (for Meta tags):<meta name="description" content="{% pageDetail with name="Description" %}">

  • Get page Banner image or thumbnail： If your page is set with a Banner image and you want to display it as a background or an image:

    {% pageDetail pageBannerImages with name="Images" %}
{% if pageBannerImages %}
    <div class="page-banner" style="background-image: url('{{ pageBannerImages[0] }}');"></div>
{% endif %}

    HerepageBannerImages[0]represents getting the first image uploaded.

Through these tags, you can flexibly present various information entered in the background at any location on the website.pageDetailLabels will automatically identify the ID or URL alias of the current page, thereby obtaining the data of the corresponding page. If you need to obtainspecific IDThe independent page content (for example, displaying a fixed ID "About Us" introduction on the homepage), you can also throughidParameters to specify:

<div>这是我的公司简介：{% pageDetail with name="Content" id="10" %}|safe}}</div>(Assuming ID 10 is the "About Us" page)

AnQiCMS's template system also supports Django template engine syntax, which means you can combineif/forTags for logic, to achieve more complex page layouts and conditional display. For example, judge whether there is a Banner image, and then decide whether to display a certain area.

Four, Actual Case: Set up an independent 'Contact Us' page

Let's connect the entire process through a simple 'Contact Us' page.

  1. Create a page on the backend:

    • Enter "Page Resources" -> "Page Management", click "Add New Page".
    • Page Name:联系我们
    • SEO title:联系我们 - [您的公司名称]
    • Custom URL:contact
    • Single page contentIn the editor, enter your company's address, phone number, email, and map embed code, etc., in detail.
    • Single Page TemplateYou can leave it blank and use the default one.page/detail.htmlOr to have more fine-grained control, create apage/contact.htmland here specify.
    • click save.

  2. front-end template writing (page/detail.htmlfor example)): In yourtemplate/default/page/detail.html文件中（或者page/contact.html），您可以这样组织代码来显示内容：

    `twig <!DOCTYPE html>

    <meta charset="UTF-8">
{# 使用tdk标签获取页面的SEO标题，并带上网站名称后缀 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取页面的SEO描述 #}
<meta name="description" content="{% tdk with