How to fetch and display all the detailed contents of a single page, including slide groups, using the `pageDetail` tag?

In the AnQi CMS, a single page is an indispensable part of the website structure. It is commonly used to display relatively fixed and not frequently updated content such as 'About Us', 'Contact Information', and 'Service Introduction'.For these pages, we usually hope to flexibly control the display method of the content, including text, images, and even slide group images.pageDetailTags are born for this, allowing us to easily obtain and display all the detailed content of a single page.

pageDetailOverview of the core functions of tags

pageDetailThe main function of the label is to obtain all data of the specified single page.It automatically identifies the current page when in use and captures related detailed information.pageDetailCould immediately provide all the displayable data on this page.

Of course, if you need to reference content from other single pages on a page.pageDetailAlso provides flexible parameters to meet this requirement. You can specify a single page'sid(page ID) ortoken(URL alias) to precisely retrieve the content of the target page, not just the current page. For example, if your 'Contact Us' page ID is 5, you can use it on other pages.{% pageDetail with name="Title" id="5" %}Get the title.

Basic content display: text and links

pageDetailTags can get various basic text information of a single page, helping us build the skeleton of the page.

The core identifier of the page is:

  • Single page ID (Id) and title (Title): This is the unique identifier and name of each page. We usually put the title in the most prominent position on the page.
    
<h1>{% pageDetail with name="Title" %}</h1>
  • Page Link (Link): Get the access path of a single page, convenient for creating links elsewhere.
    
<a href="{% pageDetail with name="Link" %}">访问此页面</a>

Next is the summary information of the page:

  • Page Description (Description)[en]：Commonly used for SEO optimization, or as a brief summary of the page content.
    
<meta name="description" content="{% pageDetail with name="Description" %}">
<p>{% pageDetail with name="Description" %}</p>

[en]：Finally, the main content of the page:

  • [en]：The main content of the page (Content)This is the core of the single page, which includes all rich text content such as text, images, videos, etc. when editing.ContentWhen using this field, you need to pay special attention to one thing.|safeFilter. A safe CMS to prevent XSS attacks defaults to escaping HTML tags, and single-page content often contains a lot of HTML, so it is necessary to add|safeTell the template engine that this content is safe and can be output directly as HTML.
    
<div class="page-content">
    {% pageDetail pageContent with name="Content" %}{{pageContent|safe}}</div>
</div>
    If your content is written using a Markdown editor in the background and you want it to be correctly rendered as HTML on the front end,Contenttag.render=trueParameters:
    
<div class="page-content">
    {% pageDetail pageContent with name="Content" render=true %}{{pageContent|safe}}</div>
</div>

[en] Picture and Media Display: The Charm of Slideshow Groups

