How to display the complete content and all fields of a single page?

In Anqi CMS, a single page is the basis for building static content pages such as 'About Us', 'Contact Information', and so on.Effectively displaying the complete content and all field information of these pages is crucial for website customization and user experience.AnQi CMS provides intuitive and powerful template tags, allowing you to easily display the single-page data configured on the backend on the website front end.

To display the complete content of a single page and all related fields, we mainly usepageDetailThis is the core template tag. This tag helps us to get detailed data of a specified single page and display it flexibly in the template.

UnderstandingpageDetailBasic usage of tags

pageDetailThere are two main ways to use tags. You can choose to get the value of a specific field on a single page, or you can assign the entire single page object to a variable and then access its various fields through this variable.

If your page is already a single-page detail page and you want to display the information of the current page, usually no additional ID needs to be specified,pageDetailThe tag automatically identifies the context of the current page. Of course, if you need to display single-page information with a specified ID or URL alias on a page, you can also addidortokenCall a parameter to achieve accurate invocation.

For example, to directly display the title of the current single page, you can write as follows:{% pageDetail with name="Title" %}. If you want to get the entire single page object and assign it to a variable namedcurrentPageThe variable can be operated in this way:{% pageDetail currentPage %}Next, you can access the various data of this single page bycurrentPage.Title/currentPage.Contentand so on to access the various data of this single page.

Display the core content and basic information of the single page.

A single page usually contains elements such as title, description, content, and other basic constituent elements. Anqi CMS provides clear calling methods for these core fields.

• Page Title (Title)This is the main title of a single page, usually displayed at the top of the page or in the browser tab. You can use{% pageDetail with name="Title" %}Get it.
• Page Content (Content)This is the main content of a single page, which often contains rich text, images, videos and other rich media information. When using{% pageDetail with name="Content" %}Be sure to use it in conjunction with the call.|safeThe filter is used to ensure that HTML content can be correctly parsed by the browser rather than being escaped as plain text. If your content is written in Markdown format, you can add it additionallyrender=trueparameters such as{% pageDetail with name="Content" render=true %}to ensure it is correctly converted to HTML.
• Page Description (Description)This is usually a brief summary of the page, which is helpful for SEO optimization. It can be accessed through{% pageDetail with name="Description" %}Retrieve.
• Page Link (Link)Get the complete URL of a single page, convenient for creating jump links in templates. The calling method is{% pageDetail with name="Link" %}.

In addition to these, you can also display the unique identifier of a single pageId({% pageDetail with name="Id" %}), as well as for customizing static URLs自定义URL (token).

Handle image and multimedia fields

A single page may also include images, such as banners at the top of the page or as thumbnails.

• Page Thumbnail (Thumb / Logo)If the single page is set to thumbnail, you can access it through{% pageDetail with name="Thumb" %}or{% pageDetail with name="Logo" %}Get the image address. These fields are usually used for list display or as representative images on the page.
• Page slideshow (Images): Some single pages may need to display a set of images as a carousel or gallery.Imagesfield will return an array of image addresses. You need to combineforloop tags to iterate and display these images.

  
  {% pageDetail pageImages with name="Images" %}
  {% for item in pageImages %}
      <img src="{{ item }}" alt="图片描述" />
  {% endfor %}
  

  If you only want to get the first picture from it, you can use array indexing to achieve this:{% set firstImage = pageImages[0] %}.

Custom template and SEO related fields

The AnQi CMS allows for independent templates to be set for single pages, as well as for detailed SEO optimization.

• Single page template: An independent template file is specified for a specific single page in the background (for exampledownload.htmlAfter that, the system will prioritize using this template. This means you cantemplate/page/Create in the directorydownload.htmla file and write unique layout and style for the single page.

• SEO Title (SeoTitle)/KeywordsThese fields are used to optimize search engine crawling and ranking. AlthoughpageDetailtags can obtain this information separately, but it is more recommended to usetdkLabels to manage and output pages uniformlytitle/keywordsanddescriptionbecausetdkLabels will intelligently combine and display this information according to the current page type (including single pages), and can also attach the website name and so on.

  For example, in yourbase.htmltemplate file<head>The area, you may have already set a similar TDK tag, which will intelligently obtain and display relevant information according to the type of the current page:

  <title>{% tdk with name="Title" siteName=true %}</title>
  <meta name="keywords" content="{% tdk with name="Keywords" %}">
  <meta name="description" content="{% tdk with name="Description" %}">
  

Summary

BypageDetailLabel, you can easily access and display all the information of the AnQi CMS single page, whether it is basic content, images, or SEO-related metadata.In actual operation, the key is to selectively call these fields according to your design requirements, and combine them with the loop, conditional judgment, and filter of the template engine to build a single page that is both beautiful and practical.Flexible use of these tools will make your website content management and display more efficient.

Frequently Asked Questions (FAQ)

1. Why does my single-page content (Content) display a bunch of HTML code instead of formatted text?This is usually because you are directly outputting in the template.Contentfield is used without|safeFilter. By default, Anqi CMS escapes the output HTML content to prevent XSS attacks.In order for the HTML content to be correctly parsed and displayed as formatted text, you need to outputContentwhen adding the field|safefor example:{{ currentPage.Content|safe }}. If the content is in Markdown format, make sure Markdown rendering is enabled and userender=trueParameter.

How to set a unique layout for a specific "About Us" page that is different from other single pages?You can edit the 'About Us' single page in the Anqi CMS backend, find the 'Single Page Template' setting item in 'Other Parameters'. Here you can enter the custom template filename, for exampleabout.html. Then, in your theme template folder (usually/template/您的主题名/page/create under the directoryabout.htmlThis file, and write its content according to your design requirements. In this way, only this specific single page will use the one you specifiedabout.htmltemplate, other single pages will continue to use the default onepage/detail.htmlTemplate.

3. How can I ensure that images in my single-page content display correctly and support lazy loading?Images in single-page content are usually inserted through a content editor, and by default, they are stored as part of the HTML.ContentIn the field. The first step to ensure that these images are displayed correctly is as mentioned in question 1, using it correctly|safeFilter. If you need lazy loading functionality, you may need to include a JavaScript library that supports lazy loading in your template. When callingContentyou can try addinglazy="data-src"such parameters as{% pageDetail with name="Content" lazy="data-src" %}This will notify the Anqic CMS to render the content.srcattribute is replaced withdata-src(Or any other attribute required by the lazy loading library you specify), thus coordinating with the front-end lazy loading script to achieve the effect.