How to display the unique content and images of a custom page (single page)?
In website operation, we often need to create some unique content and personalized page layouts, such as "About Us", "Contact Information", or a specific event detail page.AnQiCMS (AnQiCMS) provides us with powerful custom page (single page) functionality, which not only allows us to easily manage the text content of these pages, but also flexibly display their exclusive images and customized layouts.
How specifically can one operate to allow a custom page to have its own unique content and image display method?This mainly consists of 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 apply the template to the corresponding single page.
1. Create and manage custom pages (single pages) in the background
Everything starts with content. In the Anqi CMS backend, you can find the 'Page Management' feature under 'Page Resources'.Here, you can easily create a new page or edit an existing one.
When you add or edit a single page, you will see a series of fields that can be filled in:
- Page Name: This is the title of your single page, which is usually displayed on the website front page.
- SEO title, keywords, single page summaryThese are for search engine optimization, which can help your page get better rankings.
- Single page contentThis is the core text content of the page, Anqin CMS provides a rich-featured editor, where you can format text and insert images just like writing an article.
- Banner imageThis is a very practical feature, specially designed for uploading multiple images as banners or sliders on the page.When your "About Us" page needs a beautiful top image, or when the event page needs multiple promotional images, you can upload them here.
- Thumbnail: If you need to display a representative image in some lists (such as page navigation or related recommendations) on your single page, you can upload it here.
After uploading the images 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 choose a dedicated page template.
By default, the custom page of Anqi CMS will use a name calledpage/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/您的模板目录/below. For custom pages, you canpage/Create a dedicated template within the folder. There are several flexible naming methods:
- Universal single-page template:
page/detail.htmlThis is the default template called for all single pages. - Specify template by ID:
page/detail-{单页ID}.htmlIf you want to create a template for a specific page with ID, for example, a single page with ID 10, you can name itpage/detail-10.html. - Custom name templateThis is the most commonly used method, you can give the template a meaningful name, such as
page/about.htmlorpage/contact.html.
No matter which naming method is used, the template internally will use the Django-style template tags provided by AnQiCMS to call back-end data. Static resources such as CSS, JavaScript, and images are usually stored in/public/static/In the catalog and referenced in the template.
Chapter 3: Call the page-specific content and images in the template.
With a dedicated template file, the next step is to display the content edited on the back end and the uploaded images. Anqi CMS providespageDetailTags, it can be very convenient to get all the data on a single page.
In your custom page template (for example)page/about.html), you can call the title, content, and images 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 code above,{% 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 back-end editor, and|safeThe filter ensures that 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 image list you uploaded in the background "Banner Image". Since there may be multiple images, it is necessary to use{% for img in pageImages %}Loop to display them one by one.{% pageDetail pageLogo with name="Logo" %}Then you can get the single image you uploaded in the background 'thumbnail'.
Through these tags, you can fully control the layout and display of page content.
IV. Apply the custom template to a single page.
The template file creation is complete, the final step is to associate this template with your single page.
Return to the 'Page Management' section of the AnQi CMS backend, 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.htmlIt is done. After saving the settings, visit this single page, and you will see that it has been completely renewed, using your exclusive layout, content, and image display style.
By following these steps, you can make each custom page of Anqi CMS unique in charm, whether it is content or visual presentation, it can perfectly meet your operational needs.
Frequently Asked Questions (FAQ)
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 examplepage/about-us.html/page/contact-us.html. Then edit the corresponding single page in the background and enter the corresponding template file name (such aspage/about-us.html)。This way, each page can have its own unique display style.
2. Why is my custom page content or image not displaying correctly on the frontend?There are some common reasons:
- Template path is incorrect: Please check the path you filled in the "Single Page Template" field in the background to ensure it matches the actual template file path (for example, make sure that the path ends with the template file name)
page/about.htmlReally exists/template/您的模板目录/page/Below). |safeFilter missing: If your single page content contains HTML code (such as bold, links, images, etc.), it must be called in the template{{ pageContent }}must be added when|safeFilter, that is{{ pageContent|safe }}Otherwise, the system will default to escaping HTML codes, causing them to be displayed as text and not rendered normally.- Image path issueMake sure the image you uploaded is displayed 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 the URL is accessible.
- Cache issueSometimes 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 to view it again.
3. In addition to content and images, what information can be set on a custom page to benefit SEO?When creating or editing a custom page, you can fill in the fields 'SEO title', 'keywords', and 'single-page introduction' in the background. This information will be directly mapped to the page's HTML<title>Tag