How to display all or part of a single-page list on a website?

In website operation, we often need to display some independent pages with relatively fixed and unchanged content, such as "About Us", "Contact Information", or certain policy descriptions, etc.In Anqi CMS, these are called 'single pages'. Effective management and display of these single pages not only makes the website structure clearer but also improves the user experience.

Next, we will explore how to flexibly display all or part of a single-page list on a website.

1. Understand the creation and management of single-page (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 Resources' option under 'Page Management' in the left-hand navigation bar.
2. Create or edit a single page:Here, you can add a new single page or edit an existing one. Each single page includes the following core information:
   • Page name:This is the title of the single page, which will also be displayed directly on the front end.
   • Custom URL:To ensure SEO-friendliness and link aesthetics, it is recommended to set a concise and meaningful custom URL for each single page (for example,about-us/contactWhen your pseudo-static rule includes{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, 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 of the numbers, you can control the default arrangement of the 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. 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.htmlAs long as the file exists in your templatepagein the directory).

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

Second, display all single-page lists on the website

If you want to display all published single pages in an area (such as footer navigation or sidebar), Anqi CMS provides a concise 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 the core tag, it will retrieve all single page data from the database and assign it to a namedpages.
• {% for item in pages %}We use aforto loop throughpagesEach single page in the variable, the data of each single page will be traversed in the loop.itemVariable access.
• {{ 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 the list of all single pages.

3. Flexible display of part of the single page list

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

1. Filter and exclude through template logic

You canforUsing a loopifConditionally 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 %}

We used herecontainFilter (referencefilter-contain.md), it can determine if a string contains specific keywords.

2. Display 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 usepageDetailThe tag allows you to accurately retrieve the details of a single page by ID or a 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 aliasabout-usGet the title of the single page.
• {% pageDetail with name="Description" token="about-us" %}: Get the description of the single page.
• {{ item.Content|safe }}: If you need to display the full content (which may include HTML), please make sure to use|safeFilter to prevent HTML content from being escaped (reference)filter-safe.md)

3. Use the "single-page template" feature on the backend to implement a specific design

As mentioned earlier, when editing a single page in the background, you can specify a separate template file for it.This means that when the user accesses this single page, the system will automatically load the template you specify, thus achieving a completely personalized design.

For example, specify the template file for the "Contact Us" page with ID 5contact.htmlThen you just need to make suretemplate/你的模板目录/page/contact.htmlThe file exists and the 'Single Page Template' field of this single page is filled in under the 'Page Management' in the backgroundcontact.htmlJust do it.

Four, Important Tips and **Practice

• Location of the template file: The default single page detail template istemplate/你的模板目录/page/detail.html. If you have customized a single-page template (for examplecontact.html), it should be placed intemplate/你的模板目录/page/directory.
• Static rules:Make sure that your website's pseudo-static rules include the single-page rules, which are usuallypage===/{filename}.htmlIn a similar form, this is how a friendly URL is generated (refer tohelp-plugin-rewrite.md)
• SEO optimization:Fully utilize the SEO title, keywords, and description fields of the background single-page, and optimize the SEO independently for each single page.
• Display order:In the "Page Management" section on the backend, adjusting the "Display Order" field can conveniently control the default sorting of a single page in the list.
• Multi-site support:If you have used the multiple site management feature of Anqi CMS and want to call data from other sites, you canpageListorpageDetailthe tag withsiteIdspecify the parameter (for example,{% pageList pages with siteId="2" %})

By using the above method, you can flexibly display all or a specific part of the single-page list on the Anqi CMS website, meeting the display needs of different scenarios.

Frequently Asked 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 Management" section of the Anqi CMS backend, find the "Display Order" field.By 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 my single-page content contains HTML code but it is escaped when displayed on the front end?When you output single-page content in the front-end template (for example{{ item.Content }}or{% pageDetail with name="Content" %}）when, if the content contains HTML tags, for safety reasons, the system will escape them by default. If you confirm that these HTML contents are safe and you want them to be parsed and displayed normally, please add|safefor example:{{ item.Content|safe }}.

3. I want to design a completely different layout for a single page, can Anqi CMS achieve this?Of course you can. When editing this single page in the background, there is a "Single Page Template" field. You can enter a custom template file path here (for exampleabout_us_custom.htmlMake sure this file exists in your templatepageUnder the directory (for exampletemplate/default/page/about_us_custom.htmlThis way