Managing and displaying single pages like "About Us" and their content and images in AnQi CMS is an efficient and flexible process.As an experienced website operations personnel, I will give you a detailed explanation of how to create from the backend to the frontend display, fully mastering this feature.
Get detailed content and images of a single page (such as “About Us”) in the Anqi CMS
The "About Us" and "Contact Us" pages provide a dedicated management module called "Single Page" function in AnQiCMS (AnQiCMS).This design is intended to allow you to easily create, edit, and publish static content that does not belong to conventional article or product categories, while maintaining a high degree of consistency between content and visual elements.Understanding how to effectively utilize this module is the key to ensuring that the website content is presented professionally and attractively.
1. Backend Management: Create and edit a single page
Firstly, all the content and image input and management of single-page are carried out on the Anqi CMS backend.
Access the page management interface
Login to the Auto CMS backend, you need to go to the "Page ResourcesHere you will find all the single pages on your website, you can choose to edit existing pages, or click 'Add Single Page' to create a new one.
Single-page core information input
In the single-page editing or creation interface, you will see a series of fields that collectively make up the complete information of the page:
Page Name:This is the title displayed on the front end of the single page, such as 'About Us' or 'Terms of Service'. A clear and accurate page name helps users quickly understand the theme of the page.
SEO title, keywords, single page introduction:These fields are designed for search engine optimization (SEO).SEO titles are displayed in the browser tab and search engine results, while keywords and summaries help search engines better understand the content of the page and index it.Suggest that you fill in these details meticulously for each single page to enhance its visibility in search results.If you have not filled in the single-page introduction, the system will usually automatically extract a part from the page content as the default introduction.
Customize URL:This is the personalized URL path of the page.By default, the Aanqi CMS will automatically generate a friendly pinyin URL based on the page name you enter.However, you can manually modify it as needed to ensure it is concise, memorable, and relevant to the page content.Please note that the custom URL must be unique throughout the entire site.
Single page content:This is the main text area of the single page, which supports rich text editor. You can edit text as you would in Word, including font formatting, paragraph formatting, lists, links, and more.It is particularly important to mention that you can insert images, videos, and other multimedia content here.The image inserted within the editor will be automatically uploaded to the "Image Resource Management" on the backend, for easy unified management.
Image resources and template application
Banner image and thumbnail:The Anqi CMS allows you to upload specific visual elements to a single page.
- Banner image:Generally used at the top of the page, as an eye-catching visual focus. You can upload multiple images to create a carousel effect. It is recommended to upload images of consistent size to maintain the beauty of the page layout.
- Thumbnail:This is an optional field, which can be displayed as a thumbnail when you need to call this single page in other places on the website (such as sidebar recommendations, home navigation, etc.).
Single Page Template:The Anqi CMS provides high-level template customization capabilities. By default, a single page will use
page/detail.htmlorpage.htmlAs its display template. But if you want a specific single page to have a completely independent layout or design, you can specify a custom template file here, for exampleabout_us.html。The system will first look forpage/{单页面id}.htmlorpage/{自定义URL}.html，if it does not exist, it will usepage/detail.htmlorpage.html。This means you can design a dedicatedpage/aboutus.htmltemplate for the “About Us” page and select it in the background.
English, Front-end Display: Obtain content and images through template tags
After completing the content and image settings in the background, the next step is to call and display this information in the front-end template.The AnQi CMS adopts Django template engine syntax, using specific template tags to retrieve data.
Calling single-page content
To obtain detailed content of a single page, you can usepageDetailLabel. This label can be obtained according to the page ID or a custom URL alias.
Page Title:
<h1>{% pageDetail with name="Title" %}</h1>This will directly output the title of the current page. If you want to get the title of a page with a specific ID, you can add
idParameter, for example:{% pageDetail with name="Title" id="10" %}.Page description:
<p>{% pageDetail with name="Description" %}</p>Here is a brief description of the page, usually used for meta descriptions or introductory text at the beginning of the page.
Page main content:
<div>{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}</div>When obtaining the main content of a single page, I recommend that you use
pageContentThis variable name is used to receive data and always be accompanied by|safeFilter.|safeThe filter is crucial because it tells the template engine to treat the content as unescaped HTML, thereby correctly displaying the images, links, formats, and other settings you have made in the backend editor. If your content is in Markdown format and the Markdown editor is enabled,pageDetailTags also supportrender=trueParameters are automatically converted from Markdown to HTML.
Call to a single-page image
The image on a single page, including thumbnails and Banner images, can also be accessed throughpageDetailTag retrieval.
Single page thumbnail (large image):
<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />LogoIt usually refers to the main visual image or a larger thumbnail that you upload for a single page.altThe setting of properties is very important for SEO and accessibility.Single-page thumbnail (small image):
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />ThumbIt is usually a smaller thumbnail image processed by the system.Single-page Banner image (group image):Banner images are usually composed of multiple images and need to be displayed through looping.
{% pageDetail pageImages with name="Images" %} <div class="banner-slider"> {% for item in pageImages %} <img src="{{ item }}" alt="{% pageDetail with name="Title" %}" /> {% endfor %} </div>pageImagesIt will return an array of image URLs that you can useforLoop through and display all images. If you only want the first image as the background, you can handle it flexibly:{% pageDetail pageBannerImages with name="Images" %} {% if pageBannerImages %} {% set firstBanner = pageBannerImages[0] %} <div class="hero-section" style="background-image: url('{{ firstBanner }}');"> <!-- 其他内容 --> </div> {% endif %}
Through the use of these steps and tags, you can fully control the content entry and frontend display of individual pages in the Anqi CMS, ensuring that key pages such as 'About Us' are presented to visitors in a**state.
Frequently Asked Questions (FAQ)
Q1: I uploaded an image to the "About Us" page, but it doesn't display on the front end, or the image is very large and loads slowly. What's going on?A1: If the image does not display, please check several aspects: first, confirm that the image URL you inserted in the "Single Page Content" editor in the background is correct, or whether the Banner image/thumbnail has been successfully uploaded.其次，check the browser console for any error messages, which may be due to incorrect image paths or CSS/JS blocking the display.About the issue of slow loading due to large images, you can go to the "Background Settings" -u003e "Content SettingsThese settings help the system automatically process images, reduce file size, and improve page loading speed.If there are still problems, it is recommended to check 'Image Resource Management' to ensure that the image file itself is not corrupted, and to clear the system cache.
Q2: How to set up a unique template for my 'About Us' page instead of using the default single-page template?A2: English CMS supports specifying a custom template for a specific single page. You first need to create a new template file in your template directory, for example,template/default/page/about_us.html(Assuming your template package name is)default)。Then, while editing the "About Usabout_us.html。Save it, and the single page will use the one you specifiedabout_us.htmlto render the file and achieve a personalized display.
Q3: How should the "About Us" page be handled to have different language versions if my website needs to support multiple languages?A3: Secure CMS supports the construction of multilingual websites.For a single page like "About Us", you usually need to create a separate page for each language.For example, you can create a "About Us (Chinese)" page and an "About Us (English)" page.In the background “Background Settings” -> “Global Settings”, you can configure the default language package, but this mainly affects the built-in prompts of the system.languagesLabel, provides language switching options for users, and sets up corresponding links for each language version in the background,hreflangAttributes, indicating the existence of different language versions of search engines.