How to get and display all the content and associated images of a specific single page?

In Anqi CMS, a single page is an important part of the website's content structure, such as 'About Us', 'Contact Information', and so on.Effectively obtain and display all the content of these single pages and associated images, which is crucial for the communication of website information and visual expression.AnQi CMS provides an intuitive backend management and flexible template tags, making this process very convenient.

Easily set single page content and images in the background

First, we need to create and edit single page content in the Anqi CMS admin system.This is usually performed in the 'Page Resources' under the 'Page Management' module.When you add or edit a single page, you will see a series of fields to fill in the content:

You can enter the "page name", which will be the title of the page.Next, 'Single Page Summary' can be used to provide a brief overview of the page.The most important content is reflected in the "Single Page Content" area, where it supports rich text editors, can insert text, links, tables, etc., and can also directly embed images.

For associated images, AnQi CMS provides several ways to manage: First is the "thumbnail", where you can upload a main thumbnail for a single page, which is usually used for list display or as the main visual of the page.In addition, there is also a very practical "Banner Image" option, which allows you to upload multiple images, which are usually used as a carousel at the top of the page or as a gallery of images on the page.By these settings, you can easily organize the text and image content on a single page.

Retrieve and display single page information in the front-end template

After the background content setting is completed, the next step is how to display these contents in the website's frontend template.AnQi CMS adopts a simple template tag system, making content calls very intuitive.

Invocation of core text content

To obtain detailed content of a single page, we mainly usepageDetailTemplate tag. This tag can help us get various information from a specific single page.

Suppose you are editing a page namedpage/detail.htmlA single page detail template, or you have specified a custom template for a specific single page. In the template, you can directly use{% pageDetail with name="Title" %}to get the page title, or use{% pageDetail with name="Description" %}to get the page summary.

For the main content of a single page, which is the rich text you fill in the background "Single Page Content" editor, you can use{% pageDetail pageContent with name="Content" %}{{pageContent|safe}}to retrieve and display. Here is the|safeIt is a very critical filter that tells the template engine that this content is safe HTML, which does not need to be escaped, thus ensuring that the HTML format and style of the input from the background can be correctly parsed and rendered by the browser. If your single-page content is written using a Markdown editor and you want it to be rendered as HTML on the front end, you canContentthe tag withrender=trueparameters, for example{% pageDetail pageContent with name="Content" render=true %}{{pageContent|safe}}.

Display related images

Images are an important component of the single-page visual presentation, and Anqi CMS also provides a clear calling method.

If you uploaded a single-page "thumbnail", you can{% pageDetail with name="Logo" %}get the address of the large thumbnail, or through{% pageDetail with name="Thumb" %}get the address of the small thumbnail. Then embed them into<img>label'ssrcAs for the attribute:<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />

For the "Banner image" (i.e., multiple related images) uploaded on the backend, Anqi CMS will provide them as an image array. You need to usepageDetailLabel combinationforLoop to traverse and display these images. Usually, we would do it like this:

{% pageDetail pageImages with name="Images" %}
<ul>
    {% for item in pageImages %}
        <li>
            <img src="{{ item }}" alt="{% pageDetail with name='Title' %}" />
        </li>
    {% endfor %}
</ul>

This code will get all related Banner image addresses and generate one for each image.<li>Label, embedded<img>Label, implement a simple image list display.

Specify the single page to display.

In most cases, when a user visits a single page, the template automatically identifies the content of the current page and displays it. But if you need to call a specific function on other pages or in certain scenarios,Not currentContent of a single page,pageDetailTags also provide flexibility. You can useidortokenparameters to specify the single page you want to retrieve:

• Specify through ID: {% pageDetail aboutUsTitle with name="Title" id="10" %}Hereid="10"It will retrieve the title of the single page with ID 10.
• Specify through URL alias (token): {% pageDetail contactUsContent with name="Content" token="contact-us" %}Heretoken="contact-us"Will fetch the single page content with the URL alias "contact-us".

This allows you to precisely control which single page content is displayed on the page.

Complete example: a display of the 'About Us' page.

Assuming we have a single-page "About Us", with ID 5 and a custom URL alias ofabout-usThe backend has set the title, introduction, detailed content, a main Logo image, and multiple Banner images. Here is a simplified code example of how to fully display these contents in a template.

{# 页面头部引入公共模板，通常包含TDK、CSS等 #}
{% include "partial/header.html" %}

<main class="page-container">
    <article class="page-content-wrapper">
        <h1 class="page-title">{% pageDetail with name="Title" %}</h1>
        <p class="page-description">{% pageDetail with name="Description" %}</p>

        {# 展示主要内容，注意使用 |safe 过滤器 #}
        <section class="main-content">
            {% pageDetail pageMainContent with name="Content" %}
            {{ pageMainContent|safe }}
        </section>

        {# 如果有主Logo图片，可以这样展示 #}
        {% pageDetail pageLogo with name="Logo" %}
        {% if pageLogo %}
            <div class="page-logo">
                <img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %}" />
            </div>
        {% endif %}

        {# 展示多张Banner图，使用循环遍历 #}
        {% pageDetail pageImages with name="Images" %}
        {% if pageImages %}
            <div class="page-gallery">
                <h3>页面图集</h3>
                <div class="image-carousel">
                    {% for image_url in pageImages %}
                        <img src="{{ image_url }}" alt="{% pageDetail with name='Title' %}-图{{ forloop.Counter }}" />
                    {% endfor %}
                </div>
            </div>
        {% endif %}

    </article>
</main>

{# 页面底部引入公共模板，通常包含JS、页脚信息等 #}
{% include "partial/footer.html" %}

Some practical tips

• Custom single page template:The AnQi CMS supports specifying independent template files for individual pages. You can fill in the "Single Page Template" field when editing a single page in the background.page/about_us.htmlThen create the corresponding template file, so that this page will use this exclusive template.
• Image optimization:In the "Content Settings" in the background, you can enable features such as automatic image compression and conversion to WebP format, which helps to improve page loading speed and user experience.
• SEO friendly:The single-page also supports setting independent SEO titles, keywords, and descriptions. Proper use of these fields can help your single-page achieve better rankings in search engines.

By using the above method, you can easily manage and display all content and associated images on a single page in Anqi CMS, creating a rich and beautiful website.

Frequently Asked Questions (FAQ)

How can I