In Anqi CMS, a single page is an important part of the website's content structure, such as "About UsEffectively obtain and display the full content of these single pages and associated images, which is crucial for the communication of website information and visual expression.The AnQi CMS provides an intuitive backend management and flexible template tags, making this process very convenient.
Set single page content and images easily in the background
Firstly, we need to create and edit single page content in the Anqi CMS backend management system.This is usually done under the 'Page Resources' section in the 'Page Management' module.
You can enter the "Page Name", which will be the title of the page.Next, "Single Page Overview" can be used to provide a brief overview of the page.The most important content is reflected in the 'Single Page Content' area, which supports rich text editor, allowing the insertion of text, links, tables, etc., and can also directly embed images.
For associated images, the AnQi CMS provides several ways to manage: Firstly, there is '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.Additionally, there is a very practical 'Banner Image' option, which allows you to upload multiple images, usually used for the top carousel on the page or as a gallery display of the page images.Through these settings, you can conveniently organize the text and image content of a single page in the background.
Retrieve and display single page information in the front-end template
After completing the backend content setup, the next step is how to display these contents on the website's frontend template.The Anqi CMS adopts a simple template tag system, making content calls very intuitive.
Core text content calling
To obtain the detailed content of a single page, we mainly usepageDetailTemplate tags. This tag helps us retrieve various information from a specific single page.
Suppose you are editing a file 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 access the page title through{% pageDetail with name="Title" %}and get the page introduction through{% pageDetail with name="Description" %}.
For the main content of a single page, which is the rich text you fill in the "Single Page Content" editor on the backend, you can use{% pageDetail pageContent with name="Content" %}{{pageContent|safe}}to retrieve and display. Here,|safeIt is a very critical filter that informs the template engine that this content is safe HTML and does not require escaping, thereby ensuring that the HTML format and style you input on the backend are 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 frontend, you canContenttag.render=trueparameters, such as{% pageDetail pageContent with name="Content" render=true %}{{pageContent|safe}}.
Display related images
As an important component of single-page visual presentation, the 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 size, or through{% pageDetail with name="Thumb" %}get the address of the small thumbnail size. Then embed them into<img>Tagssrc[en]The attribute can be found here:<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
For the "Banner image" (i.e., multiple associated images) uploaded to the backend, Anqi CMS will provide them as an image array. You need to usepageDetailTag combinationforLoop to iterate 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 retrieve all associated Banner image addresses and generate one for each image.<li>tag, embedded.<img>tag, and implement a simple image list display.
Specify the single page to be displayed
Most of the time, when a user accesses a single page, the template automatically identifies the content of the current page and displays it. However, if you need to actively call a certain page or a specific scenario,Not the currentContent on a single page,pageDetailTags also provide flexibility. You can useidortokenparameters to specify the single page you want to retrieve:
- Specify by ID:
{% pageDetail aboutUsTitle with name="Title" id="10" %}Hereid="10"Will get the title of the single page with ID 10. - Specified by URL alias (token):
{% pageDetail contactUsContent with name="Content" token="contact-us" %}Heretoken="contact-us"It will fetch the single page content with the URL alias “contact-us”.
This way, you can precisely control which single page content is displayed on the page.
Complete Example: A display of a 'About Us' page
Suppose we have a single-page 'About Us' with ID 5 and a custom URL aliasabout-usThe background has set the title, introduction, detailed content, a main logo image, and multiple banner images. The following 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" on the backend, 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: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.
You can easily manage and display all the content and associated images on a single page in Anqi CMS with the above method, creating a functional and beautiful website.
Common Questions (FAQ)
How can I