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

Use AnQiCMS to manage and display website content, especially when dealing with independent and richly contented single pages like "About Us" and "Contact Information", its flexibility and powerful features are particularly prominent.We often need to present the text, images, and even image galleries of these pages in their entirety on the website, and AnQiCMS provides a very intuitive way to achieve this.

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

Content creation: In the AnQiCMS backend single page management

Firstly, of course, we need to create and fill it in the background to display the content of a single page.In the AnQiCMS management interface, you will find the "Page Resources" under the "Page Management" feature.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 to fill in:

1. Page NameThis is the page title, as well as the main name that users see on the front end.
2. SEO title, keywords, single page summaryThese are optimized for search engines, which help your single-page website to get better display in search results.
3. Custom URLIf you want this single page to have a more descriptive or shorter link address, you can set it here.AnQiCMS will automatically generate the pinyin of the page name as the default URL, but you can also manually adjust it 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. ThumbnailSet a thumbnail for a page, which is usually used to display as a representative image of the page in lists or navigation.
6. Banner imageThis feature is very useful, you can upload a set of Banner images for a single page to display as a carousel at the top of the page, making the page more visually striking.

After filling out 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 be using the tags provided by AnQiCMS in the front-end template files of the website to retrieve and display the content and images of these single pages.AnQiCMS's template system is very powerful, using syntax similar to the Django template engine, even beginners can quickly get the hang of it.

We mainly use it to get the detailed information of a specific single pagepageDetailthis tag.

Get basic information of a single page

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

If you are currently browsing this single-page, then you can use it withoutidortokenThe parameter'spageDetailto automatically retrieve the information of the current page.

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

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

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

Display single page content

The core of a single page is naturally 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>

Pay special attention here|safeThis filter. AnQiCMS, for security reasons, defaults to HTML escaping all output content to prevent XSS attacks.However, the content of a single page often includes HTML tags (such as images, paragraph formatting, etc.) that we add during editing, if not|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=trueParameter, let AnQiCMS convert Markdown syntax to HTML during frontend rendering:

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

Display a single-page image

Images in a single page are important elements to enhance user experience.pageDetailTags provide multiple ways to retrieve images:

1. Main image/thumbnail: It is usually used as a representative image at the top of the page or at other places.

   • Logo: It is usually the original large image or an image of larger size that is set.
   • Thumb: It is usually processed by AnQiCMS automatically to create a thumbnail, smaller in 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. Slideshow 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 %}
   

Integrating: An example of a single-page template snippet display

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

”`twig {# page/detail.html or page/{custom alias}.html #} <!DOCTYPE html>

<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" %}