How does AnQi CMS display detailed content of a single page (such as About Us, Contact Information)?

In website operation, pages such as "About Us", "Contact Information", and "Privacy Policy" play a vital role. They are the basis for showing visitors corporate information and building trust.AnQiCMS as an efficient content management system, provides a very flexible and intuitive way to create and display the detailed content of these single pages.

Understand the positioning of independent pages in AnQiCMS

AnQiCMS classifies this type of page as a "single page", which is different from the 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.

Create and manage independent pages in the AnQiCMS backend

To start creating a standalone page, just log in to the AnQiCMS backend, navigate to the left menu's 'Page Resources', and click 'Page Management'.In here, you can add new pages or edit existing ones.

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, for example 'About Us' or 'Contact Us'.
• SEO title, keywords and descriptionThese fields are designed specifically for search engine optimization to help your page gain better visibility in search results. You can fill in relevant SEO information based on the content of the page.
• Custom URL: AnQiCMS allows you to set a simple, friendly URL address for the page (for example/about-usor/contact), this 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, and you can also manually modify it as needed.
• Single page contentThis is the core of the page, where you can enter all the details.AnQiCMS provides a rich-featured editor that supports mixed layout of text and images, video insertion, code display, and other forms of content.It is worth mentioning that if the Markdown editor is enabled on the backend, you can even write content directly using Markdown syntax. The system will automatically convert it to HTML on the front end, making content creation more efficient.
• Single page templateThis is a powerful feature provided by AnQiCMS, 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.If not specified, the page will use the default onepage/detail.htmlTemplate.
• Banner image and thumbnailIf your page needs to display a header banner or list thumbnails, you can upload the corresponding images here.

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

Third, display independent page content in the front-end template

After you create an independent page in the background, the next step is how to display the content in your website's front-end template. AnQiCMS provides special template tags.pageDetailAchieve this with ease.

Generally, the details of a standalone page will usepage/detail.htmlor the custom template file specified in your backend. In this template file, you can utilizepageDetailLabel to retrieve and render various data on the page.

Here are some commonly usedpageDetailUsage example of the label, used to retrieve page title, content, description, etc.:

• Retrieve 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 pageThe main text content of the page usually contains HTML rich text, therefore it needs to be output using|safea filter to prevent HTML tags from being escaped, ensuring that the content is rendered correctly.

  <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 has set a Banner image and you want to display it as a background or image:

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

  HerepageBannerImages[0]means to get the first uploaded image.

By these tags, you can flexibly display various information entered in the background on any position of the website.pageDetailThe tag automatically identifies the ID or URL alias of the current page to retrieve data for the corresponding page. If you need to getspecific IDThe independent page content (for example, displaying a fixed ID "About Us" introduction on the homepage), you can alsoidto specify the parameters:

<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/forLabels for logic, to implement more complex page layout and conditional display. For example, judge whether there is a Banner image, and then decide whether to display a certain area.

Four, actual case: build an independent "Contact Us" page

Let's connect the whole process through a simple "Contact Us" page

1. Create a page in the background:

   • Enter "Page Resources" -> "Page Management", click "Add New Page".
   • Page Name:联系我们
   • SEO title:联系我们 - [您的公司名称]
   • Custom URL:contact
   • Single page content：Please enter your company address, phone number, email, map embed code, and other detailed information in the editor.
   • Single page template：You can leave it blank to use the default.page/detail.html，or to have more precise control, create apage/contact.htmlSpecify here.
   • Click to save.

2. Front-end template writing (withpage/detail.htmlfor example): In yourtemplate/default/page/detail.htmlfile (orpage/contact.html），You can organize the code to display content:

   ``twig <!DOCTYPE html>

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