pageDetailThe tag is the key tool to achieve this goal.
AnqiCMS中的单页：内容的基石
Before getting a deeper understandingpageDetailBefore the label, let's first 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.
- 页面名称（Title）：显示在页面上的标题。
- 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 editors, allowing you to easily edit and format.
- Custom URL (Custom URL)You can set a more friendly URL path for a single page, for example
about-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 the list page 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, achieving personalized layout.
These background configuration data all need to be presented to the user through template tags,pageDetailThis is the bridge of this link.
pageDetailTag: A powerful tool for obtaining single-page content.
pageDetailThe tag is a special tag used in AnqiCMS template engine to get 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 retrieved data in a variable for subsequent reuse or more complex logic processing, you can specify a variable name (for exampleaboutPage）。If not specified, the label will directly output the value of the corresponding field.name="字段名称"：This is the core parameter used to specify which field value of the single page you want to get. For example,name="Title"to get the title,name="Content"Retrieve the content.id="1"ortoken="about-us"These two parameters are optional. By default,pageDetailthe label will automatically obtain the corresponding single-page content of the current visited page. If you need to getnon-current pageThe specific single-page content (such as displaying a snippet of "About Us" on the homepage), can be accessed through specifying the single-page ID (id) or its custom URL alias (token) to implement.
Understood the basic syntax, we can then proceed to retrieve the detailed content and images of a single page.
Retrieve the text content of a single page
The main text content of a single page is usually stored inContentField in. We can get it like this:
{# 默认用法，自动获取当前页面单页的内容 #}
<div>
{% pageDetail with name="Content" %}
</div>
If you store 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 Markdown functionality, and you wish to render Markdown-formatted content as 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,|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 page can be configured with various image types, including main image, thumbnail, and group images.pageDetailTags provide corresponding fields to retrieve these images:
Get the main logo image and thumbnail:
LogoUsed usually for the main visual image or larger-sized pictures on the page, whileThumbit is used for displaying smaller-sized thumbnails.{# 获取单页的主形象图 #} <img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" /> {# 获取单页的缩略图 #} <img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />Get the single page slide group image (Images)： If a single page is configured with multiple images, for example for a carousel or album display, these images will be stored in
Imagesfield. Due toImagesis an array of image addresses, you need to useforLoop to iterate 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,
pageImagescontains all image URLs. We go through it byforlooping through it,imageUrlThe variable will be the address of an image 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's use a real example of an "About Us" page to link the above knowledge points. Suppose we have a backend ID of10or a custom URL alias ofabout-usThe 'About Us' single 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 company environment photos of the "About Us" page, and passed throughtoken="about-us"Ensure that the data obtained is for the specified single page.
Flexible Application: Advanced Usage and Customization
In addition to getting the content of the current page,pageDetailThe flexibility of tags is also reflected in the following aspects:
- Specify ID or Token to obtainAs shown in the above example, you can use
id="单页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 particularly useful when you need to display a concise 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 under other sites, you can use
siteIdparameter to specify the target site ID. For example,{% pageDetail with name="Content" id="1" siteId="2" %}It will fetch the content of the single page with site ID 2 and page ID 1. - Custom template for single page：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 file in the edit page of this single page in the background.
page/contact.htmlThe template. So, when the user visits "Contact Us", the system will automatically apply this custom template, and you just need topage/contact.htmlcall it according to your needspageDetailLabel it.
By using flexibilitypageDetailtags and their parameters, you can easily