How are the `pageList` and `pageDetail` tags used to display single-page content such as 'About Us'?

In website operation, content like "About Us", "Contact Information", or "Service Introduction" usually exists as independent pages, and we call it "single page".They are not updated as frequently as blog articles, but they are essential core information of the website.Aanqi CMS providedpageListandpageDetailThese tags allow you to manage and display these single-page contents very flexibly and efficiently.

The "single-page" content in the background management

Before delving into the usage of tags, let's first take a look at how to create and manage single pages in the Anqi CMS backend.After logging in, find "Page Management" under the "Page Resources" module.Here, you can create a new single-page and fill in its core information:

• Page name:This is the title that the user sees on the website's front end.
• Page content:This is the main content of a single page, which can use a rich text editor, and even support Markdown syntax for writing.If the content of your post is in Markdown format, the system can also convert it to HTML during rendering.
• Custom URL:In order to optimize for SEO and user-friendliness, you can set a concise and meaningful URL alias for each single page, such as "about-us" or "contact."}
• SEO title, keywords, description:These are important fields for search engine optimization that can help your single page get a better display in search results.
• Single page template: This is a very practical feature. In addition to using the default single-page template (such aspage/detail.htmlIn addition, you can specify a separate template file for a specific single page to achieve fully customized design and layout.For example, you can design a unique visual style for the "About Us" page, while other single pages maintain a common style.
• Thumbnail and Banner image:If your single page needs to have special pictures or sliders, you can also upload and configure them here.

These backend settings are the foundation for the front-end tags to call data.

Display a single page content:pageDetailTag

When you want to display detailed content of a specific single page at a certain location on the website, such as a dedicated "About Us" page or a specific block on the homepage,pageDetailthe label comes into play.

In most cases, when you visit a single page (such as throughyourdomain.com/about-us.html), the Anqi CMS system will automatically identify the current page and provide you with all the detailed data for that page. This means that inpage/detail.htmlor you can directly use in your custom single-page template{{page.Title}}/{{page.Content}}to get the information of the current page without specifying an ID.

For example, in a standard "About Us" page template (page/about-us.html) you can display content in this way:

<article>
    <h1>{% pageDetail with name="Title" %}</h1>
    <div class="page-content">
        {%- pageDetail pageContent with name="Content" render=true %}
        {{pageContent|safe}}
    </div>
    {%- tdk canonical with name="CanonicalUrl" %}
    {%- if canonical %}
    <link rel="canonical" href="{{canonical}}" />
    {%- endif %}
</article>

This code first retrieves the title of the current single page, then the core content. It should be noted that,ContentFields usually contain HTML or Markdown, in order for the browser to parse and display styles correctly, we will userender=trueparameters (if the content is Markdown) and|safeThe filter tells the system that this content is safe HTML and does not require additional escaping. Finally, if the background has set a specification link, it will also pass through.tdkThe tag outputs it, which is beneficial for SEO.

If you need to call the single-page content with a specific ID or URL alias in other places, such as in a module on the homepage, you can do it like thispageDetailTags:

{# 假设您想在首页展示 ID 为 10 的“公司简介”单页面内容 #}
<section class="company-intro">
    <h2>{% pageDetail with name="Title" id="10" %}</h2>
    <p>{% pageDetail with name="Description" id="10" %}</p>
    <a href="{% pageDetail with name="Link" id="10" %}" class="read-more">了解更多</a>
</section>

{# 或者通过自定义URL别名来获取 #}
<section class="contact-info">
    <h3>联系我们</h3>
    {% pageDetail contactPage with token="contact-us" %}
    <p>{{contactPage.Content|safe}}</p>
    <p>电话：{% contact with name="Cellphone" %}</p>
</section>

Byid="10"ortoken="contact-us"parameter,pageDetailThe tag can accurately retrieve data from a specified single page, allowing you to flexibly refer to it anywhere on the website.

List multiple single-page content:pageListTag

Sometimes, you may need to list multiple single pages in one place, such as displaying links to 'About Us', 'Terms of Service', and 'Privacy Policy' in the footer navigation of a website. At this point,pageListThis tag is very suitable. It will return all the single-page lists created, and you can iterate over and display these pages.

pageListThe label is very intuitive to use, it does not require any additional parameters, just a variable name to carry the returned single-page collection:

<nav class="footer-nav">
    <h3>友情链接</h3>
    <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>

In this example, we usepagesVariables to receivepageListReturn the single-page array and then throughforLoop through each oneitem. Inside the loop,item.LinkIt will output the link of the page,item.TitleThen output the page title. We also added a conditional judgment.{% if item.Id != 5 %}Demonstrate how to flexibly exclude certain specific pages from being listed to ensure that only the content you want is displayed.

Flexible application with tips

1. Template customization:As mentioned earlier, creating a custom template for key single-page (such as "About Us") can greatly enhance the uniqueness and user experience of the page. In the background page management, directly fill in the path of your custom template file (such aspage/about.html)pageDetailThe tag will be automatically applied.
2. SEO-friendly URL:Make full use of the "Custom URL" feature on your single-page site to set up meaningful, SEO-compliant short links, for example, setting the/about/Instead/page/1.html.
3. Content security processing:When displaying single-page content, be sure to use|safefilters. If your content contains Markdown, don't forget topageDetailthe tag withrender=trueParameters, let the system complete the conversion for you.
4. Footer navigation and sidebar: pageListIt is very suitable for building website footer navigation, sidebar links, or "site map" functions, and can quickly generate these link sets.

Of Security CMSpageListandpageDetailThe label aims to provide both powerful and concise single-page content management and display capabilities.Whether it is to accurately display the details of a page or to flexibly build page list navigation, they can all help you easily achieve the layout of the website's content.

Frequently Asked Questions (FAQ)

1. How can I make the "About Us" page have a unique style instead of using the common style of all single pages?

You can edit the 'About Us' single page in the 'Page Management' section of the Anqi CMS backend. At the bottom of the edit page, there is an option for the 'Single Page Template', where you can enter a custom template filename, for examplepage/about.html. Then, create this file in your theme directory and write HTML and CSS according to your design requirements, so that the system will load this custom template separately for the "About Us" page.

2. I have created multiple single pages, but I only want to display a few in the footer navigation and exclude the "Disclaimer" page. How can I do this?

You can usepageListLabel to iterate over all single pages and use them in a loop{% if %}Condition judgment to exclude pages that do not need to be displayed. For example, if the ID of the "Disclaimer" page is7You can write it like this in the template:

{% pageList pages %}
    {% for item in pages %}
        {% if item.Id != 7 %} {# 排除ID为7的页面 #}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endif %}
    {% endfor %}
{% endpageList %}

You can flexibly control which pages are displayed in the list in this way.

3. If my single-page content is written in Markdown,pageDetailcan the tags be displayed correctly?

Yes, the Anqi CMS'spageDetailThe tag supports rendering Markdown content. When you call `Content