What are the basic syntax and necessary parameters of the `pageDetail` tag?

As an experienced website operations expert, I know that mastering template tags in an efficient content management system like AnQiCMS is the key to improving operational efficiency and achieving personalized content display. Today, let's delve into a very practical tag -pageDetailIt can help us easily obtain and display the independent page content on the website.

Unveiling AnQiCMS'spageDetailTag: Easily master single page content display

In modern website operations, pages such as "About UsThey are not only the windows to convey core information and build trust to visitors, but also an indispensable part of Search Engine Optimization (SEO).pageDetailTags allow content operators to manage and display these single-page contents flexibly without touching complex code.

pageDetailThe core function of the label is to accurately obtain and output detailed data of a specified independent page. Imagine that your website has multiple independent pages, and you may need to display their titles, summaries, or full content in different template areas at this timepageDetailIt can be put to good use.

pageDetailBasic syntax of tags

pageDetailThe general syntax structure of the label is very intuitive, it follows the style of Django template engine and combines the Go language features of AnQiCMS, ensuring high performance and security:

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

This syntax may seem complex at first glance, but with a little breakdown, we will find it very friendly.

• {% pageDetail ... %}: This is the start of the tag, indicating that we are callingpageDetailFunction.
• 变量名称（Optional）：You can specify a temporary variable name for the data you get, such asmyPage.If omitted, the label will directly output the content of the specified field.ifCheck if it exists during the judgment, or combine it with other data for display.
• withThis is a separator used to introduce subsequent parameters.
• name="字段名称"This is a crucial parameter that determines which specific data field you want to obtain from an independent page, such as the page title, content, link, etc.
• id="1"ortoken="about-us"These are the parameters used to specify which independent page you want to get.

MasterpageDetailcore parameters.

To accurately obtain the single-page data you need,pageDetailThe label provides several key parameters, allowing you to flexibly locate and extract information.

1. Parameters to locate a specific page:idortoken

   When you need to accurately select a specific page from a large number of independent pages to display its details,idandtokenthe parameters become particularly important. They are the 'ID card' of the target page you specify.

   • idParametersThis is located by the number ID of the independent page. For example, if your "About Us" page's ID in the back-end is5you can useid="5"Get its data. This method is very useful when you need to reference a fixed ID page, such as displaying a specific page in the footer navigation.

     {# 获取ID为5的单页标题 #}
     <div>关于我们标题：{% pageDetail with name="Title" id="5" %}</div>
     

   • tokenParameters: Compared to numeric ID,tokenThe parameter allows you to locate the page through the 'URL alias' (i.e., custom URL). For example, the URL alias for your 'Contact Us' page is set tocontact-usso thattoken="contact-us"It will have better readability and memorability. Setting meaningful custom URL aliases for single pages in AnQiCMS is not only beneficial for SEO, but also makes template calls more semantic.

     {# 获取URL别名为"contact-us"的单页链接 #}
     <a href="{% pageDetail with name="Link" token="contact-us" %}">联系我们</a>
     

   In most cases, if you call it in the current independent page templatepageDetailand do not specifyidortoken，标签会自动获取当前页面的详情数据。但若您需要跨页面引用特定单页，则务必使用English进行明确指定。idortoken进行明确指定。

2. 指定获取数据字段的参数：name

   This ispageDetailThe core of the label, it tells the label which specific part of the page information you want to obtain.nameThe parameters support a variety of commonly used fields, covering all aspects of independent pages:

   • Id：The unique numeric identifier of the page.
   • Title：The title of the page, typically the content of the H1 tag.
   • Link：The access link of the page.
   • Description：The brief description of the page, commonly used for SEO meta descriptions or page summaries.
   • Content：The main content of the page, which includes all the text, images, formatting, and more that you edit in the backend editor.
   • Logo：The main image or thumbnail of the page (if set).
   • Thumb：The thumbnail of the page (if set).
   • Images：The page slide group image (if multiple images are set, it will return an array of image URLs).

   For example, to get the title and content of a page:

   {# 获取指定ID页面的标题并赋值给pageTitle变量 #}
   {% pageDetail pageTitle with name="Title" id="10" %}
   <h1>{{ pageTitle }}</h1>
   
   
   {# 获取指定ID页面的内容并赋值给pageContent变量 #}
   {% pageDetail pageContent with name="Content" id="10" %}
   <div class="main-content">{{ pageContent|safe }}</div>
   

   Here, special attention is needed.ContentThe invocation of the field. Since page content usually contains HTML tags (such as paragraphs, images, links, etc.), in order for the browser to correctly parse and render these HTML rather than displaying them as plain text, you must use|safeFilter. In addition, if your page content is written in the Markdown editor in the background, you can also addrender=trueThe parameter makes AnQiCMS automatically convert Markdown syntax to HTML before output, ensuring the correct display of content.

   {# 渲染Markdown内容并使用|safe过滤器确保HTML正确解析 #}
   {% pageDetail pageContent with name="Content" id="10" render=true %}{{ pageContent|safe }}
   

   ForImagesField, as it may contain multiple images, it will return an array of image URLs. You need to use a loop tag to iterate and display these images:forLoop tags to traverse and display these images:

   {% pageDetail pageBannerImages with name="Images" id="10" %}
   {% if pageBannerImages %}
       <div class="page-slider">
           {% for imgUrl in pageBannerImages %}
               <img src="{{ imgUrl }}" alt="页面图片">
           {% endfor %}
       </div>
   {% endif %}
   

3. Parameters under multi-site environments:siteId

   AnQiCMS supports multi-site management, which is very convenient for enterprises with multiple brands or sub-sites. If you are in a multi-site environment, you need to callNot the current siteThis page can be used independentlysiteIdParameters are used to explicitly specify the site ID. Usually, if you only operate one site or call data from the current site, this parameter does not need to be filled in.

   {# 获取ID为10的页面的标题，但它属于站点ID为2的站点 #}
   <div>其他站点页面标题：{% pageDetail with name="Title" id="10" siteId="2" %}</div>
   

Actual application: Build the "About Us" page

Let's use a common example of a "About Us" page to connectpageDetailTag usage:

Suppose we have a URL alias:about-usThe "About Us" page, we need to display the company profile, detailed content, and possibly the corporate culture image gallery on the page.

`twig <!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# 设置页面标题 #}
<title>{% tdk