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

In AnQi CMS, managing and displaying single-page content 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 obtain and display this information on the website front end.

Understand the single-page content management in AnQi CMS

Firstly, we need to understand how Anqi CMS manages these 'single pages'.Under the "Page Resources" module in the background, you can find the "Page Management" feature.Here, you can create, edit, and manage all single pages on the website.Each page includes a series of information, such as:

  • Page name/title:The main title seen by the user.
  • Content:The main text of the page, usually containing rich content in HTML format.
  • Custom URL:You can set a friendly URL alias for each single page, such as “about-us” corresponding to “About Us”.
  • SEO title, keywords, and description:Used for search engine optimization, improving 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 is entered in the background, and can be called and displayed on the front end of the website through template tags.

Core feature tags:pageDetail

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

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

  • idparameters:This is the unique numeric identifier for the single page in the backend database. Usually, after creating a single page in the backend, the system will automatically allocate an ID.
  • tokenparameters:This is the custom URL alias set for the single page in the background (for example, "about-us"). Usetokenit is usually better thanidReadability and usability are enhanced 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) and so on.
  • 变量名称:You can specify a variable name (such asaboutPage), so that you can refer to other properties of the page in subsequent code by{{ aboutPage.Title }}and so on. If you do not specify a variable name, thenpageDetailThe tag will directly output the value of the specified field.

Key field to retrieve the content of a single page:

  • Title:The title of a single page.
  • Content:The main content of a single page. Please note that since the single page content usually contains HTML format, you need to use it in the template.|safeA filter to ensure that HTML code is rendered correctly, rather than being escaped as plain text. For example:{{ pageContent|safe }}.
  • Link:The access URL of a single page.
  • Description:The description of a single page (usually used for SEO).
  • LogoandThumb:Thumbnail and large image address of the single page setting.
  • Images:Multiple slide groups set for the single page, this is an array, need to be processed through.forto loop through and display.

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

Assuming you have created a '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 purpose)

Although you are mainly concerned with obtaininga singleThe content of the page, but in some cases, you may need to list all the single pages on the website, such as adding links to "Privacy Policy", "Terms of Service", etc. in the copyright information area at the bottom of the website, or displaying all accessible single pages in the site map. At this point,pageListthe tag comes into play.

pageListThe tag will fetch all published pages. You can cooperateforto loop through these 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 canforAdd condition judgment inside the loop, for example, excluding pages with specific IDs or only displaying pages of a specific type (if your page management has more detailed categories).

Advanced Applications and Techniques

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

BypageDetailandpageListThe flexible use of tags, you can efficiently and accurately control the display of single-page content on Anqi CMS, providing users with a smooth browsing experience, while also meeting all the needs of website operation and SEO.

Frequently Asked Questions (FAQ)

  1. How to retrieve the content of a single page by its Chinese name (such as "About Us") in the template, rather than using ID or URL alias?? Answer:Of Security CMSpageDetailThe tag does not currently support obtaining single-page content directly through Chinese names. You