How to retrieve and display the title, content, and image of a single page using the `pageDetail` tag?

Secure CMSpageDetailLabel: Easily obtain and display single-page information

On website content management, single pages (such as "About UsThey typically carry stable, core information and do not need to be updated frequently like articles or products.pageDetailLabel. Mastering the use of this label will allow you to navigate template development with ease, presenting beautifully designed single-page content effortlessly.

What is the single page in the security CMS?

In the AnQi CMS backend, the "Page Resources" module allows you to create and manage independent single pages.These pages are different from traditional articles or products, they do not have the concept of categories, each page is an independent entity, with its own title, content, thumbnail, and even the ability to customize templates and URL aliases.For example, a company's 'About Us' or 'Contact' page is a typical single page in Anqi CMS.pageDetailTags are the core secrets to display these background management contents on the website front end.

pageDetailThe core function and basic syntax of tags

pageDetailThe main function of the tag is to obtain and display detailed data of a specified single page.Whether it is the single page currently being accessed or any specific ID or URL alias of a single page within the website, it can accurately obtain it.

The basic syntax structure is as follows:{% pageDetail 变量名称 with name="字段名称" id="1" %}

Here are several key points to understand:

  • 变量名称This is an optional parameter. If you want to assign the obtained data to a custom variable for multiple references in the template or complex processing, you can specify a variable name (such aspageInfo）。If not specified, the tag will directly output the value of the field.
  • name="字段名称"This is the most important parameter, used to specify the specific information of the single page you want to get, such as title, content, link, etc.
  • id="1"ortoken="your-alias"：These two parameters are used to specify which single page data you want to retrieve.
    • id：Specify through the numeric ID of a single page. For example,id="1"It will retrieve the single page data with ID 1.
    • token：Through the single-page URL alias to specify. For example,token="about-us"will obtain the URL aliasabout-ussingle-page data.
    • If you do not provideidortoken,pageDetailThe tag will default to attempting to retrieve the data of the current single page being accessed.
  • siteIdIn a multi-site management environment, if you need to call single-page data under other sites across sites, you can specify the site ID through this parameter. Generally, it is not necessary to set it.

常用字段详解与实际应用

接下来，我们详细看看name参数支持哪些字段，以及如何在模板中灵活运用它们。

1. 单页面标题 (Title)

This is the basic identifier for a single-page application.

  • Usage of tags: {% pageDetail with name="Title" %}
  • Example: 
    
<h1>{% pageDetail with name="Title" %}</h1>
{# 如果你想获取ID为5的单页面标题 #}
<p>另一个页面标题：{% pageDetail with name="Title" id="5" %}</p>

2. Single-page content (Content)

This is the main information of the single-page application, usually containing HTML content generated by a rich text editor.

  • Usage of tags: {% pageDetail with name="Content" %}
  • Important reminder: ContentThe output field contains content with HTML tags, in order for the browser to render these HTML tags correctly, you must use them in conjunction with|safeFilter. In addition, if your content is in Markdown format and you want it to be rendered as HTML on the front end, you can addrender=trueParameter.
  • Example: 
    
<div class="page-body">
    {% pageDetail pageContent with name="Content" %}
    {{ pageContent|safe }} {# 确保HTML内容被正确渲染 #}
</div>
{# 如果内容是Markdown且需要渲染 #}
<div class="markdown-body">
    {% pageDetail markdownContent with name="Content" render=true %}
    {{ markdownContent|safe }}
</div>

3. Single-page image (Logo,Thumb,Images)

The single page often needs images to enrich the visual effects.

  • Logo(Main Image/Large Image):It is usually the cover or main display image of the single page.
    • Usage of tags: {% pageDetail with name="Logo" %}
    • Example: 
      
{% pageDetail pageLogo with name="Logo" %}
{% if pageLogo %} {# 检查图片是否存在再显示是好习惯 #}
    <img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %} 主图">
{% endif %}
  • Thumb(Thumbnail):The thumbnail version of the single page.
    • Usage of tags: {% pageDetail with name="Thumb" %}
    • Example: 
      
{% pageDetail pageThumb with name="Thumb" %}
{% if pageThumb %}
    <img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %} 缩略图">
{% endif %}
  • Images(幻灯片/组图)：If multiple Banner images or group images are uploaded on a single page, this field will return an array of image URLs.
    • Usage of tags: {% pageDetail pageGallery with name="Images" %}
    • Example: 
      
{% pageDetail pageGallery with name="Images" %}
{% if pageGallery %}
    <div class="page-banner-slider">
        {% for image_url in pageGallery %}
            <img src="{{ image_url }}" alt="{% pageDetail with name='Title' %} Banner {{ forloop.Counter }}">
        {% endfor %}
    </div>
{% endif %}

4. Other commonly used fields

  • Id(单页ID)：Get the current page's digital ID.
    • Usage of tags: {% pageDetail with name="Id" %}
  • Link(Single page link):Get the access URL of a single page.
    • Usage of tags: {% pageDetail with name="Link" %}
  • Description(Single page description):Get the summary or description information of a single page, often used for<meta name="description">.
    • Usage of tags: {% pageDetail with name="Description" %}

Practice Case: Build a "Contact Us" Page

Suppose you want to build a single-page "Contact Us" page, and display the page title, description, detailed content, and possibly several contact method images that can be uploaded.

English

<meta charset="UTF-8">
<title>{% pageDetail with name="Title" %} - {% system with name="SiteName" %}</title>
<meta name="description" content="{% pageDetail with name="Description" %}">
{# 引用页面的规范链接，如果后台有设置的话 #}
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}


<header>
    {# 导航等其他通用部分 #}
</header>

<main class="container">
    <section class="page-header">
        <h1>{% pageDetail with name="Title" %}</h1>
        <p