In the operation of AnQiCMS website, the Single Page (Page) feature is a very practical module that allows us to create and manage static pages independent of dynamic content such as articles or products, such as "About UsThese pages usually contain relatively fixed and important information, which needs to be presented to visitors in a clear and direct manner.As an experienced operation manager of AnQiCMS, I am well aware of how to effectively utilize the template mechanism to accurately control the display of these single pages to meet diverse design and content requirements.

Core Concepts:pageDetailtags

AnQiCMS provides a dedicated template tagpageDetailused to obtain and display detailed information of a single page in the template. This tag is the core of controlling the output of single-page content.pageDetailTags, we can use the unique identifier (ID) of the page or a custom URL alias (tokenTo precisely specify the single page to display, and extract the various fields we need, such as title, content, link, image, etc.

Display the specified single page content in the template

To display specific single-page content in an AnQiCMS template, the most common method is to usepageDetailTagsidortokenParameter.

For example, if you want to display the content with ID1The "About Us" page, you can use the following syntax in your template file to get its title and content:

{% pageDetail aboutPage with id="1" %}
    <h1 class="page-title">{{ aboutPage.Title }}</h1>
    <div class="page-content">
        {{ aboutPage.Content|safe }}
    </div>
    <a href="{{ aboutPage.Link }}" class="page-link">了解更多</a>
{% endpageDetail %}

In this code block:

  • pageDetail aboutPage with id="1"to indicate the system to retrieve the ID of1single page data, and assign it to a variable namedaboutPage.
  • {{ aboutPage.Title }}used to display the title of the single page.
  • {{ aboutPage.Content|safe }}used to display the main content of the single page. It should be noted that,|safeThe filter is crucial here, it tells the template engine to output the content as safe HTML rather than escaping it, which is necessary for content containing rich text editors.
  • {{ aboutPage.Link }}Then the link to this single page will be output.

In addition to ID, you can also use the custom URL alias of the page (tokenSpecify a single page by 【en】）。For example, if the alias of your "Contact Us" page is set tocontact-us，you can call it like this:

{% pageDetail contactPage with token="contact-us" %}
    <h2 class="section-title">{{ contactPage.Title }}</h2>
    <p>{{ contactPage.Description }}</p>
    <div>
        {{ contactPage.Content|safe }}
    </div>
{% endpageDetail %}

If you do not specify theidortokenparameter,pageDetailTags will attempt to fetch the single-page data corresponding to the current URL by default. This is in the detail template of the single-page itself (such aspage/detail.htmlIt is very convenient to use in 【en】 without any additional parameters, it can directly display the information of the current page.

Custom single page template

AnQiCMS provides a flexible template customization mechanism, allowing you to have unique designs for different single-page applications.In the "Page Management/template/{你的模板目录}/page/detail.htmlThis file should be present.

However, if you want a specific single page to have a completely different layout or style, you can create a dedicated template file for it. For example, if you have a page with an ID of5The "service process" page, and I hope it uses a template namedservice-flow.htmlYou can follow the following steps:

  1. In the directory where you are currently using the template (for example/template/default/Below, create a template file namedservice-flow.htmlThe file. It can contain completely custom HTML structure and style.
  2. In the AnQiCMS backend, go to 'Page Management', find the page with ID5Edit the "Service Process" page.
  3. Enter in the "Single Page Template" field.service-flow.html.
  4. Save the page.

When the user accesses the "Service Process" page, the system will no longer load the defaultpage/detail.htmlbut will use the one you specifiedservice-flow.htmlRender content. AnQiCMS also supports template naming by ID, such aspage/detail-5.htmlThe system will automatically identify and apply. This method is particularly suitable for situations where unique displays are needed for a few important pages.

Content rendering processing

As mentioned earlier, the content of a single page is usually input through a rich text editor, which may contain HTML tags. To ensure that these contents are rendered correctly on the page,