In website operation, pages such as "About Us" and "Contact Information" are indispensable components. They usually carry relatively fixed and important content such as corporate culture, contact information, and service introduction.For users using AnQiCMS, obtaining and displaying these single-page contents is not only simple and efficient but also highly flexible and customizable.

AnQi CMS categorizes such independent pages with infrequently changing content as 'single-page', and provides a dedicated management module in the background for users to easily create, edit, and publish.Below, we will discuss in detail how to manage and display this type of single-page content in Anqi CMS.

One, backend creation and management: the foundation for building single-page content

First, we need to create these single pages in the Anqi CMS backend. This is like preparing a set of individual introduction cards for your website.

  1. Enter the single page management moduleLog in to the AnQi CMS backend, find the "Page Resources" menu in the left navigation bar, and click "Page Management" under it.This will list all the single pages created, you can perform unified add, delete, modify, and query operations here.

  2. Create or edit a single pageClick "Add a single page" or select an existing page to edit. You will see a series of configurable fields that together make up the rich information of a single page:

    • Page NameThis is the page title, also the main name displayed on the front end, such as "About Us", "Terms of Service", and so on.
    • Custom URL: To obtain a more friendly and SEO-friendly link, you can set a concise and easy-to-understand custom URL alias for a single page. For example, set for the "About Us" page/aboutIts link might be你的域名/about.html.
    • Single page introduction: This is a short page description, usually used in SEO ofmeta descriptiontags, to summarize the page content for search engines.
    • KeywordsThe same field is used for SEO optimization, and keywords related to the page content can be filled in, separated by English commas.
    • SEO titleIf you want the page's<title>The label content is different from the page name, it can be set separately here, which is crucial for refined SEO.
    • Single page contentThis is the core of the single page, a richly featured editor allows you to create and format content like editing an article, including text, images, videos, and more.It is worth mentioning that if you enable the Markdown editor, you can directly use Markdown syntax to write, and the system will automatically convert it to HTML.
    • Single page templateThis is the key to flexibility. You can choose to use the default single-page template (page/detail.html), or specify a custom template according to your needs (such aspage/about.html)，Let different single pages have unique display styles.
    • Banner image/thumbnailIf the page requires images, such as the top banner or list thumbnails, they can all be uploaded and managed here.

By setting these detailed fields, you can ensure that each single-page content is rich, structured clearly, and lays a solid foundation for subsequent frontend display and SEO optimization.

Second, front-end display: flexibly use template tags

In AnQi CMS, the content display of the front-end page is mainly realized through template tags. For single-page content, we mainly usepageDetailandpageListThese tags.

  1. Retrieve detailed content of a single page (pageDetail) pageDetailThe tag is used to retrieve and display all details of a specific single page in a template. Whether you are in the template file of the single page itself (such aspage/detail.htmlDisplay the content of the current page or reference a specific single page (such as an abstract of "About Us") on another page (such as the homepage sidebar),pageDetailare all very applicable.

    • Get the content of the current page When you are in a single-page template file (for example, when the user visits the "About Us" page),pageDetailTags are not requiredidortokenThe parameter, it will automatically identify and retrieve the current single page data being accessed. For example, to display the page title and content:

      <h1>{% pageDetail with name="Title" %}</h1>
<div>
    {% pageDetail pageContent with name="Content" render=true %}
    {{ pageContent|safe }}
</div>

      HerepageContentIs a custom variable name,name="Content"Specify the content field to be retrieved.render=trueThe parameter ensures that if your content is written in Markdown format, the system will automatically render it as HTML.|safeThe filter allows HTML content to be displayed safely without being escaped.

    • Get the content of the page with the specified ID or URL alias.: If you want to display part of the "About Us" page on other pages (such as the homepage), you can specify it precisely by its ID or custom URL alias. Assuming the "About Us" page has an ID of 1 and a custom URL alias ofabout:

      <a href="{% pageDetail with name='Link' id='1' %}">了解我们</a>
<h2>{% pageDetail with name="Title" token="about" %}</h2>
<p>{% pageDetail with name="Description" token="about" %}</p>

      Byid="1"ortoken="about"You can flexibly reference data from a specific single page at any location on the website.

  2. Get a list of single pages (pageList) pageListThe tag is used to retrieve the list of all single pages on a website. This is very useful for building bottom navigation menus, sidebar link lists, or providing a sitemap for various scenarios.

    <ul>
{% pageList pages %}
    {% for item in pages %}
    {# 排除ID为1的“关于我们”页面，假设你想在某个列表里排除它 #}
    {% if item.Id != 1 %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
    {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

    pageListThe tag will return an array containing all single-page data (pages) that you can useforto loop through this array, by usingitem.Link/item.Titleetc. fields to get the link and title of each page. By using conditional judgment ({% if item.Id != 1 %}), can be excluded as needed from the pages to be displayed.

Section 3: Custom Templates: Create a Unique Single Page Style

AnQi CMS provides powerful template customization capabilities, allowing you to design unique display styles for specific single pages.

  1. Default template and custom pathBy default, all single pages will use the template directory under your current template.page/detail.htmlFiles to render. But many times, we want the "About Us" page to be different from the "Contact Us" page, with a unique design. Safe CMS allows you to specify a dedicated template file for each single page.For example, to customize the layout of the "About Us" page, you can access the current template directory (usually/template/你的模板名/) under createpage/about.htmlfile.

  2. How to specify a custom template in the background.Return to the background "Page Management" to edit the "About Us" page, find the "Single Page Template" field. Here, you can enterabout.html(Compared topage/The directory path). Save it and when the user visits "About"