How does the `pageDetail` tag display the detailed content of a single page, such as the 'About Us' page?

In AnQi CMS, single pages (such as "About UspageDetailThis tag can help us accurately extract and display various information on a specified single page, ensuring the flexibility and accuracy of content display.

pageDetailThe role and basic usage of tags

pageDetailTags are used to retrieve from the Anqi CMS background databasea singleDetailed content of a single page.Its basic function is to extract the title, content, description, image, and other information of a single page according to its unique identifier (such as ID or custom URL alias) or the context of the current page being accessed, for use by the front-end template.

When a user visits a single page, for exampleyourdomain.com/about-us/，AnQi CMS will automatically identify this as a single page created in the background. At this time, inabout-usthe corresponding template file of the page, use directlypageDetailTags can easily get all the detailed content of the page.

How to usepageDetailTags display single page content.

While usingpageDetailBefore the tags, we first need to create and manage these single pages in the Anq CMS backend.

1. Backend creates a single page:Log in to the Anqi CMS backend, navigate to 'Page Resources' under 'Page Management'.Here, you can click "Add Single Page" to create a new single page, or edit an existing one.about-usThis will be the page access path), "thumbnail" or "Banner image" fields, etc. It is especially important to the "single page template" option, which determines which template file the page will use to render content, the default is usuallypage/detail.htmlBut you can also specify a custom template, which provides the possibility for subsequent personalized design.

2. Front-end template call:Once the single page is created in the background, we can use it in the front-end template.pageDetailTags to display its content.pageDetailTag throughnameThe parameter specifies the field to be retrieved, such as page title, content, links, etc.

   • Get page title:If you want to display the title of a single page, you can usename="Title".

     <h1>{% pageDetail with name="Title" %}</h1>
     

   • To get the main content of the page:The main content of the page is usually the most important part, usingname="Content"Obtain. It is worth noting that if your single-page content is written in Markdown format in the back-end, in order to render it correctly as HTML on the front-end, it is necessary to add an extrarender=trueparameters, and usesafeA filter to prevent HTML entity escaping.

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

     Here, pageContentis a variable name we define for the content,render=truetells the system to convert Markdown to HTML,safeThe filter indicates that the template engine should not perform a second escape on the converted HTML content, ensuring that tags can be normally parsed.

   • Get page description and link: Description of a single page (usually used for SEO) and links are also commonly used information.

     <meta name="description" content="{% pageDetail with name="Description" %}">
     <a href="{% pageDetail with name="Link" %}">访问此页面</a>
     

   • Get page images (Logo, thumbnails, slideshow sets):If the single page is set to thumbnail, Logo or multiple slides, it can also be accessed throughpageDetailGet it.

     {# 获取单页面的Logo图片 #}
     <img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}">
     
     {# 获取单页面的幻灯片组图，并循环显示 #}
     {% pageDetail pageImages with name="Images" %}
     <div class="banner-carousel">
         {% for image in pageImages %}
         <img src="{{image}}" alt="幻灯片">
         {% endfor %}
     </div>
     

3. Specify the content of a specific single page:Although in the single page's own template,pageDetailIt will automatically identify the current page, but if you need to refer to the content of a specific single page on other pages (such as the homepage, article detail page), you need to specify throughidortokenthe parameter.idIs a single-page digital ID,tokenIs the "custom URL" alias set in the background. For example, display the introduction of the "About Us" page on the homepage:

   <div class="about-us-summary">
       <h2><a href="{% pageDetail with name="Link" token="about-us" %}">{% pageDetail with name="Title" token="about-us" %}</a></h2>
       <p>{% pageDetail with name="Description" token="about-us" %}</p>
       <a href="{% pageDetail with name="Link" token="about-us" %}">了解更多</a>
   </div>
   

Customization and advanced usage

• Custom template file:The AnQi CMS allows you to specify a separate template file for each single page. For example, if you have a unique "Contact Us" page that requires a layout and style completely different from other single pages, you can create it in your template directory.page/contact.htmlFile. Then, in the background 'Page Management', edit the 'Contact Us' page, set the 'Single Page Template' option tocontact.html. So, when accessing the 'Contact Us' page, the system will automatically loadpage/contact.htmlto render the content

• Multi-site content call: If you have used the multi-site management function of Anqi CMS and want to call the single-page content of another site in one site, you can do so bysiteIdSpecify the target site with parameters. This is usually advanced usage and is generally not required.

By this method, you can flexibly manage and display various single-page content in AnQi CMS, whether it is a simple text display or a complex page containing image galleries, Markdown rendering,pageDetailTags can provide strong support to make your website content operations more efficient.

Frequently Asked Questions (FAQ)

1. Q: Can I use a completely different layout and style for single-page pages like "About Us"? A:Of course you can. In the Anqi CMS backend's 'Page Management', when editing the 'About Us' page, you will see a page named 'Single'}]