In website operation, pages like '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 of AnQiCMS, obtaining and displaying these single-page contents is not only simple and efficient but also highly flexible and customizable.

The AnQi CMS categorizes such independent pages with infrequent content changes as 'single pages' and provides a dedicated management module on the backend for users to easily create, edit, and publish.Below, we will delve into how to manage and display this type of single-page content in the Anqi CMS.

I. Creation and management of the background: the foundation of building single-page content

Firstly, we need to create these single-page 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.Here you can list all the single-page applications that have been created, and you can perform unified operations such as add, delete, modify, and query here.

  2. Create or edit a single pageClick 'Add Single Page' or select an existing page to edit, and you will see a series of configurable fields that collectively make up the rich information of a single page:

    • Page NameThis is the page title, which is also the main name displayed on the front end, such as 'About Us', 'Terms of Service', and so on.
    • Custom URLTo obtain a more friendly and SEO-friendly link, you can set a simple and easy-to-understand custom URL alias for a single page. For example, set a custom URL alias for the "About Us" page./about[en] Its link may well be你的域名/about.html.
    • Single page introduction[en] : This is a brief page description, usually used in SEOmeta description[en] tags, summarizing the content of the page for search engines.
    • KeywordsThe same is used for SEO optimization, you can enter keywords related to the page content, and separate multiple keywords with English commas.
    • SEO titleIf you want the page<title>The label content is different from 'Page Name', it can be set separately here, which is crucial for refined SEO.
    • Single page contentThis is the core of a single-page, a feature-rich editor allows you to create and format content like editing articles, including text, images, videos, etc.It is worth mentioning that if the Markdown editor is enabled, you can also 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 (for examplepage/about.htmlEnable different single pages to have unique display styles.
    • Banner image/thumbnailIf the page requires images, such as 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 is rich in content, clear in structure, and lays a solid foundation for subsequent frontend display and SEO optimization.

Two, Front-end Display: Flexible Use of Template Tags

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

  1. Get the detailed content of a single page (pageDetail) pageDetailTags are 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.html显示当前页面内容，or referencing a specific single page (such as displaying the summary of "About Us") on other pages (like the homepage sidebar)pageDetailare all very applicable.

    • Retrieve the content of the current page When you are in a single-page template file (for example, when a 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"specifies 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 aliasIf you want to display part of the 'About Us' page (such as the home page), you can specify it precisely by its ID or custom URL alias. Assuming the ID of the 'About Us' page is 1, and the custom URL alias isabout:

      <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>

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

  2. Get the list of single pages (pageList) pageListTags are used to get 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, among other 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>

    pageListTags will return an array containing all single-page data (pages) array, you can useforto loop through this array, and throughitem.Link/item.Titleto obtain the link and title of each page. Through conditional judgment ({% if item.Id != 1 %}You can exclude pages that are not needed according to your requirements.

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 current template directory under yourpage/detail.htmlFile to render.But many times, we want the "About Us" page to be different from the "Contact Us" page, with a unique design.The Anqi CMS allows you to specify a dedicated template file for each single page./template/你的模板名/to createpage/about.htmlfile.

  2. How to specify a custom template in the backgroundGo back to the "Page Management" section in the background and edit the "About Us" page. Find the "Single Page Template" field here. Here, you can fill inabout.html(Compared topage/The path of the catalog). After saving, when the user accesses "About"