In website operation, content such as "About UsThey are not updated as frequently as blog posts, but they are essential core information of the website.pageListandpageDetailThese tags allow you to manage and display these single-page contents very flexibly and efficiently.

Single-page content in the background management

Before delving into the usage of labels, let's first look at how to create and manage single pages in the Anqi CMS backend.Log in to the backend and find "Page Management" under the "Page Resources" module.

  • Page Name:This is the title that users see on the website's front page.
  • Page content：This is the main content of a single page, which can use a rich text editor, and even supports Markdown syntax for writing.If your content is in Markdown format, the system can also convert it to HTML during rendering.
  • Customize URL:For SEO and user-friendliness, you can set a simple 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, which can help your single page get 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 also specify an independent template file for a specific single-page, thereby achieving fully customized design and layout.For example, you can design a unique visual style for the "About Us" page while keeping other single pages in a universal style.
  • Thumbnail and Banner image:If your single page needs to have featured images or carousels, you can also upload and configure them here.

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

Display single page content:pageDetailtags

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,pageDetailLabels come in handy.

In most cases, when you access a single-page (for example, throughyourdomain.com/about-us.html)), the AQ CMS system will automatically recognize the current page and provide all the detailed data for that page. This means that inpage/detail.htmlIn your custom single-page template, you can directly use{{page.Title}}/{{page.Content}}to obtain the information of the current page without needing to specify an ID.

For example, on 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, and then the core content. It is important to note,ContentFields often contain HTML or Markdown, in order for the browser to correctly parse and display styles, we will userender=trueparameters (if the content is Markdown) and|safeFilter, this tells the system that this content is safe HTML and does not require additional escaping. Finally, if a link to the specification is set on the back end, it will also be throughtdkLabel it for output, which is beneficial for SEO.

If you need to call a single-page content with a specific ID or URL alias in other locations, such as in a module on the homepage, you can use 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>

Passid="10"ortoken="contact-us"parameters,pageDetailThe label can accurately obtain the data of a specified single page, allowing you to flexibly refer to it at any location on the website.

List multiple single page contents:pageListtags

Sometimes, you may need to list multiple single pages in one place, such as displaying links like “About Us”, “Terms of Service”, and “Privacy Policy” in the footer navigation of a website.pageListThe label is very suitable. It will return all the single page lists that have been created, and you can iterate over these pages and display them.

pageListThe label is very intuitive to use, it does not require any additional parameters, just a variable name to carry the return of the 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 usepagesa variable to receivepageListReturns a single-page array, then throughforlooping through each oneitemIn the loop,item.Linkoutputs the link of the page,item.Titlethen outputs the page title. We also added a conditional judgment{% if item.Id != 5 %}Come to demonstrate how to flexibly exclude certain specific pages from being listed, ensuring that only the content you want is displayed.

Flexible use with tips

  1. Template customization:As previously mentioned, creating custom templates for key single-page sections (such as "About Us") can greatly enhance the uniqueness and user experience of the page. In the background page management, directly enter the path to your custom template file (for example,page/about.html)pageDetailTags will be automatically applied to it.
  2. SEO-friendly URL:Fully utilize the "Custom URL/about/Instead of/page/1.html.
  3. Content security processing:Be sure to use when displaying single-page content,|safeFilter. If your content contains Markdown, don't forget to inpageDetailtag.render=trueParameter, let the system convert it for you.
  4. Footer navigation and sidebar: pageList非常适合用来构建网站的页脚导航、侧边栏链接或者“网站地图”等功能，可以快速生成这些链接集合。

Anqi CMS'spageListandpageDetailTags, designed 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 help you easily achieve the layout of the website's content.

Common Questions (FAQ)

1. I want the 'About Us' page to have a unique style instead of using the universal style for all single pages. How should I do it?

You can edit the single page "About Us" in the "Page Managementpage/about.html.Then, create this file in your topic directory and write HTML and CSS according to your design requirements, so 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 achieve this?

You can usepageListLabel to iterate over all single pages, and use it in the loop.{% if %}Conditional 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 display correctly?

Yes, it is supported by Anqi CMSpageDetailTag supports rendering Markdown content. When you call `Content