How to get and display the content and information of a single page (such as "About Us" or "Contact Us") in AnQiCMS templates?

Manage and display single-page content in AnQi CMS, such as “About Us”, “Contact Us”, or “Terms of Service”, etc., is a very common requirement in website operation.AnQi CMS provides developers with intuitive and powerful template tags, allowing you to easily retrieve and display this information on the website front end.

Understand the single page content management in the security CMS

Firstly, we need to understand how the security CMS manages these 'single-page'.In the "Page ResourcesHere, you can create, edit, and manage all single pages on the website.

  • Page name/title:The main title seen by the user.
  • content you need to modify:The main text of the page, usually containing rich HTML formatted content.
  • Customize URL:You can set a friendly URL alias for each page, for example, “about-us” corresponds to “About Us”.
  • SEO title, keywords, and description:Used for search engine optimization, enhancing page visibility.
  • Thumbnail and Banner image:Can be used for page overview or as a visual element in the page header.
  • Single Page Template:You can even specify a completely different template file for a specific single page to achieve a unique layout and design.

This information can be called and displayed on the website front-end after being entered in the background.

Core Function Tags:pageDetail

In the template system of Anqi CMS, obtainsingleThe core tool of the single-page content ispageDetailThis tag allows you to accurately obtain all the details of a page based on the page ID or its custom URL alias.

pageDetailThe basic usage of the label is:{% pageDetail 变量名称 with name="字段名称" id="单页ID" %}or{% pageDetail 变量名称 with name="字段名称" token="单页URL别名" %}.

  • idParameters:This is the unique numeric identifier for a single page in the background database. Usually, when you create a single page in the background, the system will automatically allocate an ID.
  • tokenParameters:This is the custom URL alias set for single-page in the backend (e.g., “about-us”).tokenusuallyidMore readable and usable, because URL aliases are usually more semantic.
  • nameParameters:This parameter is used to specify the specific fields you want to retrieve from a single-page data, such as the title (Title), content (Content), link (Link）etc.
  • 变量名称:You can specify a variable name for the data you get (such asaboutPage), so that you can refer to other properties of the page in subsequent code through{{ aboutPage.Title }}etc. If you do not specify a variable name, thenpageDetailThe label will directly output the value of the specified field.

The key fields to get the content of a single page:

  • Title:The title of the single page.
  • Content:The main content of the single page. Please note that since the single page content usually contains HTML format, you need to use|safeThe filter to ensure that HTML code can be rendered correctly instead of being escaped into plain text. For example:{{ pageContent|safe }}.
  • Link:Single-page access URL.
  • Description:Single-page description (usually used for SEO).
  • LogoandThumb:The thumbnail and large image address for single-page settings.
  • Images:The group of slides for single-page settings, this is an array, and it needs to be accessed throughforlooping through and displaying.

Example: Get the title and content of the "About Us" page.

Assuming you have created an "about us" page in the background with ID 1, and set the URL alias to "about-us".

{# 假设我们正在一个基础模板中，需要获取“关于我们”这个单页的信息 #}

<div class="about-us-section">
    {# 方法一：通过ID获取，并指定变量名aboutPage #}
    {% pageDetail aboutPage with name="Title" id="1" %}
    <h2>{{ aboutPage }}</h2>

    {% pageDetail aboutContent with name="Content" id="1" %}
    <div class="page-content">
        {# 注意：单页内容通常包含HTML，需要使用 |safe 过滤器防止HTML被转义 #}
        {{ aboutContent|safe }}
    </div>

    {# 方法二：通过URL别名获取，直接输出字段值 #}
    <h3>{% pageDetail with name="Title" token="about-us" %}</h3>
    <div class="page-description">
        {# 获取描述信息，用于SEO或页面摘要 #}
        <p>{% pageDetail with name="Description" token="about-us" %}</p>
    </div>

    {# 如果单页设置了Logo或Thumb，可以这样显示 #}
    {% pageDetail pageLogo with name="Logo" token="about-us" %}
    {% if pageLogo %}
        <img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" token="about-us" %}" class="page-logo">
    {% endif %}

    {# 如果单页设置了多张图片，可以这样遍历显示 #}
    {% pageDetail pageImages with name="Images" token="about-us" %}
    {% if pageImages %}
        <div class="page-gallery">
        {% for image in pageImages %}
            <img src="{{ image }}" alt="{% pageDetail with name="Title" token="about-us" %} 图片" class="gallery-item">
        {% endfor %}
        </div>
    {% endif %}
</div>

CombinepageListImplement single-page list display (auxiliary use)

Although you mainly focus on obtainingsinglePage content, but in some cases, you may need to list all single pages on the website, such as adding links to "Privacy Policy", "Terms of Service", and so on in the copyright information area at the bottom of the website, or displaying all accessible single pages in the site map. At this time, pageListTags come into play.

pageListThe label will fetch all published single pages. You can use it in combination withfora loop to iterate through these single pages and display their titles and links.

{# 列出所有单页，例如用于网站地图或页脚导航 #}
<nav class="footer-pages-nav">
    <ul>
    {% pageList allPages %}
        {% for item in allPages %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endfor %}
    {% endpageList %}
    </ul>
</nav>

In practice, you can use it inforAdd conditional judgment within the loop, for example, excluding pages with specific IDs, or only displaying pages of specific types (if your page management has more detailed categories).

Advanced Applications and Techniques

  • Custom Templates:The Safe CMS allows you to specify an independent template file for a specific single page. For example, if you create a template namedpage/contact-us.htmlThe template, and specified it in the background single-page settings, then when the user visits this page, the system will automatically load this customized template and use it in it.pageDetailLabel to get information about the current page.
  • [en] SEO Optimization:The title and description information obtained can be flexibly placed on the page.<title>Tags and<meta name="description">Tags within the HTML are used to ensure that each single page has independent and optimized SEO meta information.
  • Multi-site support:If you are using the multi-site management feature of Anqin CMS and need to call single-page content from other sites,pageDetailandpageListtags are supportedsiteIdparameters, allowing you to retrieve data across sites.

PasspageDetailandpageListThe flexible application of labels, you can efficiently and accurately control the display of single-page content on the website in the AQS CMS, providing users with a smooth browsing experience, and also meet the various needs of website operation and SEO.

Common Questions (FAQ)

  1. 问：How can I get the content of a single page by its Chinese name (such as "About Us"), instead of using ID or URL alias? Answer:Anqi CMS'spageDetailLabel currently does not support direct retrieval of single page content through Chinese name. You