How to get and display the title, content, link, and thumbnail of a specified single page (such as “About Us”)?

In AnQi CMS, single-page content such as "About Us", "Contact Us", or "Privacy Policy", etc., usually carries important fixed information.These pages not only need to be displayed under independent URLs, but may also need to extract their titles, summaries, links, or thumbnails in other areas of the website (such as the footer, sidebar, or specific modules on the homepage) for display.AnQi CMS provides simple and powerful template tags, allowing you to easily implement this requirement in website templates.

Understanding the single page in Anqi CMS

In the Anqi CMS backend, you can create and manage these single pages under "Page Resources" and "Page Management".Each single page includes a series of editable fields, such as page name (as title), custom URL (as link), single page introduction, single page content, and optional thumbnail and large image (Logo).This information can be flexibly called on the front-end page through template tags.

Core tags:pageDetail

To retrieve and display the detailed information of a specified page, you need to use Anqí CMS'spageDetailtemplate tag. This tag is specifically designed to extract data from a single page.

pageDetailThe basic syntax structure of the tag is:

{% pageDetail 变量名 with name="字段名称" id="页面ID" %}

Or, if you prefer to use a single-page custom alias (URL token), the syntax is as follows:

{% pageDetail 变量名 with name="字段名称" token="页面别名" %}

• 变量名This is an optional parameter, you can assign the obtained single-page information to a custom variable for repeated use of its properties in subsequent code, to avoid multiple calls to the tag.
• name="字段名称": Specify the single-page attribute you want to retrieve, such as"Title"(Title),"Content"(Content),"Link"(Link),"Logo"(Main image) or"Thumb"(Thumbnail) etc."),
• id="页面ID": Specify which single-page information to retrieve by the single-page numeric ID.
• token="页面别名"Through the custom URL alias of the single page to specify which single page information to retrieve. This is usually more readable than ID and can be configured in the background.
• siteIdIn a multi-site management environment, if you need to retrieve data from other sites, you can specifysiteId="站点ID".

Next, we will demonstrate step by step how to retrieve and display the key information of a single page.

Retrieve and display the title of a single page

To display the title of a specified single page, you can usename="Title"parameters. For example, assume that the ID of the "About Us" page is 1, or its custom alias isabout-us:

{# 通过ID获取并直接显示ID为1的单页标题 #}
<h2 class="page-title">{% pageDetail with name="Title" id="1" %}</h2>

{# 或者通过别名获取并直接显示“关于我们”页面的标题 #}
<h2 class="page-title">{% pageDetail with name="Title" token="about-us" %}</h2>

{# 也可以将标题赋值给变量再使用，这在需要多次引用时很有用 #}
{% pageDetail aboutTitle with name="Title" id="1" %}
<h2 class="page-title">{{ aboutTitle }}</h2>

Get and display single page content

The content of a single page usually includes HTML tags or Markdown format.Pay special attention to ensure that HTML is rendered correctly and not displayed as plain text, or that Markdown can be converted to HTML.

{# 获取ID为1的单页内容。如果内容是HTML格式，需要使用 |safe 过滤器防止转义 #}
<div class="page-content">
    {% pageDetail with name="Content" id="1" %}|safe
</div>

{# 如果单页内容是以Markdown格式编写的，您需要先使用 |render 过滤器将其转换为HTML，然后再用 |safe 防止转义 #}
{% pageDetail pageContent with name="Content" token="about-us" %}
<div class="page-content">
    {{ pageContent|render|safe }}
</div>

Remember,|safeThe filter is used to tell the template engine that the output string is safe HTML and does not need to be escaped.|renderThe filter is to convert the content to HTML when it is Markdown.

Get and display single-page links

Single-page links can be accessed byname="Link"Parameter retrieval is very useful for creating "View More" buttons or navigation links:

{# 获取ID为1的单页链接，并创建一个“查看详情”按钮 #}
<a href="{% pageDetail with name="Link" id="1" %}" class="btn btn-primary">查看详情</a>

{# 或者通过别名获取链接 #}
<a href="{% pageDetail with name="Link" token="contact-us" %}" class="contact-link">联系我们</a>

Retrieve and display a single-page thumbnail

The single page usually allows you to upload a main image (Logo) and a thumbnail (Thumb) processed by the system. You can choose to use according to your design requirements.name="Logo"orname="Thumb".

{# 获取ID为1的单页主图（Logo） #}
<div class="page-thumbnail">
    <img src="{% pageDetail with name="Logo" id="1" %}" alt="{% pageDetail with name="Title" id="1" %}" />
</div>

{# 获取ID为1的单页缩略图（Thumb），通常用于列表展示 #}
<div class="page-thumbnail-small">
    <img src="{% pageDetail with name="Thumb" id="1" %}" alt="{% pageDetail with name="Title" id="1" %}" />
</div>

{# 如果需要对图片进行进一步的尺寸处理，可以使用 |thumb 过滤器 #}
{% pageDetail pageMainImage with name="Logo" token="about-us" %}
<img src="{{ pageMainImage|thumb }}" alt="{% pageDetail with name="Title" token="about-us" %}" />

Comprehensive example: Display the summary information of "About Us" on the homepage

Now, we will combine the above elements to create a module that displays the summary information of the 'About Us' page on the website homepage. Assume the ID of the 'About Us' page is 1.

`twig

{# 定义一个变量来存储“关于我们”页面的ID或别名，便于管理 #}
{% set aboutPageIdentifier = 1