How to manage and display static page content for single-page list tags `pageList` and single-page detail tags `pageDetail`?

In website operation, static pages play an indispensable role, they usually carry fixed and infrequently updated core content such as "About Us", "Contact Information", "Privacy Policy", "Service Introduction". Anqi CMS provides two powerful tools for the management and display of these pages: single page list tagspageListAnd single page detail labelpageDetail. These work together to allow you to easily manage the static content of the website, whether it's building navigation, displaying service lists, or presenting detailed corporate introductions, you can do it with ease.

Flexible management of the static page content in the background

First, let's take a look at how to manage static pages on the Anqi CMS backend.The AnQi CMS provides an intuitive and feature-rich interface for managing static pages, you can find it under the 'Page Resources' in the 'Page Management' module.

Here, you can craft each static page with the same meticulous care as you would a regular article.When creating or editing a page, you can set the page name (i.e., the title displayed on the front end), SEO title, keywords, and page description, which are key information for optimizing search engine rankings.The content editor supports rich text editing and also supports Markdown, allowing you to enrich the page layout as needed.

It is particularly worth mentioning the options of "Custom URL" and "Single Page Template".Custom URL allows you to set a friendly, descriptive link address for the page, which is not only beneficial for SEO but also convenient for users to remember and access.And the 'single-page template' gives each static page unique display capabilities.By default, the system will usepage/detail.htmlAs a single-page detail template. But if the "About Us" page needs a special layout, and the "Contact Us" page needs another design, you can specify different template files for them in the background, for examplepage/about.htmlorpage/contact.htmlThe system will intelligently recognize and apply these custom templates. In addition, you can upload Banner images and thumbnails to the page, even adjust their display order.

BypageListTag building page list

When you need to display a series of static pages in a certain area of the website, such as the navigation bar, footer links, or product service overview,pageListTags can really shine. It can retrieve all the static pages you create in the background and present them in a list.

UsepageListVery simple, you just need to define a variable in the template to receive the page list, then throughforLoop through it. For example, you may want to list pages such as 'About Us', 'Terms of Service', and 'Contact Us' in the website footer:

<ul>
{% pageList pages %}
    {% for item in pages %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
{% endpageList %}
</ul>

This code will iterate through all published static pages and display their titles and links. If your website has multi-site management needs,pageListit also supports getting throughsiteIdSpecify the parameter to get the list of pages under a specific site.

Sometimes, you may not want all static pages to be displayed in the list.For example, you may have a "test page" for internal reference, or you may want to exclude a specific page.At this time, you canforuse labels insideifConditional judgment to filter, for example, excluding pages with ID 1:

<ul>
{% pageList pages %}
    {% for item in pages %}
    {% if item.Id != 1 %} {# 假设ID为1的页面不希望显示 #}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

By this means,pageListThe label can flexibly organize and display a collection of static pages according to your needs.

applypageDetailThe label displays page details

When visitors click to enter a static page, you will need topageDetailThe tag is used to accurately display the specific content of this page. This tag can obtain all the details of a single static page, allowing you to display its title, content, images, and other elements on the page.

In most cases, when a user accesses a static page,pageDetailIt will automatically identify the ID or URL alias (token) of the current page and retrieve the corresponding data. This means that you only need to place it in the template file of static pages (such aspage/detail.htmlor custom by youpage/about.htmlInvoke directlypageDetailTo get the information of the current page:

<article>
    <h1>{% pageDetail with name="Title" %}</h1>
    <div class="page-content">
        {# pageDetail的Content字段支持Markdown渲染，通过render=true开启 #}
        {%- pageDetail pageContent with name="Content" render=true %}
        {{ pageContent|safe }}
    </div>
    {% pageDetail pageImages with name="Images" %}
    {% if pageImages %}
    <div class="page-banner">
        <img src="{{ pageImages[0] }}" alt="{% pageDetail with name='Title' %}" />
    </div>
    {% endif %}
</article>

In the above example, we called the page'sTitleash1title,ContentAs the main content of the page (and enabled Markdown rendering,|safeTo prevent content from being escaped, ensuring that HTML code can be parsed normally), as well as the page'sImages(usually used for Banner images) as a background or display.

If you need to get the details of a *specific* page, rather than the page you are currently visiting, you can useidortokenSpecify the parameter explicitly. For example, you may want to display part of the "About Us" page on the homepage:

<section class="about-us-summary">
    <h2>{% pageDetail with name="Title" id="5" %}</h2> {# 假设“关于我们”的ID是5 #}
    <p>{% pageDetail with name="Description" id="5" %}</p>
    <a href="{% pageDetail with name="Link" id="5" %}">了解更多</a>
</section>

By this means,pageDetailThe label can flexibly obtain and display the details of any static page, whether it is the current page or a specified page.

Combined use, maximize efficiency.

The strength of AnQi CMS lies in its seamless integration of backend management and frontend tags. Every static page you create in the backend, its custom URL, template, content, and metadata, can be accessed throughpageListandpageDetailThe label is accurately presented on the front end.

BypageListBuild a clear website structure, guide users to find important information; then throughpageDetailPresent a rich and diverse content in an attractive manner to the users.In order to enhance user experience or optimize search engine rankings, these two groups of tags provide strong support.

Frequently Asked Questions (FAQ)

1. Ask: Why did I create a static page but still see no content on the front end?Answer: There are usually several reasons. First, make sure you have published the page in the "Page Management" backend. Second, check that the template file is using it correctly.pageDetailThe label is used to call page content. If the page has set a custom template, make sure that the template file exists and the path is correct. Moreover, if your page needs to pass throughpageListDisplay in a list and also checkpageListIs the label and its loop logic correct?

2. Question: Does the static page content support Markdown? How to display it correctly on the front end?Answer: Yes, the Anqi CMS static page content editor supports Markdown. In the front-end template, when you use{% pageDetail with name="Content" %}you can add by calling the page contentrender=trueParameters to ensure that Markdown content is correctly rendered as HTML, for example{% pageDetail pageContent with name="Content" render=true %}{{ pageContent|safe }}Remember to add|safeA filter to ensure that HTML tags are not escaped.

3. Ask: How can I add a link to a static page in the main navigation bar?Answer: You can configure it in the 'Background Settings' -> 'Navigation Settings' in the background.Select the navigation category you want to add a link to, then click “Add Navigation Link”.In the pop-up interface, you can select the "Link Type" as "Category Page Link" and then select the static page you want to add.This static page will appear in the navigation bar of your website.