In addition to text content, a single page usually also carries rich visual elements, especially picture groups or slideshows.pageDetailTags provideLogo/ThumbandImagesField, to meet different image display needs.

  • Single-page thumbnail (Thumb) and Logo(Logo): These two fields are usually used to display the cover image or logo of a single page.LogoMay represent the main image of the page, whileThumbit may be a thumbnail that has been scaled.

    <img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}">
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}">

  • a slide group image (Images)This is the key point of this topic.When editing a single page on the AnQi CMS backend, you can upload multiple images as the page's 'Banner image', which will be stored as a group of images.pageDetailTagged throughImagesTo retrieve these images, it returns an array of image URLs. In order to display these images, we need to utilizeforLoop through this array.The following is a typical code example that demonstrates a slide group image.<ul><li><img></li></ul>），then initialize it through JavaScript.

    {% pageDetail pageImages with name="Images" %}
{% if pageImages %} {# 判断是否有图片上传 #}
<div class="page-slideshow">
    <ul class="slides">
        {% for image_url in pageImages %}
        <li>
            <img src="{{ image_url }}" alt="{% pageDetail with name="Title" %}" />
        </li>
        {% endfor %}
    </ul>
    {# 这里可以添加前端幻灯片组件的导航、指示器等元素 #}
</div>
{% else %}
<p>该页面暂无幻灯片图片。</p>
{% endif %}

    In this example, we first use{% pageDetail pageImages with name="Images" %}to get all image URLs into a variable namedpageImages. Then, through{% if pageImages %}Check if an image exists, if it does, then proceedforLoop, output one by one<img>[en] Tag. This way, you can render these images into a beautiful slideshow or image gallery according to your own frontend style.

[en] Comprehensive Application Example: Building a complete single-page template

Combining the above tags, we can build a relatively complete single-page template file (for example)template/default/page/detail.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% pageDetail with name="Title" siteName=true %}</title>
    <meta name="description" content="{% pageDetail with name="Description" %}">
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    {# 引入你的幻灯片CSS和JS文件 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/slideshow.css">
</head>
<body>
    <header>
        <h1>{% pageDetail with name="Title" %}</h1>
    </header>

    <main class="container">
        <div class="page-header-image">
            {% pageDetail pageLogo with name="Logo" %}
            {% if pageLogo %}<img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}">{% endif %}
        </div>

        <div class="page-description">
            <p>{% pageDetail with name="Description" %}</p>
        </div>

        {% pageDetail pageImages with name="Images" %}
        {% if pageImages %}
        <section class="page-slideshow-section">
            <h2>幻灯片展示</h2>
            <div class="slideshow-wrapper">
                <ul class="slides">
                    {% for image_url in pageImages %}
                    <li>
                        <img src="{{ image_url }}" alt="{% pageDetail with name="Title" %}" />
                    </li>
                    {% endfor %}
                </ul>
                <button class="prev">❮</button>
                <button class="next">❯</button>
            </div>
            <script src="{% system with name="TemplateUrl" %}/js/slideshow.js"></script> {# 假设你的幻灯片JS #}
        </section>
        {% endif %}

        <section class="page-main-content">
            {% pageDetail pageContent with name="Content" render=true %}{{pageContent|safe}}
        </section>
    </main>

    <footer>
        <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
    </footer>
</body>
</html>

Using tips

  • Markdown content rendering controlAs mentioned above, if your single-page content is in Markdown format, be sure to use theContenttag.render=trueparameter and|safefilter to ensure the content is rendered correctly.
  • custom template fileThe [en] security CMS allows you to specify a unique template for individual pages. For example, if you have a single page named "About Us" and you want it to use a template named [en]page/about.htmlThe special template, you can set it when editing this page in the background. This way,pageDetailthe tags will be automatically retrieved from the specifiedpage/about.htmlto get the content of the "About Us" page.
  • handle the no-image situation: whenLogo/ThumborImagesFields without content will return null or an empty array. By{% if 变量 %}Such a judgment, you can elegantly handle these situations, for example, display a default placeholder image or simply not display the image area, to avoid blank or error pages.

MasteredpageDetailThese usages of tags allow you to flexibly build content-rich, diverse single-page layouts in the Anqi CMS. Whether it's a plain text introduction, a product showcase with pictures, or a promotional page with multiple image sliders, it can be easily achieved.

Common Questions (FAQ)

Q1: How to set a dedicated template for specific single pages like "About Us" or "Contact Us"?

A1: SecureCMS supports specifying an independent template for each single page. When editing a single page in the background, find the 'Single Page Template' option, and fill in the path and name of your custom template file, for example:about.html[If placed]page/in the directory, the system will automatically recognize it). When accessing this page, the template you specify will be automatically loaded, and you can use it in this template.pageDetailLabel to get all the content of the current page and display it.

Q2: I am on a single page content (ContentWhat is the reason why the HTML code written in the field is outputted as is when the page is displayed, and not parsed by the browser?

A2: This is the security mechanism of AnQi CMS, which defaults to escaping the HTML code output by templates to prevent malicious script injection (XSS attacks). To makeContentThe HTML code in the field is parsed and displayed correctly, you need to add it when outputting this field.|safefilter. For example:{{ pageContent|safe }}If the content is in Markdown format and you want to render it as HTML, you also need to addrender=trueParameters:{{ pageContent|render|safe }}.

Q3: If the single page does not upload a "Banner image" (i.e.ImagesField is empty)pageDetailTags inforWhat will be output in the loop? Will it cause a page error?

A3: IfImagesField is emptypageDetailthe tags you getpageImagesThe variable will be an empty array. InforIn a loop, an empty array will not execute any code within the loop body, so it will not output any image tags and will not cause the page to report an error. To better enhance user experience, you canforAdd outside the loop{% if pageImages %}Determine whenpageImagesIf it is empty, display a prompt, such as 'This page has no slide images'.