How to display unique content and images on a custom page (single page)?

In website operation, we often need to create pages with unique content and personalized design layouts, such as 'About Us', 'Contact Information', or a specific event detail page.AutoCMS (AutoCMS) provides us with powerful custom page (single page) functionality, allowing us to easily manage the text content of these pages and flexibly display their exclusive images and customized layouts.

How can we specifically operate to allow custom pages to have their own unique content and image display methods?This mainly involves several steps: first, create and edit a single page in the background, then make or choose a dedicated page template, and then skillfully call out these contents and images in the template, finally applying the template to the corresponding single page.

1. Create and manage custom pages (single pages) in the background

Everything starts with content.In the backend of AnQi CMS, you can find the 'Page Management' feature under 'Page Resources'.Here, you can easily create new single pages or edit existing pages.

When you add or edit a single page, you will see a series of fields that can be filled in:

  • Page NameThis is the title of your single page, which is usually displayed on the front end of the website.
  • SEO title, keywords, single page introductionThese are for search engine optimization, which can help your page achieve better ranking.
  • Single page contentThis is the core text content of the page, Anqi CMS provides a rich-featured editor, allowing you to format text and insert images as if you were writing an article.
  • Banner imageThis is a very practical feature, specifically used for uploading multiple images as banners or sliders on a page.When your 'About Us' page needs a beautiful top image, or the event page needs multiple promotional images, you can upload them here.
  • ThumbnailIf your single page needs to display a representative image in some lists (such as page navigation or related recommendations), you can upload it here.

After uploading the image and editing the content, there is no need to worry about their display issues for the time being, let's save these background data first.

Second, create or select a dedicated page template.

By default, the custom page of Safe CMS will use a page namedpage/detail.htmlThe general template. But if we want the "About Us" page to look different, we need to customize a template for it.

The template files of Anqi CMS are stored in/template/您的模板目录/autopage/auto

  1. auto:page/detail.htmlauto
  2. Specify template by ID:page/detail-{单页ID}.htmlIf you want to create a template for a specific page with a certain ID, for example, a single page with ID 10, you can name itpage/detail-10.html.
  3. Custom named templateThis is the most commonly used method, you can give the template a meaningful name, such aspage/about.htmlorpage/contact.html.

No matter which naming convention is used, the template internally will use AnQiCMS provided Django-style template tags to call backend data. Static resources such as CSS, JavaScript, and images are usually stored in/public/static/In the directory, and refer to it in the template.

3. Call the page-specific content and images in the template.

With exclusive template files, the next step is how to display the content edited on the back-end and the images uploaded. Anqi CMS providespageDetailLabel, it can be very convenient to get various data of a single page.

In your custom page template (such as)page/about.html), you can call the title, content, and image of the page like this:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% pageDetail with name="Title" %}</title>
    <meta name="description" content="{% pageDetail with name="Description" %}">
    <meta name="keywords" content="{% pageDetail with name="Keywords" %}">
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
    {# 引用公共头部，如header.html #}
    {% include "partial/header.html" %}

    <main class="page-container">
        <h1 class="page-title">{% pageDetail with name="Title" %}</h1>

        {# 显示页面的Banner图组 #}
        <div class="page-banners">
            {% pageDetail pageImages with name="Images" %}
            {% for img in pageImages %}
                <img src="{{ img }}" alt="{% pageDetail with name="Title" %}" class="banner-image">
            {% endfor %}
            {% endpageDetail %}
        </div>

        {# 显示页面的缩略图（如果需要作为主图展示） #}
        {% pageDetail pageLogo with name="Logo" %}
        {% if pageLogo %}
            <div class="page-thumbnail">
                <img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}" class="main-thumb">
            </div>
        {% endif %}
        {% endpageDetail %}
        
        <div class="page-content">
            {# 调用单页内容，注意使用 |safe 过滤器防止HTML被转义 #}
            {% pageDetail pageContent with name="Content" %}
            {{ pageContent|safe }}
            {% endpageDetail %}
        </div>
    </main>

    {# 引用公共底部，如footer.html #}
    {% include "partial/footer.html" %}
</body>
</html>

In the above code,{% pageDetail with name="Title" %}It will directly output the page name,{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}It will output the single-page content you edit in the backend editor, and|safethe filter ensures that the HTML code can be correctly parsed by the browser.

The most critical part is the image section:

  • {% pageDetail pageImages with name="Images" %}Used to obtain the list of images you uploaded in the background "Banner Image". Since there may be multiple images here, it is necessary to use{% for img in pageImages %}By loop to display them one by one.
  • {% pageDetail pageLogo with name="Logo" %}Then you can get the single image you uploaded in the "thumbnail" on the backend.

With these tags, you can completely control the layout and display style of the page content and images.

Four, apply the custom template to the single page

The template file has been completed, and the final step is to associate this template with your single page.

Return to the "Page Management" section of the AnQi CMS backend and edit the single page you want to apply the template to. In the editing page, find the page namedSingle Page TemplateThe input box. Here, you need to enter the relative path and name of your custom template file.

For example, if the template file you create is/template/您的模板目录/page/about.htmlThen in the "Single Page Template" field, you only need to fill inpage/about.htmlYou will see it completely refreshed after saving the settings, accessing the single page, and it will adopt the exclusive layout, content, and image display method you choose.

By following these steps, you can make each custom page of the AnQi CMS unique in charm, whether it is content or visual presentation, it can perfectly meet your operational needs.

Common Questions (FAQ)

1. How to use different templates for different custom pages (single page)?You can create different template files for each single page that requires a unique design, and name them using the 'Custom Name Template' method, for example,page/about-us.html/page/contact-us.html. Then edit the corresponding single page in the background, and enter the corresponding template file name in the "Single Page Template" field (such aspage/about-us.html）。Thus, each single page can have its own dedicated display style.

2. Why is my custom page content or image not displayed correctly on the front end?There are several common reasons:

  • The template path is incorrect: Please check if the path you filled in the "Single Page Template" field in the background matches the actual template file path (for example, ensure thatpage/about.html确实存在于/template/您的模板目录/page/下）。
  • |safe过滤器缺失：如果您单页内容包含HTML代码（比如粗体、链接、图片等），在模板中调用{{ pageContent }}时必须加上|safea filter, that is{{ pageContent|safe }}If not, the system will default to escaping HTML codes, causing them to be displayed as text and not rendered normally.
  • Image path issueEnsure that the image you upload displays normally in the background, and the code that calls the image in the template is correct.If the image is uploaded to the local, the path is usually generated automatically; if it is an external image, ensure that the URL is accessible.
  • Cache issues：Sometimes browser or system cache may cause changes not to be displayed in time. Try clearing the browser cache or clicking "Update Cache" in the AnQiCMS backend and then view it.

3. What information other than content and images can be set on a custom page to benefit SEO?When creating or editing a custom page, you can fill in the 'SEO title', 'keywords', and 'single page introduction' fields in the background. This information will be directly mapped to the page's HTML<title>tags