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

In website operation, static pages play an indispensable role. They usually carry relatively fixed and infrequently updated core content such as "About UspageListand single page detail tagpageDetail。These two work together to allow you to easily handle the static content of the website, whether it's building navigation, displaying service lists, or presenting detailed company introductions, you can do it with ease.

Manage the static page content of the flexible backend

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

Here, you can craft each static page with the same meticulous care as you would for 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. These are all key information for optimizing search engine rankings.The content editor supports rich text editing and also supports Markdown, allowing you to enrich page layout as needed.

Especially noteworthy are the options of "Custom URL" and "Single Page Template".Custom URLs allow 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' grants each static page unique display capabilities.page/detail.htmlAs a single page detail template. But if the "About Us" page needs a special layout, and the "Contact Us" page requires another design, you can completely 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 for the page, and even adjust their display order.

PasspageListTag construction page list

When you need to display a series of static pages in a certain area of the website, such as navigation bars, footer links, or product service overviews,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

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

This code will traverse all published static pages and display their titles and links. If your website has multi-site management requirements,pageListAlso supports throughsiteIdParameters to specify 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 only, or you may want to exclude a specific page.foruseifConditional judgment to filter, such as 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>

In this way,pageListLabels can flexibly organize and display a collection of static pages according to your needs.

ApplicationpageDetailLabels display page details

And when a visitor clicks to enter a static page, you need topageDetailLabels can accurately display the specific content of this page.This tag can retrieve all detailed information of a single static page, allowing you to display elements such as the title, content, images, etc. on the page.

In most cases, when a user accesses a static page,pageDetailIt will automatically identify the ID or 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 (for examplepage/detail.htmlor a custom onepage/about.html）Directly callpageDetail，can 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,|safeIt is to 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 the background or display.

If you need to get*specific*details of a page, rather than the page you are currently visiting,idortokenSpecify the parameter to be clear. 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>

In this way,pageDetailLabels can flexibly obtain and display the details of any static page, whether it is the current page or a specified page.

Used in combination, it can achieve maximum efficiency.

The strength of Anqi CMS lies in the seamless connection between its backend management and frontend tags. Every static page you create in the backend, including its custom URL, template, content, and metadata, can be accessed throughpageListandpageDetailLabels are presented accurately on the frontend.

PasspageListBuild a clear website structure, guide users to discover important information; then throughpageDetailPresent a rich and diverse content in an attractive manner to the user.Whether it is to enhance user experience or to optimize search engine rankings, these two sets of tags provide strong support.

Common Questions (FAQ)

  1. 问：Why can't I see any content on the front end even though I created a static page?答：这通常有几个原因。首先，请确保您在后台“页面管理”中发布了该页面。其次，检查您的模板文件中是否正确使用了pageDetailLabel to call page content. If the page is set to use a custom template, make sure the template file exists and the path is correct. In addition, if your page needs to be called throughpageListDisplayed in a list, also check.pageListCheck if the label and its loop logic are correct.

  2. Q: Does the static page content support Markdown? How to display it correctly on the front end?答：是的，Safe CMS的静态页面内容编辑器支持Markdown。在前端模板中，当您使用{% pageDetail with name="Content" %}调用页面内容时，可以通过添加render=trueParameters to ensure that Markdown content is rendered correctly as HTML, for example{% pageDetail pageContent with name="Content" render=true %}{{ pageContent|safe }}Remember to add|safefilters to ensure that HTML tags are not escaped.

  3. 问：How do 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 'Link Type' as 'Category Page Link', and then select the static page you want to add.So, this static page will appear in the navigation bar of your website.