How to display AnQiCMS single-page content and related images?

In website operation, we often need to create some independent pages, such as "About UsThese pages contain relatively fixed content, which does not belong to the conventional article or product list. AnQiCMS (AnQiCMS) categorizes them as "single pages" and provides a very convenient way to manage and display them.Through this system, you can easily publish and update this content, while flexibly controlling their display style and image presentation.

Create and manage your single-page content

First, you need to create and manage these single pages in the Anqi CMS backend. This is very intuitive:

In the left navigation bar of the background management interface, find and click on the 'Page Resources' under the 'Page Management' option.Here, you can browse the existing single-page list, or click the "Add Single Page" button to create a new page.

When adding or editing a single page, the system provides a rich set of fields for you to fill in:

  • Page NameThis is the title displayed on your page in the frontend, which is also the first content users see.
  • SEO title, keywords, single page summaryThese are prepared for search engine optimization (SEO), you can set a unique TDK (Title, Description, Keywords) for each single page to help search engines better understand and index your pages.If the "Single Page Introduction" is left blank, the system will automatically extract some text from the page content to be used as an introduction.
  • Custom URLThis is a very practical feature that allows you to set a concise and meaningful URL address for a single page, for example, setting the URL of the "About Us" page to/about.htmlThis not only improves the user experience, but is also very beneficial for SEO. If left blank, the system will automatically generate a pinyin URL based on the page name.
  • Display order: You can set a number for the single page, the smaller the number, the higher the page is sorted in the list.
  • Single page templateThis is the key to implementing personalized display.You can specify a separate template file for a specific single page instead of using the default general template.contact.htmlTemplate.
  • Banner image and thumbnailThese fields allow you to upload attractive images for a single page. Banner images are usually used for visual display at the top of the page, while thumbnails may appear in the page list.
  • Single page contentThis is the main content of the page, you can use the rich text editor to edit it, which supports rich text formats, image, video insertion, and other functions.The AnQi CMS also supports Markdown editors, allowing you to write content in a more concise way and automatically render it as HTML, even supporting the display of mathematical formulas and flowcharts (extra configuration required).

Display single page content in the website front-end template

After creating a single page, the next step is to present them in your website's front-end template.AnQi CMS adopts syntax similar to Django template engine, making content calls simple.

1. Default and custom template

As a rule, Anqi CMS will automatically match templates for your single-page content. If you have not specified a custom template for a single page, the system will use the default one by default.page/detail.html(or in the case of flat mode'spage.htmlRender.

For example, if you set a "single page template" for a specific single page in the background.page/about.html)，then the system will prioritize the template you specify. In addition, AnQi CMS also supports automatic template recognition based on single page ID or custom URL aliases, for examplepage/{单页面ID}.htmlorpage/{单页面URL别名}.htmlThis means you can customize the layout and style for each special page.

2. UsepageDetailTag call content

In the template file, you will mainly use to display the content of a single page and related imagespageDetailThis tag. This tag can obtain all the details of the current page.

Assuming you are visiting a single page, you do not need to specify an ID,pageDetailthe tag will automatically retrieve the data of the current page. If you need to call another single page with a specified ID, you can do so byid="XXX"ortoken="URL别名"Parameter to obtain.

Here are some common call examples:

  • Display page title: 
    
<h1>{% pageDetail with name="Title" %}</h1>
  • Display page description (summary): 
    
<p>{% pageDetail with name="Description" %}</p>
  • Display page main content: 
    
{% pageDetail pageContent with name="Content" %}
<div class="page-content">
    {{ pageContent|safe }}
</div>
    Important reminderWhen you callContentWhen a field contains HTML code (such as paragraphs, images, links, etc.), in order for the browser to correctly parse and display these HTML structures, you need to add|safeFilter. Otherwise, the page may display the original HTML tags instead of the rendered content.

Handle single-page images flexibly.

The display of images on a single page plays an important role in the visual presentation of a website. Anqi CMS provides three main image fields, allowing you to flexibly display according to your needs:

  • Single page thumbnail full image (Logo): Typically used to highlight the main visual image or important illustration of a single page.
  • Single page thumbnail (Thumb): A thumbnail version processed by the system, suitable for display in small areas such as lists, cards, etc., with faster loading speed.
  • Single-page slide group (Images)If you need to display multiple images as a carousel or image gallery on a single page, this field can come in handy.

It's also very simple to call these image fields:

  • Display the Logo image on a single page: 
    
<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
  • Display the thumbnail on a single page: 
    
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
  • Display the slide set image:due toImagesIt returns an array of image addresses, you need to useforloop to traverse and display them.
    
{% pageDetail pageImages with name="Images" %}
<div class="image-gallery">
    {% for item in pageImages %}
        <img src="{{ item }}" alt="{% pageDetail with name="Title" %}" />
    {% endfor %}
</div>

Image optimization tips: AnQi CMS provides a powerful image optimization feature in the "Content Settings" section of the backend.You can configure whether to automatically download remote images, whether to enable WebP image format (to reduce image size), whether to automatically compress large images and thumbnails, and the processing methods and sizes.Reasonably utilizing these settings can significantly improve the loading speed and user experience of the website.

Enhance the SEO and user experience of a single page

In addition to content and image display, Anqi CMS also includes multiple features to help you optimize the search engine performance and user experience of a single page:

  • Customize the SEO value of the URLAs mentioned earlier, 'Custom URL' not only makes the link look more friendly, but also provides a clear page theme signal for search engines, which helps to improve the keyword ranking of the page.
  • 精细化控制 of TDK tags: Pass{% tdk %}Tags, you can accurately control each single page<title>/<meta name="keywords">and<meta name="description">content. For example, in<title>In the tag, you can choose whether to add the website name to maintain the conciseness or integrity of the title:
    
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
  • The powerful features of the content editor: The rich text editor of AnQi CMS allows you to easily format content and insert multimedia.If you are accustomed to using Markdown, simply enable the Markdown editor in the background "Global Settings" -> "Content Settings", and you can directly use Markdown syntax in the content of a single page, the system will automatically render it as HTML.render=trueManually control whether to render the parameter, for example{{pageContent|render|safe}}.

Through these flexible features, Anqi CMS makes the management and display of single-page content both efficient and full of possibilities. Whether it is a beginner or an experienced operator, everyone can easily create professional and attractive website pages.

Frequently Asked Questions (FAQ)

How to set different display styles for different single pages?You can achieve this in two ways: Firstly, by using the 'Page Management' section in the background, where you can fill in a custom template file path.