How to effectively manage and display single-page content on a website using `pageList` and `pageDetail` tags?

In website operation, single-page content plays an indispensable role, usually carrying important information such as "About Us", "Contact Us", "Terms of Service", "Privacy Policy", etc. It needs to be clearly displayed and also requires convenient management. AnQiCMS providespageListandpageDetailThese powerful template tags help us efficiently manage and display these single-page contents.

Manage single-page content: backend operation instructions

AnQiCMS was designed from the beginning to fully consider the content management needs of various websites, its backend interface is simple and intuitive, even beginners can quickly get started.To manage single-page content, we first need to enter the background "Page Resources" module 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 separately for each single page, enhancing the visibility of the page in search results.
• Custom URL:This is a very flexible and powerful feature. AnQiCMS will generate a Pinyin URL by default according to the page name, but you can manually modify it, for example, setting the URL of "About Us" to/about-us.htmlThis not only makes the URL more readable, but also benefits SEO. When the website enables the pseudo-static rules, the custom URL will play a greater role.
• Single page introduction:A brief summary of the page content.
• Content editor:AnQiCMS is built-in with a rich editor, supporting mixed text and images, and allows for easy editing of the main page content.If the background enables the Markdown editor, we can even directly write Markdown formatted content, the system will automatically render it into HTML.
• Single page template: This is a very practical feature. AnQiCMS defaults to usingpage/detail.htmlAs a 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, such aspage/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 attributes, and personalized display capabilities.

Show the content of the single page: pageDetailThe clever use of tags

After we create a single page, it is natural to display its content to visitors.pageDetailTags are created for this purpose, mainly used to obtain and displaya single specific single pagedetailed data.

In most cases, we would be in the detail template of a single page (such astemplate/default/page/detail.htmlUsed inpageDetailtag. The most common use of this tag is to directly obtain the data of the single page being visited.

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

<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 variablepageContent, and userender=trueThe parameter allows the system to automatically convert Markdown formatted content to HTML (if Markdown is enabled on the backend), and then through|safeThe filter ensures that HTML code can be normally parsed and displayed by the browser, rather than being escaped.

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

<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"The page to be retrieved was specified precisely, even though we are not currently there/about-us.htmlOn this page, we can also correctly retrieve its title, description, and link.pageDetailTags providedId/Title/Link/Description/Content/Logo/Thumb/ImagesFields are rich, 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 full content of a single page, but also list multiple single pages in a certain area of the website, such as in the footer navigation, service list, or website map.pageListThe tag is designed for this scenario, it can obtain the list of all or part of single pages on the website.

pageListIts use is relatively direct, it does not require complex parameters, and mainly through loops to traverse the single-page collection obtained. 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 code above,{% pageList pages %}Gathered all single page data and assigned it topagesthe variable. Subsequently, we traverse this array by{% for item in pages %}Loop through this collection, each iteration will assign a single page of data toitemVariable.itemvariable containsId/Title/Link/Description/Content/Logo/ThumbWe can display this information as needed in the loop.

If there are some single pages on the website (such as help documents for background management pages, copyright statements, etc.) that you do not want to display on the front end, althoughpageListThe system does not provide direct filtering parameters, but we can filter out unnecessary pages byiflogical judgment within the loop, 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.

The integration of application and practice

pageListandpageDetailTags are not isolated, they often need to be combined in practical operation to achieve **effect.

1. Navigation and 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 that timepageDetailIt can accurately render the complete content of the page.
2. The versatile use of custom templates:If the "About Us" page needs