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

In AnQiCMS, the independent pages of a website play an important role, usually carrying core information such as 'About Us', 'Contact Information', 'Privacy Policy', and are an indispensable part of building website trust and improving the information architecture.This article will thoroughly introduce how to effectively manage and display these independent page lists in AnQi CMS.

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, with relatively fixed content and not dependent on the classification system.The Anqi CMS 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 left menu's 'Page Resources', and then click 'Page Management'.Here, 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.

Get and display the core tags of independent pages:pageList

To display the list of single pages on the website front end, the Anqi CMS template engine provides a special tag:pageList. This tag helps you easily get all the published single page data and allows you to display its content in the template through a loop on the webpage.

pageListThe tag usage is very concise. It will default to fetching all single-page data under the current site.In most cases, you do not need to set complex parameters for it. If you are in a multi-site environment and need to retrieve a single-page list from other sites, you may need to use it in this casesiteIdThe parameter is used to specify the site ID. However, it is recommended to keep the default in most single-site scenarios.

When you use it in the template{% pageList pages %} ... {% endpageList %}this 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, in the loop of theitemVariables all provide the following commonly used data fields, you can flexibly call them according to the needs of website design:

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

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

Let's go through a specific code example to see how to display a list of all standalone pages in 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 generates an unordered list where each list item is a link to an independent page, and the link text is 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 with the overall page layout.

Advanced techniques: Exclude specific pages and custom 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 or a specific functional page. You canforAdd a conditional judgment inside the loop (ifExclude 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: SecureCMS allows you 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 named template in the page management backend.about-us.htmlYour exclusive template. When the user clicks on the link of this page, the system will automatically render the one you specifiedabout-us.htmlfile. The default single-page detail template of the system is usuallypage/detail.htmlOr customized according to the page IDpage/{单页ID}.htmlThis provides great flexibility for personalized page display

Summary

Anqi CMS features a concise and clear 'single-page' function and powerfulpageListThe template tag provides an efficient and flexible independent page management and display solution for us.Whether it is to build website navigation, bottom link area, or create other content modules that need to list independent pages, these tools can help you easily achieve this, thereby improving the user experience and information integrity of the website.

Frequently Asked Questions (FAQ)

1. Q: Why didn't the list on the front page of the website display after I created a new single page in the background?A: First, please confirm that you have managed the page in the background