In website operation, single-page content plays an indispensable role. It usually carries important information such as 'About Us', 'Contact Us', 'Terms of Service', and 'Privacy Policy', which requires both clear display and convenient management. AnQiCMS providespageListandpageDetailThese powerful template tags help us efficiently manage and display these single-page contents.

Manage single-page contents: Backend operation guidance

AnQiCMS was designed with full consideration of the content management needs of various websites, its backend interface is simple and intuitive, even for users who are new to it, they can get started quickly.To manage single-page content, we first need to enter the "Page Resources" module in the background and select "Page Management.

Here, you can clearly see all the single-page lists created. When you click 'Add Single Page' or edit an existing page, you will find a series of practical configuration options:

  • Page Name:This is the title displayed on the front page of the page.
  • SEO title, keywords, description:This is crucial for search engine optimization. We can set these meta information for each single page separately to enhance the visibility of the page in search results.
  • Customize URL:This is a very flexible and powerful feature. AnQiCMS will generate a pinyin URL based on the page name by default, but you can also modify it manually, for example, setting the URL of "About Us/about-us.htmlThis not only makes the URL more readable, but also有利于SEO. When the website has enabled the pseudo-static rules, custom URLs will play a greater role.
  • Single page introduction:A brief summary of the page content.
  • Content editor:AnQiCMS built-in a feature-rich editor, supporting mixed text and images, and can easily edit the main content of the page.If the background enables the Markdown editor, we can even directly write Markdown formatted content, and the system will automatically render it into HTML.
  • Single Page Template:This is a very practical feature. AnQiCMS defaults to usingpage/detail.htmlAs the display template for all single pages, but if a page (such as "Contact Us") requires a unique design layout, you can specify a custom template for it, for examplepage/contact.htmlThis greatly enhances the flexibility of page display.
  • Banner image, thumbnail:Add visual elements to the page, displaying in lists or specific layouts.

Through these detailed settings on the backend, we can ensure that each single page has a good content structure, SEO properties, and personalized display capabilities.

Display single page content:pageDetailThe magic use of tags

When we create a single-page application, it is natural that we need to display its content to the visitors.pageDetailTags are born for this purpose, mainly used for obtaining and displayinga single specific single-pagedetailed data.

In most cases, we will be on the single-page detail template (for exampletemplate/default/page/detail.html) usedpageDetailtags. The most common usage of this tag is to directly obtain the single-page data being accessed.

For example, to display the title and content of a single page on the page, we can write the template code in this way:

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

In the above example,{% pageDetail with name="Title" %}It directly outputs the title of the current single page. For the contentpageContentWe assign it to a variablepageContentand is usedrender=true参数让系统自动将 Markdown 格式的内容转换为 HTML（如果后台启用了 Markdown），再通过 English|safeThe filter ensures that HTML code can be normally parsed and displayed by the browser, rather than being escaped.

If we need to retrieve single-page data for a specific ID or custom URL alias (token), for example, to display part of the "About Us" page in a certain area of a non-single-page detail page, we can specify the parameters as follows:

<section class="about-summary">
    <h2>{% pageDetail with name="Title" token="about-us" %}</h2>
    <p>{% pageDetail with name="Description" token="about-us" %}</p>
    <a href="{% pageDetail with name="Link" token="about-us" %}">了解更多</a>
</section>

Here,token="about-us"Precisely specified the page to be retrieved, even if we are not currently on it/about-us.htmlOn this page, we can also correctly retrieve its title, description, and link.pageDetailTags provideId/Title/Link/Description/Content/Logo/Thumb/ImagesAn extensive field, convenient for us to extract various information as needed.

List the content of a single page:pageListFlexible Use of Tags

Sometimes we not only need to display the complete content of a single page, but also list multiple single pages in some area of the website, such as in the footer navigation, service list, or sitemap.pageListTags are designed for this scenario, they can retrieve the list of all or part of the single pages on a website.

pageListThe usage is relatively direct, it does not require complex parameters, and it mainly traverses the obtained single-page collection through loops. For example, to list all single pages in the footer as auxiliary navigation:

<nav class="footer-nav">
    <h3>快速链接</h3>
    <ul>
        {% pageList pages %}
            {% for item in pages %}
                <li><a href="{{item.Link}}">{{item.Title}}</a></li>
            {% endfor %}
        {% endpageList %}
    </ul>
</nav>

In the above code,{% pageList pages %}Obtained all single page data and assigned it topagesvariable. Then, we go through{% for item in pages %}looping through this collection, each iteration will assign a single page of data toitema variable.itemvariable containingId/Title/Link/Description/Content/Logo/ThumbThe fields can be displayed in the loop as needed.

If there are some single-page applications (such as help documents, copyright statements, etc.) on the website that you do not want to display publicly on the front end, althoughpageListIt does not provide direct filtering parameters, but we can filter out the unnecessary pages to be displayed in the loop byiflogical judgment, for example:

<nav class="main-nav">
    <ul>
        {% pageList pages %}
            {% for item in pages %}
                {# 假设Id为5的页面是内部页面，不希望显示在前台 #}
                {% if item.Id != 5 %}
                    <li><a href="{{item.Link}}">{{item.Title}}</a></li>
                {% endif %}
            {% endfor %}
        {% endpageList %}
    </ul>
</nav>

This way of making conditional judgments within a loop provides us with great flexibility, allowing us to decide whether to display based on the page ID, title, or other attributes.

Fusion application and **practice

pageListandpageDetailTags are not isolated entities; they often need to be used in combination during actual operations to achieve **effect.

  1. Navigation联动with content:We can usepageListGenerate dynamic single-page navigation links at the top menu or footer of the website. When the user clicks these links, the page will jump to the corresponding single-page detail page, at this timepageDetailIt can accurately render the complete content of the page.
  2. The versatility of custom templates:If the "About Us" page needs