How to display the details and list of a custom single page in AnQiCMS?

In AnQiCMS, the Single Page (Page) feature provides the website with the powerful ability to display independent and fixed content, such as the "About Us", "Contact Information", "Company Profile", and other pages.These pages usually do not belong to any category, but exist independently, carrying important corporate information or brand stories.Efficiently create, manage, and flexibly display the details and lists of these single-page sites on the website, which is an indispensable part of content operation.

Understanding the single page and its role

The single-page is designed as an independent content carrier in AnQiCMS, which is different from the conventional document models such as articles or products.Its core advantage lies in the independence of content and the convenience of management.You can configure an independent title, keywords, description, even a custom URL for each single page, which is very friendly for search engine optimization (SEO).Whether it is to show a detailed company history or a concise contact method, a single page can provide a perfect solution.

Creating and managing single pages in the background

Firstly, to make the single page content appear on the website, you need to create and manage it in the AnQiCMS backend.

  1. Enter Page Management:Log in to the AnQiCMS backend, find the "Page Resources
  2. Add or edit a single page:In the page management interface, you can click the "Add Single Page" button to create a new page, or select an existing page to edit.
  3. Enter page information:
    • Page name:This is the title displayed on the single page in the front end.
    • SEO title, keywords, single page introduction:These fields are crucial for SEO, please fill them carefully according to the page content.
    • Custom URL:AnQiCMS allows you to set a personalized URL alias for a single page, such asabout-us/contact-us. This not only helps improve the readability of the URL, but also benefits SEO.
    • Single page content:This is the main content of the page, AnQiCMS provides a rich editor, you can insert text, images, videos, and more.
    • Single page template: This is a very critical setting item, which determines which template file your single page will use to render on the front end. The system defaults to usingpage/detail.html. But if you want to design a unique layout for a specific page (such as "About Us"), you can create a template file namedpage/about-us.htmland fill it in here.about-us.html.

By following these steps, your single-page content is ready in the background. Next, let's see how we can flexibly display them on the website front end.

Customize the single-page detail template

AnQiCMS uses a syntax similar to the Django template engine, template files are located in.htmlwith suffix, and stored uniformly intemplatedirectory. For single-page applications, the template files are usually located intemplate/您的模板名称/page/path.

AnQiCMS provides default template naming rules for single-page details, making it easy for you to apply quickly:

  • Universal detail template: page/detail.html. All single pages that do not specify a custom template will use this file.
  • Custom template based on ID: page/detail-{单页ID}.html. For example, a single page with ID 10 can usepage/detail-10.html.
  • More flexible custom templates:You can create such aspage/about-us.html/page/faq.htmletc. template files with descriptive names, and then fill in the "Single Page Template" field when creating or editing a single page in the backgroundabout-us.html/faq.htmlwait for the corresponding filename.

In your single page detail template file (for examplepage/detail.htmlorpage/about-us.html) you need to use the tags provided by AnQiCMS to get the data of the current single page.pageDetailtag to get the data of the current single page.

pageDetailLabel usage example:

{# 假设这是 template/您的模板名称/page/detail.html 或 page/about-us.html #}

{% extends "base.html" %} {# 继承您的基础布局模板 #}

{% block title %}{% pageDetail with name="Title" siteName=true %}{% endblock %} {# 设置页面标题，并附加网站名称 #}
{% block keywords %}{% pageDetail with name="Keywords" %}{% endblock %} {# 设置页面关键词 #}
{% block description %}{% pageDetail with name="Description" %}{% endblock %} {# 设置页面描述 #}

{% block content %}
<article class="single-page-detail">
    <h1>{% pageDetail with name="Title" %}</h1> {# 显示单页面标题 #}

    <div class="page-meta">
        {# 您可以在这里显示其他元信息，如发布日期（如果单页面有的话） #}
    </div>

    <div class="page-content">
        {# 显示单页面内容，注意使用 |safe 过滤器以解析HTML内容 #}
        {% pageDetail content with name="Content" %}
        {{ content|safe }}
    </div>

    {# 假设您为单页面上传了Banner图，可以在这里展示 #}
    {% pageDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        <div class="page-banner">
            {% for img in bannerImages %}
                <img src="{{ img }}" alt="{% pageDetail with name='Title' %}" />
            {% endfor %}
        </div>
    {% endif %}

    {# 如果您想获取指定ID的单页面数据，例如首页上展示“关于我们”的简介，可以这样使用： #}
    {# {% pageDetail aboutPage with name="Title" id="1" %}
    <p>关于我们页面标题：{{ aboutPage }}</p> #}

</article>
{% endblock %}

In the above code:

  • {% pageDetail with name="Title" %}: Retrieves the title of the current single page.
  • {% pageDetail content with name="Content" %}{{ content|safe }}: Retrieves the main content of the single page, |safeThe filter is crucial, it ensures that the HTML content entered in the editor can be normally parsed and displayed by the browser, rather than output as plain text.
  • {% pageDetail with name="Link" %}: Get the link of a single page.
  • {% pageDetail with name="Logo" %}or{% pageDetail pageImages with name="Images" %}Used to retrieve thumbnail images or multiple banner images on a single page.

Call a single-page list

In addition to displaying the details of a single page, you may also need to display on the website