How to display the single page content of a specified ID in Anqi CMS, such as 'About Us'?

In Anqi CMS, whether it is to display a corporate profile like "About Us" or static content such as "Contact Information", "Terms of Service", the single-page feature is very practical.It allows you to create independent pages that do not belong to any category and provides a flexible way to control the display of these pages.

To make the Anqi CMS display the single page content of a specified ID, you will mainly use the built-in template tags and the page management function of the background.This makes it very convenient to customize exclusive layouts at any location on the website or for specific single-page sites.

1. Understand the single page function of AnQi CMS

The single-page design of Anqi CMS is intended to manage those contents that are relatively fixed and independently existing.For example, a company's 'About Us' page usually includes a company profile, development history, corporate culture, etc. This content does not update or categorize as frequently as articles or products, but it is an indispensable part of the website.

AnQi CMS provides a special management entrance for these single pages, allowing you to easily create, edit, publish these pages in the background, and finely control their titles, content, SEO information, and even display templates.

2. PassedpageDetailLabel precise call to a single page content

In the AnQi CMS template system,pageDetailThis is a key tag used to retrieve detailed information about a single page. This tag is very powerful, and you can use it in any template file on the website (such as the homepage, sidebar, article detail page, etc.) to call its content based on the ID of the single page or its custom URL alias (token).

For example, you would like to display a brief introduction of the "About Us" single page in the sidebar of the website homepage. Assuming you know the ID of the "About Us" single page is5You can write the code like this in the template:

{# 假设“关于我们”单页面的ID是5，pageDetail标签将获取该单页的所有信息，并赋值给pageData变量 #}
{% pageDetail pageData with id="5" %}
    {# 在调用之前，最好检查一下pageData是否存在，避免因ID错误导致页面报错 #}
    {% if pageData %}
        <div class="sidebar-about-us">
            <h3><a href="{{ pageData.Link }}">{{ pageData.Title }}</a></h3>
            <p>{{ pageData.Description }}</p>
            {# 如果想显示单页面的完整内容的一部分，通常需要使用过滤器来截取文本，例如： #}
            {# <p>{{ pageData.Content|striptags|truncatechars:100 }}</p> #}
            <a href="{{ pageData.Link }}" class="more-link">了解更多</a>
        </div>
    {% endif %}
{% endpageDetail %}

In this code block:

• {% pageDetail pageData with id="5" %}: is the core part. It tells the system to look up the ID of5A single page, and assign all its available fields (such as title, link, description, content, etc.) topageDatathis variable.
• {{ pageData.Title }}/{{ pageData.Description }}/{{ pageData.Link }}These are the callspageDatathe way to assign specific fields in the variable.
• {% if pageData %}This is a good habit to determine whether the single-page data is successfully obtained, to avoid errors when the data does not exist.

If you want to display the content of the single-page template file itself (for example, when the user clicks on the "About Us" link in the navigation bar), since the system already knows that the current page is this single page, you do not need to specify an ID and can call it directly:

{# 这是“关于我们”单页面的专属模板文件，比如可能位于 /template/您的主题/page/about.html #}
{% pageDetail pageContent %}
    <h1>{{ pageContent.Title }}</h1>
    <div class="main-content">
        {# **注意：** 单页面内容通常包含HTML富文本，为了正确显示HTML结构，务必使用 `|safe` 过滤器。 #}
        {{ pageContent.Content|safe }}
    </div>
    {% if pageContent.Images %}
        <div class="gallery">
            {% for image_url in pageContent.Images %}
                <img src="{{ image_url }}" alt="{{ pageContent.Title }}">
            {% endfor %}
        </div>
    {% endif %}
{% endpageDetail %}

3. Customize a dedicated template for the specified single page

The single-page feature of AnQi CMS not only supports calling through ID, but also allows you to specify a dedicated template file for a specific single page to achieve a more personalized display effect.This is very useful for pages that need a unique layout for the 'About Us' and 'Contact Us' sections.

The general steps are as follows:

1. Create or edit a single page in the background:

   • Log in to the AnQi CMS backend, go to the 'Page Resources' under 'Page Management.'
   • Create a new page or edit an existing page, such as 'About Us.'
   • In the page editing form, find the field named "Single Page Template."
   • Here, you can enter a custom template filename, for exampleabout.html. The system will load the specified template first when accessing this single page according to this setting.

2. Prepare to customize the template file:

   • According to the Anqi CMS template convention, the template files for a single page are usually stored in your theme directory.page/in the folder.
   • For example, if your theme name isdefaultAnd you set the "About Us" single page template in the background.about.htmlThen you need to./template/default/page/Create a file namedabout.html.
   • in thisabout.htmlIn the file, you can use the way described in the above "Display content in a single-page self-template"pageDetailtags to retrieve and display page data.

The advantage of this method is that you do not need to hardcode IDs in each reference to a single page, but rather the display method is determined by the page URL itself and the backend template settings, which greatly improves management efficiency and template reusability. In addition, you can also set a "custom URL" for single pages in the backend to make the access address more semantically meaningful, such as setting the URL for "About Us"./about-us.html.

Through the above two methods, whether it is to flexibly call the information of a single page with a specified ID on other pages, or to design a unique display template for a specific single page, Anqi CMS provides a clear and easy-to-use solution to help you easily manage the static content of your website.

Frequently Asked Questions (FAQ)

Q1: I created a "About Us" single page and wrote the content, but the content is not displayed completely or HTML tags are displayed when accessed on the front end. What's the matter?A1: This is likely because you did not use it when displaying single-page content in the template|safeFilter. The content of a single page is typically rich text, containing HTML tags.In the AnQi CMS template system, to prevent potential security issues (such as XSS attacks), all content retrieved from the database is automatically escaped by default, which means that HTML tags will be displayed as plain text.You need to call the content field (such as{{ pageContent.Content }}when added}|safea filter such as{{ pageContent.Content|safe }}This will inform the system that the content is safe and can be parsed and displayed as HTML.

Q2: I want to add a link to 'About Us' in the website's navigation bar, how should I operate?A2: You can configure it in the 'Background Settings' -> 'Navigation Settings' of the Anqi CMS backend.Select the navigation category you need to edit (such as "top navigation"), then add a new navigation link.In the 'Link Type' select 'Category Page Link', then find and select the 'About Us' single page you created.The system will automatically generate the correct link address for you.

Q3: Can I use different layouts for different single pages (for example, the "About Us" page has a sidebar, and the "Contact Us" page does not have a sidebar)?A3: Of course. Anqi CMS provides the 'Single Page Template' feature to achieve this.You can edit each single page in the background by specifying a unique template filename in the "Single Page Template" field (for example, "About Us" is specified asabout.html“Contact us” specified ascontact.html）。Then, in the topic you are currently discussing,template/your_theme/page/Under the directory, create these corresponding template files and design a unique layout in each file.This is when the system loads the specified template for each single page that the user visits, to implement different page layouts.