How to display the content, title, and image of a single page in a custom page?

In website operation, we often need to create unique display methods for specific content, such as designing a unique landing page for product features, service introductions, or company profiles.AnQiCMS (AnQiCMS) with its flexible content model and highly customizable features makes everything very simple.Today, let's talk about how to easily display the content, title, and images of a custom page, making your website content more personalized.

Understanding Anqi CMS' 'Single Page'

First, we need to clarify what a 'single page' is in the Anqi CMS.In Anqi CMS, a single page refers to those pages that exist independently and do not belong to any category (such as article or product categories).They are usually used to display "About UsYou can create and edit these single pages under the 'Page Resources' and 'Page Management' in the background.Each single page has its own title, content, images, and even custom URLs and templates.

Create and associate custom templates: let the single page have exclusive display

To display single-page content on a custom page, the first step is to prepare a dedicated template file and associate it with the single-page backend.

1. Prepare the template fileThe template files of AnQi CMS are stored in/templateIn a directory of a theme folder. You can create a new HTML file for your current website theme here, for example, we name itcustom-single-page.html.

2. Linked to a single pageAfter you have created the template file, go to the "Page Resources" -> "Page Management" in the Anqi CMS backend to edit or create a new single page.On the single-page editing interface, you will see an option for a 'single-page template'.custom-single-page.htmlOnce saved, this single page will be rendered using the template you specified.

   Moreover, AnQi CMS also provides some default template naming conventions. For example, if you want a single page (assuming its ID is 10) to have its own template, you can directly create one namedpage/detail-10.htmlThe file, the system will automatically recognize and apply. Or if you have set a custom URL alias for the "About Us" single pageaboutyou can create onepage/about.htmlTemplate file, it can also be applied by selecting it on the backend.

Core:pageDetailThe use of tags

In your custom template file (for examplecustom-single-page.htmlIn it, we need to use the powerful template tags of Anqi CMS to obtain and display the various information of a single page. Among them,pageDetailtags are the tools to obtain the content of a single page.

pageDetailThe tag can retrieve detailed data for a single page, including title, content, description, link, and various images.

Basic usage:

You can use two main methods to do so.pageDetailUse the tag to retrieve data for a single page:

1. Automatically fetch the current page dataIf your custom template is the same as the template associated with a single page, thenpageDetailThe label does not require additional parameters, it will automatically retrieve all information from the current page. For example:{{ page.Title }}(If the page object has been preloaded)

2. Retrieve specific page data by specifying an ID or URL aliasIf you want to call a specific single-page content in a non-single-page template (such as the homepage or article detail page), you need to specify it by its ID or URL alias.

   • Get by ID:{% pageDetail myPage with id="123" %}(where 123 is the actual ID of the single page)
   • Get by URL alias:{% pageDetail myPage with token="about-us" %}(where "about-us" is the custom URL alias of the single page)

Once you use{% pageDetail myPage ... %}Assign single-page data to a variable (for examplemyPage), you can access its various properties through dot notation.

Get the title, content, and images:

• Title:{{ myPage.Title }}
• Description:{{ myPage.Description }}
• Content:{{ myPage.Content }}
• Logo:{{ myPage.Logo }}
• Thumbnail (Thumb):{{ myPage.Thumb }}
• Image Gallery (Images):{{ myPage.Images }}(This is an array, need to iterate through)

Special reminder:On the single page displayContentWhen the content contains HTML tags (such as styles generated by a rich text editor), you must use|safeFilter. This is because the Anqi CMS template engine, for security reasons, defaults to escaping all output as HTML entities to prevent XSS attacks. Add|safeThe system will inform you that this content is safe and can be rendered directly as HTML. If your content is in Markdown format and the background Markdown editor is enabled, the template will try to automatically convert it, but to ensure compatibility, it can be explicitly added|render|safefilter.

Actual Operation: Code Example and Explanation

Suppose we created acustom-single-page.htmlTemplate, and associate it with the single page with backend ID 123. Here is an example code of how to display the content of the single page in the template:

"`twig {# Assume you have a base template, such as one that includes the header, footer, and other common parts #} {% extends 'base.html' %}

{% block title %}

{# 自动获取当前页面的SEO标题，如果未设置则 fallback 到单页面标题 #}
<title>{% tdk with name="Title" siteName=true %}</title>

{% endblock %}

{% block content %}

{# 使用pageDetail标签获取ID为123的单页面所有数据，并赋值给currentPage变量 #}
{% pageDetail currentPage with id="123" %}

{% if currentPage %}
    <article class="single-page-custom-layout">
        {# 显示单页面标题 #}
        <h1>{{ currentPage.Title }}</h1>

        {# 显示单页面描述（如果存在）#}
        {% if currentPage.Description %}
            <p class="description">{{ currentPage.Description }}</p>
        {% endif %}

        {# 显示单页面主图片/Logo #}
        {% if currentPage.Logo %}
            <div class="main-image">