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

Security CMSpageDetailLabel: Easily obtain and display single-page information

In website content management, single pages (such as "About Us", "Contact Us", "Terms of Service", etc.) play an indispensable role.They usually carry stable, core information that does not need to be updated as frequently as articles or products.AnQi CMS provides an efficient and flexible tool for displaying this type of page——pageDetailMastering the use of this label will allow you to be proficient in template development, easily presenting beautifully designed single-page content.

What is the single page in Anqi CMS?

In 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 can be customized templates and URL aliases.For example, a company's "Company Profile" or "Contact Information" page is a typical single-page in AnQi CMS.You can edit the detailed content of these pages in the background, including rich text, images, even Banner images, andpageDetailTags are the core secrets to present these background management contents on the website front end.

pageDetailThe core function and basic syntax of tags

pageDetailThe main function of the label 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 page in the website, it can accurately obtain it.

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

There are several key points to understand:

  • 变量名称: This is an optional parameter. If you wish to assign the obtained data to a custom variable for multiple references in the template or for complex processing, you can specify a variable name (such aspageInfoIf not specified, the label will directly output the value of the field.
  • name="字段名称"This is the most important parameter, used to specify the specific information you want to get from a single page, 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.
    • idSpecify a single page by its numeric ID. For example,id="1"This will retrieve the single page data with ID 1.
    • token: Specified by the URL alias of a single page. For example,token="about-us"The URL alias ofabout-ussingle page data.
    • If you do not provideidortoken,pageDetailthe tag will default to trying to get the data of the single page being visited currently.
  • 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 does not need to be set.

Detailed explanation of commonly used fields and their practical applications

Next, let's take a detailed look atnameWhich fields are supported by the parameters, and how to flexibly use them in templates.

1. Single page title (Title)

This is the basic identification of a single page.

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

2. Content of a single page (Content)

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

  • Label usage: {% pageDetail with name="Content" %}
  • Important reminder: ContentThe field outputs content that includes HTML tags, in order for the browser to render these HTML tags correctly, you must use it in conjunction with|safeFilter. Moreover, if your content is in Markdown format and you want it to be rendered as HTML on the front end, you can add tags in itrender=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)

Single pages often need images to enrich the visual effects.

  • Logo(Main Image/Large Image):It is usually the cover or main display image of a single page.
    • Label usage: {% 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 a single page.
    • Label usage: {% pageDetail with name="Thumb" %}
    • Example: 
      
{% pageDetail pageThumb with name="Thumb" %}
{% if pageThumb %}
    <img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %} 缩略图">
{% endif %}
  • Images(Slide/Group Image):If the background uploads multiple Banner images or group images on a single page, this field will return an array of image URLs.
    • Label usage: {% 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(Single Page ID):Get the numeric ID of the current page.
    • Label usage: {% pageDetail with name="Id" %}
  • Link(Single page link):Get the access URL of a single page.
    • Label usage: {% pageDetail with name="Link" %}
  • Description(Single page description):Get the summary or description information of a single page, often used for<meta name="description">.
    • Label usage: {% pageDetail with name="Description" %}

Case study: 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 upload several contact method images.

`twig {# This is the contact.html template file and is mapped to the "Contact Us" page by the backend #} <!DOCTYPE html>

<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