How to retrieve and display the complete content and images of a specific single page?

Next, we will explore together how to obtain and display the complete content and images of a specific single page in AnQiCMS, making your website content more vivid and diverse.

Content Creation: On the AnQiCMS backend management single page

Firstly, in order to display the content of a single page, we of course need to create and fill it in the background.In AnQiCMS management interface, you will find the 'Page Management' feature under 'Page Resources'.This is where you create and edit all independent pages.

When creating a new single page or editing an existing page, you will see a series of fields available for filling:

1. Page NameThis is the page title, which is also the main name that users see on the front end.
2. SEO title, keywords, single page introductionThese are prepared for search engine optimization, which helps your single-page display better in search results.
3. Custom URLIf you want this single-page application to have a more descriptive or shorter link address, you can set it here.AnQiCMS will automatically generate the pinyin as the default URL based on the page name, but you can completely adjust it manually to ensure that it is unique throughout the site.
4. Single page contentThis is the main part of the page, where you can use AnQiCMS's powerful rich text editor to write text, insert images, videos, and even enable the Markdown editor to write more structured content.
5. ThumbnailAn image is set for a page as a thumbnail, which is usually used to display as a representative image of the page in a list or navigation.
6. Banner imageThis feature is very practical, you can upload a set of Banner images on a single page, used for the carousel display at the top of the page, making the page more visually striking.

Fill in this information, save the page, and your single-page content will be ready.

Front-end display: How to present single-page information using template tags

Next, we will obtain and display the content and images of these single-page in the template file of the website frontend through the tags provided by AnQiCMS.AnQiCMS's template system is very powerful, using syntax similar to Django template engine, even beginners can get started quickly.

To get the detailed information of a specific single page, we mainly usepageDetailthis tag.

To get the basic information of a single page

pageDetailTags can help us get the title, description, and other basic information of the page.

If you are currently browsing this single page, you can use it directly withoutidortokenthe parameter'spageDetailto automatically obtain information about the current page.

{# 获取当前页面的标题 #}
<title>{% pageDetail with name="Title" %}</title>
{# 获取当前页面的描述 #}
<meta name="description" content="{% pageDetail with name="Description" %}">

If you need to retrieve the single-page information for a specified ID or URL alias, for example, your 'About Us' page ID is 10, or its custom URL alias isabout-usyou can get it like this:

{# 通过ID获取页面标题 #}
<h1>{% pageDetail with name="Title" id="10" %}</h1>
{# 通过URL别名获取页面描述 #}
<p>{% pageDetail with name="Description" token="about-us" %}</p>

Show single page content

The core of a single page is its rich content.pageDetailTags can also help us display the "single page content" field.

{# 展示当前页面的内容 #}
<div class="page-content">
    {% pageDetail pageContent with name="Content" %}
    {{ pageContent|safe }}
</div>

Here, special attention is needed.|safeThis filter.AnQiCMS for security considerations, it defaults to escaping all output content to HTML, preventing XSS attacks.|safeProcess, these HTML codes will be displayed as is, rather than being parsed by the browser.

If your single-page content has enabled the Markdown editor, then you also need to addrender=true参数，让AnQiCMS在前端渲染时将Markdown语法转换为HTML：

{# 展示并渲染Markdown格式的单页面内容 #}
<div class="page-content">
    {% pageDetail pageContent with name="Content" render=true %}
    {{ pageContent|safe }}
</div>

呈现单页面图片

The image in the single page is an important element to enhance user experience.pageDetailTags provide various ways to obtain images:

1. Main image/thumbnail：通常用于页面头部或在其他地方引用时的代表图。

   • Logo：通常是设置的原始大图或尺寸较大的图。
   • Thumb：It is usually a thumbnail processed automatically by AnQiCMS, with a smaller size.

   {# 获取单页面的主图 #}
   {% pageDetail pageLogo with name="Logo" %}
   <img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}" class="page-main-image">
   
   
   {# 获取单页面的缩略图 #}
   {% pageDetail pageThumb with name="Thumb" %}
   <img src="{{ pageThumb }}" alt="{% pageDetail with name="Title" %}" class="page-thumbnail">
   

2. Slide group image (Banner image)If you upload multiple Banner images on the backend, you can useImagesto get an array of image URLs, and then display them through a loop.

   {# 获取单页面的幻灯片组图，并循环展示 #}
   {% pageDetail pageBanners with name="Images" %}
   {% if pageBanners %}
   <div class="page-banner-slider">
       {% for imgUrl in pageBanners %}
       <img src="{{ imgUrl }}" alt="{% pageDetail with name="Title" %}-banner" class="banner-item">
       {% endfor %}
   </div>
   {% endif %}
   

An example of a template fragment for displaying a single page

Now, let's combine these elements to see a complete single-page display template fragment:

English

<meta charset="UTF-8">
{# 获取并设置页面标题，并附加网站名称后缀 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取并设置页面关键词 #}
<meta name="keywords" content="{% tdk with name="Keywords" %}">
{# 获取并设置页面描述 #}
<meta name="description" content="{% tdk with name="Description" %}">
{# 如果页面有规范链接，则添加 #}
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">

{# 导航栏通常会使用 navList 标签引入 #}
{% include "partial/header.html" %}