How to use the `pageDetail` tag to get detailed content and images of a single page (such as "About Us")?

In website operation, pages like "About Us" and "Contact Us" are indispensable, as they carry important information such as corporate culture, contact information, and service introduction.How to present these carefully prepared contents efficiently and beautifully on the website front-end is a skill that every website operator needs to master.For users using AnQiCMS (AnQiCMS)pageDetailTags are the key tools to achieve this goal.

Single page in AnqiCMS: the cornerstone of content

Further understandpageDetailBefore the label, let's get to know the single page in AnqiCMS.In the AnqiCMS backend management interface, you can find the 'Page Management' feature in the 'Page Resources' module.This is where you create and edit all single pages. A single page typically includes the following key information:

• Page Name (Title): The title displayed on the page.
• Single page summary (Description)Used to briefly summarize the page content, which is also very helpful for SEO.
• Single page content (Content): The main text, images, videos, and other rich content of the page. Anqi CMS supports rich text editor, and you can easily edit and format it.
• Custom URL (Custom URL): You can set a more friendly URL path for a single page, for exampleabout-us/contactThis is very important for improving user experience and SEO.
• Banner image and thumbnail (Images/Logo/Thumb): Configure the main visual image for the page, used to display on list pages or at the top of the page.
• Single Page Template (Page Template): Allows you to specify an independent template file for a specific single page to achieve personalized layout.

These background configuration data ultimately need to be presented to the user through template tags, andpageDetailThis is the bridge of this link.

pageDetailTag: a powerful tool for obtaining content on a single page

pageDetailThe tag is a special tag used in the AnqiCMS template engine to obtain detailed content of a single page. Its basic syntax is very intuitive:

{% pageDetail 变量名称 with name="字段名称" id="1" %}

Among them:

• 变量名称: This is an optional parameter. If you want to store the data you get in a variable for later repeated use or more complex logical processing, you can specify a variable name (for example,aboutPage)。If not specified, the tag will directly output the value of the corresponding field.
• name="字段名称": This is a core parameter used to specify which field value you want to get on a single page. For example,name="Title"Get the title,name="Content"Get content.
• id="1"ortoken="about-us"These two parameters are optional. By default,pageDetailthe tag will automatically retrieve the single-page content corresponding to the current visited page. If you need to getnot the current pageThe specific single-page content (such as displaying a fragment of "About Us" on the homepage), can be accessed by specifying the single-page ID (id) or its custom URL alias (token）to achieve this.

Understood the basic syntax, we can then start to get the detailed content and images of a single page.

Get the text content of a single page

The main text content of a single page is usually stored inContentIn the field. We can get it like this:

{# 默认用法，自动获取当前页面单页的内容 #}
<div>
    {% pageDetail with name="Content" %}
</div>

If you store the content in a variable and want to ensure that HTML tags are parsed correctly (because the backend usually uses a rich text editor), you need to combine|safeFilter. If the background content editor has enabled the Markdown function and you want to render Markdown formatted content into HTML, you need to addrender=trueparameters:

{% pageDetail pageContent with name="Content" render=true %}
<div>
    {{ pageContent|safe }}
</div>

Here, render=trueTell AnqiCMS template engine to convert Markdown content to HTML, and|safeThe filter ensures that the converted HTML code is not escaped again, thus displaying styles and layouts correctly in the browser.

Get the image content of a single page.

The single page can be configured with various image types, including main image, thumbnail, and group images.pageDetailThe tag provides corresponding fields to retrieve these images:

1. Get the main logo and thumbnail:LogoGenerally used for the main visual image or larger size images on the page, whileThumbit is used to display smaller thumbnails.

   {# 获取单页的主形象图 #}
   <img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
   
   {# 获取单页的缩略图 #}
   <img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
   

2. Get the slide group image (Images) for a single page: If a single page is configured with multiple images, such as for a carousel or album display, these images will be stored inImagesin the field. Due toImagesis an array of image addresses, you need to usefora loop to iterate through and display each image.

   {% pageDetail pageImages with name="Images" %}
   <div class="gallery">
       {% for imageUrl in pageImages %}
           <img src="{{ imageUrl }}" alt="Image {{ forloop.Counter }}" />
       {% endfor %}
   </div>
   

   Here, pageImagesis an array that contains all image URLs. We go throughforit in a loop,imageUrlThe variable will be an image address in the array each time the loop runs,forloop.Counterwhich can be used to display the current image number.

Practice case: Building the "About Us" page.

Let us go through an actual example of an "About Us" page to link together the above knowledge points. Suppose we have a background ID of10or customize the URL alias ofabout-usThe "About Us" page.

{# 引入头部文件，通常包含网站的公共样式和JS #}
{% include "partial/header.html" %}

<main class="main-content">
    <section class="about-hero">
        {# 获取“关于我们”页面的主形象图，通过token指定 #}
        <img src="{% pageDetail with name="Logo" token="about-us" %}" alt="关于我们主视觉" class="hero-image">
    </section>

    <section class="about-intro container">
        {# 获取“关于我们”页面的标题 #}
        <h1 class="page-title">{% pageDetail with name="Title" token="about-us" %}</h1>
        {# 获取“关于我们”页面的简介 #}
        <p class="page-description">{% pageDetail with name="Description" token="about-us" %}</p>
    </section>

    <section class="about-details container">
        {# 获取“关于我们”页面的详细内容，并确保HTML正确渲染 #}
        {% pageDetail pageDetailContent with name="Content" token="about-us" render=true %}
        <article class="content-body">
            {{ pageDetailContent|safe }}
        </article>
    </section>

    <section class="company-gallery container">
        <h2>公司环境</h2>
        {# 获取“关于我们”页面的组图，并以图集形式展示 #}
        {% pageDetail companyPhotos with name="Images" token="about-us" %}
        <div class="image-grid">
            {% for photoUrl in companyPhotos %}
                <img src="{{ photoUrl }}" alt="公司环境图片 {{ forloop.Counter }}" class="grid-item">
            {% endfor %}
        </div>
    </section>
</main>

{# 引入底部文件 #}
{% include "partial/footer.html" %}

In this code, we call it multiple times.pageDetailLabel, respectively obtained the main image, title, introduction, detailed content, and group photos of the "About Us" page, and throughtoken="about-us"Ensure that the specified single-page data is obtained.

Flexible application: Advanced usage and customization

In addition to obtaining the content of the current page,pageDetailThe flexibility of the tag also manifests in the following aspects:

• Obtaining by specifying ID or TokenAs shown in the above example, you can useid="单页ID"ortoken="单页URL别名"To accurately retrieve any single page content that has been created, regardless of which page the current user is visiting.This is especially useful when you need to display a brief information of a single page on other pages (such as the homepage).
• Multi-site data callIf you have configured multi-site management in the AnqiCMS backend and want to call single-page data from other sites, you can usesiteIdto specify the target site ID. For example,{% pageDetail with name="Content" id="1" siteId="2" %}The content of the single page with ID 1 of the site ID 2 will be retrieved.
• Custom single page template: AnqiCMS allows you to set a custom template file for a single page. For example, if your "Contact Us" page needs a special map layout, you can specify a named template in the edit page of that single page in the background.page/contact.htmltemplate. So when the user accesses the "Contact Us" page, the system will automatically apply this custom template, and you just need topage/contact.htmlcallpageDetailTag it and it is.

By flexible applicationpageDetailtags and their parameters, you can easily