In Anqi CMS, a single page is an indispensable part of the website structure, which is often used to display "About Us", "Contact Information", "Service Introduction", and other relatively fixed content that does not require frequent updates.For these pages, we usually hope to be able to flexibly control the way content is displayed, including text, images, and even slide groups.pageDetailThe tag is born for this, it allows us to easily obtain and display all the detailed content of a single page.
pageDetailOverview of the core functions of the tag
pageDetailThe main function of the tag is to get all the data of the specified single page.When in use, it automatically identifies the current page and captures the related details.This means that when you visit a single page, no additional configuration is required,pageDetailCould immediately provide you with 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) ortokenAn alias (URL) to accurately retrieve the content of the target page, rather than 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" %}To get its title.
Basic content display: text and links
pageDetailTags can obtain various basic text information on a single page, helping us build the skeleton of the page.
The core identifier of the page is first:
- Single page ID (
Id) and the title (Title): This is the unique identifier and name of each page. Usually, we would place the title in the most prominent position of 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 page summary information:
- Page description (
Description): Usually 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>
The main content of the page is:
- The main content of the page(
Content): This is the core of a single page, which includes all rich text content such as text, images, videos, etc. when editing.UsingContentWhen fields are being translated, it is necessary to pay special attention to one|safeFilter. Anqi CMS defaults to escaping HTML tags to prevent XSS attacks, but single-page content often contains a large amount of HTML, so it is necessary to add|safeTell the template engine that this content is safe and can be output directly as HTML.
If your content is written using a Markdown editor in the background and you want it to be rendered correctly as HTML, you can<div class="page-content"> {% pageDetail pageContent with name="Content" %}{{pageContent|safe}}</div> </div>Contentthe tag withrender=trueparameters:<div class="page-content"> {% pageDetail pageContent with name="Content" render=true %}{{pageContent|safe}}</div> </div>
Image and Media Display: The Charm of Slideshow Grouping
In addition to text content, a single page usually carries rich visual elements, especially in the form of image groups or slideshows.pageDetailTags providedLogo/Thumbas well asImagesField, to meet the different image display requirements.
Thumbnail of a single page (
Thumb) and Logo (Logo): These 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" %}">Slideshow group image (
Images): This is the focus of this topic. When editing a single page in the Anqi CMS backend, you can upload multiple images as the 'Banner image' of the page, which will be stored as a group image.pageDetailTag throughImagesfield to retrieve these images, it returns an array of image URLs. To display these images, we need to useforLoop through this array. Here is a typical code example to display a series of slides.Here we assume you have a front-end slide component, which usually needs a structure containing a list of images (such as<ul><li><img></li></ul>），then initialize it using 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" %}Get all image URLs into a variable namedpageImages. Then, through{% if pageImages %}Check if an image exists, if it does, enterforLoop, output one by one<img>Label. This way, you can render these images into a beautiful slideshow or image gallery according to your front-end style.
Comprehensive Application Example: Building a Complete Single Page Template
Combining these tags, we can build a relatively complete single-page template file (for exampletemplate/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>© {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
</footer>
</body>
</html>
Use tips
- Markdown content rendering controlAs mentioned above, if your single-page content is in Markdown format, be sure to
Contentthe tag withrender=truethe parameter and cooperate|safefilter to ensure that the content is rendered correctly. - Custom template files: AnQi CMS allows you to specify a unique template for a single page. For example, if you have a single page named "About Us" and you want it to use a template named
page/about.htmlThe special template, you can set it when editing the page in the background. This way,pageDetailthe label will be specified in thispage/about.htmland automatically obtain the content of the 'About Us' page - Handle imageless situations：When
Logo/ThumborImagesWhen fields are empty, they will return null or an empty array. By{% if 变量 %}Such a judgment, you can elegantly handle these situations, for example, display a default placeholder or simply do not display the image area to avoid blank or error pages.
MasteredpageDetailThese are the uses of the tags, and you can flexibly build a single page with rich content and various layouts in Anqi CMS, whether it is a pure text introduction, a product display with pictures and texts, or a promotional page with multiple image sliders, it can be easily realized.
Frequently Asked Questions (FAQ)
Q1: How to set a dedicated template for specific single pages such as 'About Us' or 'Contact Us'?
A1: The AnqiCMS supports specifying an independent template for each single page. When editing a single page in the background, find the "Single Page Template" option, and enter the path and name of your custom template file, for exampleabout.html(If placedpage/in the directory, the system will automatically recognize it). This way, when the page is accessed, it will automatically load the template you specify, and you can use it in this template.pageDetailTag to retrieve all content on the current page and display it.
Q2: I am on the single-page content (ContentWhy are HTML codes written in the field displayed as plain text without being parsed by the browser?
A2: This is an AnQi CMS security mechanism, which defaults to escaping the HTML code output by the template to prevent malicious script injection (XSS attack). To makeContentThe HTML code is correctly parsed and displayed, you need to add it when outputting this field|safea filter. For example:{{ pageContent|safe }}. If the content is in Markdown format and you want to render it as HTML, you need to addrender=trueparameters:{{ pageContent|render|safe }}.
Q3: If the single page does not upload the "Banner image" (i.e.ImagesThe field is empty)pageDetailThe tag is inforWhat will be output in the loop? Will it cause a page error?
A3: IfImagesThe field is empty,pageDetailTags retrieved from comments.pageImagesThe variable will be an empty array. InforIn a loop, an empty array will not execute any code within the loop, so no image tags will be output, nor will it cause a page error. For a better user experience, you canforAdd outside the loop{% if pageImages %}IfpageImagesIf empty, display a prompt text, such as 'There are no slide images on this page.'.