How does the `pageDetail` tag display the title, content, and thumbnail of a single page in AnQiCMS?
AnQiCMS provides an efficient way to manage independent pages, such as "About Us", "Contact Information", and so on.These pages usually have independent titles, content, and images, which need to be presented accurately in the front-end template.pageDetailThe tag is the core tool designed by Anqi CMS to achieve this purpose, it allows us to easily extract and display detailed information of a single page from the background database.
UnderstandingpageDetailLabel: The core of displaying single-page content
In AnQiCMS,pageDetailThe tag is specifically used to retrieve and display detailed data for a single page.Whether it is the title and content of the "company profile" you want to display, or the detailed text of the "terms of service", it can provide the required data.Use this tag and you can specifynameParameters to obtain specific fields of a single page, such as page title, specific content, or related images. IfnameThe parameter is omitted, the tag will directly output the entire data object of the single page, but this usually requires combining variable assignment to be effectively utilized.
pageDetailThe flexibility of the tag is reflected in its ability to retrieve data according to different needs:
idParameterWhen you want to display a single page with a specific ID, you can directly go throughid="页面ID"in order to specify precisely. For example,id="1"Get the single-page data with ID 1. If the current page itself is a single page (for example, the URL path you access is the address of the single-page), this parameter can usually be omitted,pageDetailThe system will automatically recognize and retrieve information from the current page.tokenParameter: In addition to ID, you can also use the URL alias of a single page (tokenSpecify a page, which is very useful in certain scenarios where pages need to be located based on friendly URLs. Usage is similar toidfor exampletoken="about-us".siteIdParameterFor scenarios where the AnQiCMS multi-site management function is used, if you need to retrieve single-page data from other sites, you can setsiteId="站点ID"To implement cross-site calls, which is very convenient for building websites with unified content sources in multiple languages or brands.
Obtaining and displaying core content fields
NowpageDetailLabel, we can conveniently obtain the various components of a single page:
Single page title (
Title): This is the core identifier of a single page. You can use{% pageDetail with name="Title" %}Directly output the current single page title in the template. If you want to assign the result to a variable for subsequent use or logical judgment, you can write it like this:{% pageDetail pageTitle with name="Title" %}Then proceed{{ pageTitle }}Use this title flexibly.Single page content (
Content): The main information of the page is stored in this field. The way to get it is{% pageDetail with name="Content" %}It is worth noting that the content of a single page often contains rich HTML tags (such as content edited using a rich text editor in the background), in order to ensure that these tags can be correctly parsed and rendered by the browser rather than displayed as raw text, you usually need to combinesafeUse a filter, for example{{ pageContent|safe }}In addition, if your content is being edited in a Markdown editor in the background, you also need to ensure that the Markdown syntax is correctly converted to HTML, bypageDetailthe tag withrender=trueparameters, for example{% pageDetail pageContent with name="Content" render=true %}{{ pageContent|safe }}.Single page thumbnail (
Thumb) and large image (Logo)Both are used to display page images.LogoIt usually refers to the main image or large image on a single page, whileThumbis the thumbnail version. The methods of obtaining them are as follows.{% pageDetail with name="Logo" %}and{% pageDetail with name="Thumb" %}In the template, you usually use them as<img>label'ssrcto use as property values, for example<img src="{% pageDetail with name="Thumb" %}" alt="页面标题" />This will fill in the thumbnail address obtained into the image'ssrcthe attribute.Single-page slide group (
Images)Some single pages may need to display a group of images, such as a carousel or gallery.Imagesfield will return an array of image URLs. Since it is an array, you need to go throughforLoop to traverse and display these images. For example, you can first assign the image array to a variable{% pageDetail pageImages with name="Images" %}Then use{% for item in pageImages %}<img src="{{ item }}" alt="页面图片" />{% endfor %}Output each image one by one.Other fields (
Id,Link,Description): In addition to the above core fields,pageDetailTags can obtain the unique identifier of the pageId, the page access linkLinkand the brief description of the pageDescription. The way to obtain these fields is similar toTitle, just replace itnameThe value of the parameter can be. For example, getting the page link is{% pageDetail with name="Link" %}.
Practice exercise: Build a "About Us" page
Assuming you are building a 'About Us' single page and have created the page in the background. In your template file (such aspage/detail.htmlor a custom template specifically for the 'About Us' pagepage/about-us.htmlIn it, you can combine it like thispageDetailTags to display the full page content:
`twig {# Page main title #}