How to get the detailed content and images of a single page (such as "About Us")?

In AnQi CMS, managing and displaying a single page like "About Us" along with its content and images is an efficient and flexible process.As an experienced website operator, I will explain in detail how to create from the backend to the frontend display, and fully master this feature.

In Anqi CMS, retrieve the detailed content and images of a single page (such as "About Us")

AnQiCMS (AnQiCMS) provides a dedicated management module called the "single page" function for independent pages such as "About Us" and "Contact Us."}This design aims to allow you to conveniently create, edit, and publish static content that does not belong to the conventional article or product categories, while maintaining a high degree of unity between the content and the visual elements.Understanding how to effectively use 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 input and management of the content and images of single pages are carried out on the Anqi CMS backend.

Access the page management interface

After logging in to the AnQi CMS backend, you need to go to the "Page Resources" section of the left navigation menu and then click "Page Management."}Here will be listed all the single pages on your website, you can choose to edit existing pages, or click 'Add Single Page' to create a new page.

Input of core information for single pages

On the single-page editing or creation interface, you will see a series of fields that collectively constitute the complete information of the page:

• Page name:This is the title displayed on the single page on the front end, for example, "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).The SEO title is displayed in the browser tab and search engine results, while keywords and summaries help search engines better understand the page content and index it.Please fill out these details meticulously for each single page to enhance its visibility in search results.If you do not fill in the single-page introduction, the system will usually automatically extract part of the page content as the default introduction.

• Custom URL:This is the personalized URL path of the page. By default, AnQi CMS will automatically generate a friendly pinyin URL based on the page name you enter.However, you can manually modify it as needed, ensuring it is concise, memorable, and relevant to the page content.Please note that the custom URL must be unique across the entire site.

• Single page content:This is the main text area of a single page, supporting rich text editor, where you can edit text as you would in Word, including font formatting, paragraph layout, lists, links, and more.It should be mentioned especially that you can insert images, videos, and other multimedia content here.The image inserted in the editor will be automatically uploaded to the background "Image Resource Management" for unified management.

Image resources and template application

• Banner image and thumbnail:Anqi CMS allows you to upload specific visual elements to a single page.

  • Banner image:Commonly used at the top of the page, as an eye-catching visual focus. You can upload multiple images to create a slideshow effect, and it is recommended to upload images of the same 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: AnQi CMS provides high-level template customization capabilities. By default, the single page will usepage/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 dedicated template for the “About Us” pagepage/aboutus.htmland select it in the background.

Second, front-end display: Retrieve 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 adopted Django template engine syntax, retrieving data through specific template tags.

Calling single-page content

To retrieve detailed content of a single page, you can usepageDetailLabel. This label can be retrieved based on 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 the page with a specified ID, you can addidfor example:{% pageDetail with name="Title" id="10" %}.

• Page Description:

  <p>{% pageDetail with name="Description" %}</p>
  

  This will output a brief description of the page, usually used for meta descriptions or introductory text at the beginning of the page.

• Content of the page:

  <div>{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}</div>
  

  When getting the main content of a single page, I suggest you usepageContentSuch a variable name to receive data and always cooperate|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 background editor. If your content is in Markdown format and the Markdown editor is enabled,pageDetailTags also supportrender=trueThe parameter automatically converts Markdown to HTML.

The call of the single-page image

The single-page image, including thumbnails and Banner images, can also be accessed throughpageDetailLabel 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 you upload for a single page.altThe settings of properties are very important for SEO and accessibility.

• Single page thumbnail (small image):

  <img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
  

  ThumbUsually a smaller thumbnail size processed by the system.

• Single page Banner image (group image):Banner images are usually composed of multiple images and need to be displayed through a loop.

  {% 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 a 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 %}
  

By following these steps and using tags, you can fully control the content entry and frontend display of individual pages in Anqi CMS, ensuring that key pages like "About Us" are presented to visitors in **status.

Frequently Asked Questions (FAQ)

Q1: I uploaded an image for the "About Us" page, but it does not display on the front end, or the image is very large and loads slowly, what is the matter?A1: If the image does not display, please check several aspects: First, confirm that the image URL you have inserted in the "Single Page Content" editor in the background is correct, or whether the Banner image/thumbnail has been successfully uploaded.Next, check if there are any error messages in the browser console, 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" -> "Content Settings" page and check if the optimization features such as 'Auto-compress large images' and 'Enable Webp image format' are enabled.These settings can help the system automatically process images, reduce file size, and improve page loading speed.If there are still issues, it is recommended to check the "Image Resource Management" to ensure that the image file itself is not damaged and to clear the system cache.

Q2: How to set a unique template for my "About Us" page instead of using the default single page template?A2: The AnQi CMS supports specifying a custom template for a specific single page. You first need to create a new template file in your template directory, such astemplate/default/page/about_us.html(Assuming your template package name is)default). Then, while editing the "About Us" single page in the background, find the "Single Page Template" field, and enter the name of the new template file you created, for example,about_us.html. After saving, the single page will use the one you specifiedabout_us.htmlto render the file, achieving personalized display.

Q3: How should the "About Us" page be handled on my website to support multiple languages?A3: SecureCMS 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, which mainly affects the system's built-in prompts.To implement the switch of different language content, you need to use it in the templatelanguagesLabel, providing users with language switching options and setting up corresponding links for each language page in the backgroundhreflangProperty, indicating the existence of different language versions of search engines.