How to use AnqiCMS's single page list tag to flexibly display independent pages such as 'About Us' on the front end?

In modern website operations, pages like "About UsAnqiCMS provides a flexible "single-page" management feature, combined with its powerful template tag system, we can easily display these independent pages on the front end and customize them as needed.

The concept and function of a single page in AnqiCMS

In AnqiCMS, "single page" refers to pages that are independent, do not belong to any category, and usually do not have comment functions.They are different from the dynamic content that needs to be categorized as "articles" or "products", and are more inclined to static information display.

  • About Us: Introduce company history, vision, team, etc.
  • Contact Us: Provide contact information, map, online message form, etc.
  • Terms of Service/Privacy Policy: Legal and regulatory text.
  • Corporate Culture: Show the corporate values and spirit.

Reasonably utilizing a single page can make the website structure clearer, allowing users to quickly find the information they need and also helps search engines better understand the content of the website.

Manage single page in AnqiCMS backend

Firstly, we need to create and manage these independent pages in the AnqiCMS backend. The operation path is very intuitive:

  1. Enter Page Management:Log in to the AnqiCMS backend, navigate to the 'Page Resources' menu, and then select 'Page Management.'
  2. Add or edit a single page:Here, you can add a new page or edit an existing page. When editing a page, there are several key fields to pay attention to:
    • Page name:This is the title displayed on the front page of the page.
    • Custom URL:It is recommended to set a concise and meaningful custom URL for each independent page, which is very helpful for search engine optimization (SEO) and user-friendliness, such as "about-us" or "contact.
    • Single page content:This is the main content area of the page, where you can use the rich text editor to edit content with pictures and text.
    • Single page template: This is a very flexible setting. AnqiCMS defaults to usingpage/detail.htmlAs a general template for all single pages. But if you want a specific page (such as "About Us") to have a unique layout and style, you can specify a custom template file here, such aspage/about-us.html。AnqiCMS will prioritize the use of the template you specified to render the page.

With these settings, each independent page can have its own URL, content, and exclusive display style.

UsepageListTags are displayed as a single page list on the front end

On the front end of the website, we often need to list the links to these independent pages in the navigation menu, footer, or sidebar. AnqiCMS'spageListLabels are designed for this. They allow you to retrieve all or specific single-page data and display it in a template loop.

Suppose you want to list the links to "About Us", "Contact Us", and "Terms of Service" in the website footer, you can use it like thispageListTags:

{# 假设您在页脚或侧边栏模板中 #}
<ul>
{% pageList pages %}
    {% for item in pages %}
    {# 可以在这里根据 item.Id 或 item.Title 进行筛选，例如排除某个不希望在页脚显示的页面 #}
    {% if item.Title != "内部通知" %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

In this code block:

  • {% pageList pages %}It will retrieve all single-page data from the background and assign it to a namedpages.
  • {% for item in pages %}Iterate through each single page.
  • item.LinkIt will output the access link of the page.
  • item.TitleIt will output the page title.
  • We can also addforAdd conditional judgment inside the loop, according toitem.Idoritem.Titleto selectively display or hide certain pages, which provides great flexibility.

Customize the display of single-page detail pages individually

When a user clicks on a single-page link and accesses the detail page, AnqiCMS will render the page according to the 'single-page template' set in the background.

As previously mentioned, by default, all single pages will usepage/detail.htmlthe template. If you have specified for the "About Us" page in the backgroundpage/about-us.htmlAs a template, then AnqiCMS will search and usetemplate/您的主题目录/page/about-us.htmlthis file to render the content.

In these custom single-page templates, you can directly access all the details of the current page without any additional callpageDetailLabel (AnqiCMS will automatically provide the data of the current page in the single page detail page context). You can display the page content like this:

{# 假设这是 template/您的主题目录/page/about-us.html #}
<div class="page-header">
    <h1>{{ page.Title }}</h1>
    {# 如果页面有上传Banner图，可以这样显示 #}
    {% if page.Images %}
        {% set pageBanner = page.Images[0] %}
        <img src="{{ pageBanner }}" alt="{{ page.Title }}" class="page-banner-img">
    {% endif %}
</div>
<div class="page-content">
    {# 注意：如果内容是富文本或Markdown，需要使用 |safe 过滤器以防HTML被转义 #}
    {{ page.Content|safe }}
</div>
<div class="page-description">
    <p>{{ page.Description }}</p>
</div>

In this custom template:

  • {{ page.Title }}Directly display the title of the current single page.
  • page.ImagesIt is a list of images,page.Images[0]Can obtain the first image as a Banner.
  • {{ page.Content|safe }}Display the main content of the page,|safeThe filter ensures that HTML tags within the content are parsed correctly and not displayed as plain text.
  • page.DescriptionDisplay the page overview.

In this way, you can design completely different visual effects and functional layouts according to the specific needs of each independent page, whether it is a simple text display or complex text-image interaction, it can be easily realized.

Summary

Single-page management of AnqiCMSpageList/pageDetailThe combination of tags provides great flexibility and convenience for independent page display on the website.Create the page from the backend and specify the template, and then display and personalize the list on the front end. The entire process runs smoothly and efficiently.