In website operation, we often need to display some independent, relatively fixed and unchanged pages, such as "About UsIn the AnQi CMS, these are called 'single-page'.Effectively manage and display these single-page applications can not only make the website structure clearer, but also improve the user experience.

The next, we will discuss how to flexibly display all or part of the single-page list on the website.

1. Understanding the creation and management of single pages (backend operations)

Before starting the front-end display, it is first necessary to ensure that the corresponding single-page content has been created and perfected in the Anqi CMS backend.

  1. Enter Page Management:Log in to the AnQi CMS backend, you can find the 'Page Management' option under 'Page Resources' in the left navigation bar.
  2. Create or edit a single page:Here, you can add a new single page or edit an existing single page. Each single page includes the following core information:
    • Page Name:This is the title of a single page, and it will also be displayed directly on the front end.
    • Customize URL:To ensure SEO-friendliness and aesthetic of the links, it is recommended to set a concise and meaningful custom URL for each single page (for example,about-us/contact）。When your pseudo-static rules include{filename}field, this custom URL will take effect.
    • Single page content:This is the main content of the page, you can use the rich text editor to edit it, supporting mixed text and images.
    • SEO information (title, keywords, description):For each single page, you can set the SEO title, keywords, and description individually to help search engines better understand and index the page content.
    • Display Order:By adjusting the display order number, you can control the default arrangement of a single page in the list. The smaller the number, the closer it is to the front.
    • Single Page Template:This is a very powerful feature. By default, the single page will usepage/detail.htmlThis is a general template. But if you want a single page to have a unique design, you can specify a custom template file in the background (for example, for the "About Us" page specifyabout.htmlEnglish translation: Just as long as the file exists in your templatepageDirectory under).

After completing the creation and content filling of a single page, we can proceed to display them on the website front end.

English, on the website, display all single-page lists

If you wish to display all published single pages in an area (such as footer navigation or sidebar), SafeCMS provides a simple template tagpageListto achieve.

pageListThe label will retrieve all the single-page data you have created. You can use it like this in the template file:

<ul>
{% pageList pages %}
    {% for item in pages %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
{% endpageList %}
</ul>

Code interpretation:

  • {% pageList pages %}This is a core tag, it will retrieve all single page data from the database and assign these data to a variable namedpages.
  • {% for item in pages %}：We use oneforin a loop to iterate overpagesEvery single page in the variable, the data of each single page will be processed in the loop.itemvariable.
  • {{ item.Link }}This will output the access link of the current single page.
  • {{ item.Title }}This will output the title of the current single page.

Through this simple code snippet, your website can dynamically display all single-page lists.

Three, flexible display of part of the single-page list

Sometimes, we may not need to display all single pages or we may want to treat some single pages in a special way. Anqi CMS provides various flexible ways to achieve this purpose.

1. Filter and exclude using template logic

You can inforuse in a loop.ifConditionally filter or exclude specific single pages. For example, if you want to exclude the single page with ID 1:

<ul>
{% pageList pages %}
    {% for item in pages %}
    {% if item.Id != 1 %} {# 假设ID为1的单页面不想展示 #}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

You can also filter by title or other fields:

<ul>
{% pageList pages %}
    {% for item in pages %}
    {# 仅展示标题包含“关于”的单页面 #}
    {% if item.Title|contain:"关于" %} 
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}

Here we usedcontainFilter (referencefilter-contain.md), it can determine if a string contains specific keywords.

2. Display the details of a specific single page

If you want to display the content of a specific single page directly in a certain area of the website instead of a list link, you can usepageDetailThis tag allows you to accurately retrieve detailed information of a single page through ID or custom URL alias.

For example, directly display the introduction of the "About Us" page on the homepage:

<div class="about-us-summary">
    <h2>{% pageDetail with name="Title" token="about-us" %}</h2>
    <p>{% pageDetail with name="Description" token="about-us" %}</p>
    <a href="{% pageDetail with name="Link" token="about-us" %}">了解更多</a>
</div>

Code interpretation:

  • {% pageDetail with name="Title" token="about-us" %}：Through custom URL alias.about-usGet the title of this single page.
  • {% pageDetail with name="Description" token="about-us" %}：Get the description of this single page.
  • {{ item.Content|safe }}：If you need to display the full content (which may contain HTML), please make sure to use|safeFilter to prevent HTML content from being escaped (referencefilter-safe.md).

3. Use the "Single Page Template" feature on the backend to implement a specific design

As mentioned previously, when editing a single page in the background, you can specify an independent template file for it.This means that when the user accesses this single-page application, the system will automatically load the template you specified, thus achieving a fully personalized design.

For example, specify the template file for the 'Contact Us' page with ID 5contact.htmlThen you just need to make sure,template/你的模板目录/page/contact.htmlThe file exists, and in the "Page Managementcontact.html.

IV. Important Tips and **Practice

  • Template file location:The default single page detail template istemplate/你的模板目录/page/detail.html。If you have customized a single-page template (for examplecontact.html)，it should be placedtemplate/你的模板目录/page/the directory.
  • Static rules:Make sure your website's URL rewriting rules include the rules for single pages, usuallypage===/{filename}.htmlor something similar, so that a friendly URL can be generated (refer tohelp-plugin-rewrite.md).
  • [en] SEO Optimization:Fully utilize the SEO title, keywords, and description fields of the single-page backend, and perform independent SEO optimization for each single page.
  • Display Order:In the "Page Management
  • Multi-site support:If you have used the multi-site management feature of Anqi CMS and want to call data from other sites, you canpageListorpageDetailtag.siteIdspecify the parameter (for example,{% pageList pages with siteId="2" %}).

You can flexibly display all or a specific part of the single-page list on the security CMS website with the above method, meeting the display needs of different scenarios.

Common Questions (FAQ)

  1. How to adjust the display order of a single page in the list?You can edit each single page in the "Page Resources" -> "Page ManagementThrough setting different numbers to control sorting, the smaller the number, the closer the single page will be displayed at the top of the list.

  2. What should I do if the HTML code in my single page content is escaped when displayed on the front end?When you output single-page content in the front-end template (such as{{ item.Content }}or{% pageDetail with name="Content" %}）When, if the content contains HTML tags, for safety reasons, the system will default to escaping them. If you confirm that these HTML contents are safe, and you want them to be parsed and displayed normally, please add|safeFilter, for example:{{ item.Content|safe }}.

  3. I want to design a completely different layout for a single page, can AnQi CMS achieve that?Of course you can. When editing this single page in the background, there is a field called "Single Page Template". You can enter a custom template file path here (for exampleabout_us_custom.html)，and ensure that this file exists in your templatepagedirectory (for exampletemplate/default/page/about_us_custom.html）。so