How to display the list of all independent pages of the website?

Understand the 'independent pages' in Anqi CMS

In the context of AnQi CMS, what we refer to as "independent page" corresponds to the "single page" function in the system.These pages are different from articles, products, and other content models, they are usually independent, the content is relatively fixed, and does not depend on the classification system.The AutoCMS provides an intuitive and convenient backend management interface, allowing you to easily create, edit, and maintain these single pages.

To manage these pages, you just need to log in to the Anqi CMS backend, navigate to the "Page ResourcesHere, you can set independent titles, keywords, descriptions, custom URLs for each single page, and even apply different templates to specific pages to meet personalized display needs.

Obtain and display the core tags of independent pages:pageList

To display these single-page lists on the website frontend, the template engine of Anqi CMS provides a special tag: pageListThis tag can help you easily get all published single-page data, and allows you to display its content in the template through looping.

pageListThe way to use the tag is very concise.It will default to fetching all single-page data under the current site.As a rule, you do not need to set complex parameters for it.siteIdThe parameter is used to specify the site ID. But in most single-site scenarios, it can be kept as the default.

When you use a template{% pageList pages %} ... {% endpageList %}with such a structure,pagesThe variable will contain an array of single-page objects. You can accessforLoop through this array and extract the detailed information of each single page for display.

Each single page (for example, within the loop)itemAll variables provide the following commonly used data fields, which can be flexibly called according to the needs of the website design:

• Id: The unique identifier for a single page.
• Title: English page title, usually used for link text in lists.
• Link: English page access URL address.
• Description: English short description of the page.
• Content: Single page detailed content. Please note that when displaying this field, if the content contains HTML tags, it is essential to use|safeFilter to ensure that HTML content can be parsed and displayed correctly, rather than being output as plain text.
• Logo: The large thumbnail address of the single-page.
• Thumb: Standard thumbnail address for a single page.

Actual operation in the template: Display list of independent pages.

Let's look at a specific code example to see how to display a list of all standalone pages on your website template.This is very common in the navigation menu, footer link area, or site map of the website.

<nav class="page-list-nav">
    <ul>
    {% pageList pages %}
        {% for item in pages %}
        <li>
            <a href="{{ item.Link }}" title="访问{{ item.Title }}页面">
                {{ item.Title }}
            </a>
            {# 如果您希望在列表项中显示简要描述，可以取消以下行的注释 #}
            {# {% if item.Description %} <p>{{ item.Description }}</p> {% endif %} #}
            {# 如果页面配置了缩略图并想在列表中展示，可以这样添加 #}
            {# {% if item.Thumb %} <img src="{{ item.Thumb }}" alt="{{ item.Title }}缩略图" /> {% endif %} #}
        </li>
        {% endfor %}
    {% endpageList %}
    </ul>
</nav>

This code will generate an unordered list, with each list item being a link to an independent page, and the link text being the title of the single page.You can flexibly adjust the HTML structure and apply CSS styles according to the design style of your website, making it harmonious and unified with the overall page layout.

Advanced techniques: Exclude specific pages and customize page templates.

• exclude specific pages: Sometimes, you may not want all single pages to appear in the list, such as a page for internal access only or a specific functional page. You canforLoop internal condition judgment (if) to exclude these pages. For example, if you want to exclude the page with ID 5:

  <ul>
  {% pageList pages %}
      {% for item in pages %}
          {% if item.Id != 5 %} {# 排除ID为5的页面，您也可以根据item.Title或其他字段进行判断 #}
          <li>
              <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
          </li>
          {% endif %}
      {% endfor %}
  {% endpageList %}
  </ul>
  

• Custom single page template: English CMS allows to specify an independent template file for a single page. For example, if you have a 'About Us' page and want it to have a unique layout, you can select or create a template namedabout-us.htmlThe exclusive template. When the user clicks the link on this page, the system will automatically render the one you specified.about-us.htmlfile. The single-page detail template that the system uses by default is usuallypage/detail.htmlEnglish or according to the page ID to customizepage/{单页ID}.htmlThis provides great flexibility for the personalized display of the page.

Summary

Safe CMS through its concise and clear "single-page" function and powerfulpageListTemplate tags provide us with an efficient and flexible independent page management and display solution.Whether it is to build website navigation, footer link area, or create other content modules that require listing independent pages, these tools can help you easily achieve this, thereby enhancing the user experience and information integrity of the website.

Common Questions (FAQ)

1. Q: I created a new single page on the backend, but the list on the website's frontend did not display. Why is that?A: First, please confirm that you have set up the "Page Management" in the backend