How to display the `pageList` tag to show the titles and links of all single pages on the website?

In AnQi CMS, utilizingpageListLabel displays the titles and links of all single pages, which is a very common and practical requirement in website layout and navigation settings. Whether it is used for website footer navigation, sidebar link lists, or building a simple HTML site map, pageListTags can help us efficiently achieve these functions.

Understand the single-page in AnQi CMS.

First, let's briefly review the 'single page' in the security CMS.In the backend management of Anqi CMS, there is a special "Page Resources" module, which includes the "Page Management" function.This is the place to create and manage independent pages such as 'About Us', 'Contact Us', and 'Privacy Policy'.These pages usually contain fixed content and do not belong to articles or product models. Each page has its own title, content, link, and can even be configured with thumbnails and SEO information.

pageListThe core role of tags.

AnQi CMS provides a very convenient template tag—pageList, specifically used to obtain information about all single pages on the website.Its design philosophy is to allow us to easily traverse these independent pages and extract the data we need, such as the title and link of the page.

UsepageListThe basic structure of the label is very intuitive, it needs a start tag{% pageList %}and an end tag{% endpageList %}. Within these two tags, we can usefora loop to process each single page one by one.

Basic Usage: Display all titles and links of single pages

To display all titles and links of single pages on a website, we need topageListTags withforcombine the loops.pageList pagesdeclare a variable namedpagesThe variable, it will contain all single-page collections.forIn the loop,itemrepresents each single-page object in the collection.

EachitemObjects all contain a series of page-related properties, the most commonly used and most suitable for our needs isitem.Title(page title) anditem.Link(page link).

Below is a simple template code example that displays all single pages as an unordered list (<ul>). Each list item includes the title of the page and a link to the page:

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

This code will traverse all single pages created in the "Page Management" section of the Anqi CMS backend and generate a list item for each page<li>including a hyperlink<a>The linked text is the title of the page, and the target address of the link is the actual URL of the page.

Deep understandingpageListTag parameters and fields

pageListLabels do not require additional parameters to get all single-page information in most cases. But for multi-site users,siteIdSpecify the parameter to get the single-page list of a specific site. For example:{% pageList pages with siteId="1" %}.

Besidesitem.Titleanditem.Linkeach single-pageitemobject also provides other useful fields that can be displayed as needed:

  • item.Id: The unique identifier ID for a single page, commonly used for debugging or combined with conditional judgments.
  • item.Description: A brief description of a single page, which can be used as supplementary information below the link.
  • item.Content: Full content of a single page (usually not displayed directly on the list page unless there is a special requirement).
  • item.Logo: Main image or large image URL of a single page.
  • item.Thumb: Thumbnail URL of a single page, if the page is configured with a thumbnail.

If you want to display this additional information directly in the list,foruse it in the loop.{{ item.Description }}/{{ item.Thumb }}Wait for the call. For example:

<ul class="page-cards">
{% pageList pages %}
    {% for item in pages %}
    <li>
        <a href="{{ item.Link }}">
            {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}"/>{% endif %}
            <h3>{{ item.Title }}</h3>
        </a>
        {% if item.Description %}<p>{{ item.Description }}</p>{% endif %}
    </li>
    {% endfor %}
{% endpageList %}
</ul>

More flexible display methods: Exclude specific pages

In some cases, you may not want all the single pages of the website to be displayed in a list.For example, you have created a "Privacy Policy" page but only want to display the link in the footer and not in the main navigation bar.forAdd conditional judgment inside the loop to filter specific pages.

We can make use ofitem.Id(the unique ID of the page) oritem.TitlePage title to filter. Using ID is usually more accurate and stable, as the title may change.

<ul class="main-navigation">
{% pageList pages %}
    {% for item in pages %}
        {# 假设ID为5的页面是“隐私政策”，我们不希望它出现在这个导航中 #}
        {% if item.Id != 5 %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        </li>
        {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

You can flexibly control which single pages should be displayed at the current location based on actual needs.

Application scenario examples

pageListThe flexibility of the label makes it suitable for various website structures and layouts:

  • Navigation at the bottom of the website:Quickly list links to pages such as "About Us", "Contact Information", "Terms of Service", etc.
  • Sidebar menu:List single pages related to the current content as auxiliary navigation.
  • Supplement to the search results within the site:In search results, in addition to articles/products, it would also be nice to show related single pages.
  • HTML sitemap:Generate a concise list to help users and search engines quickly understand the website structure.

Cautionary notes

When usingpageListWhen labeling, there are several small details to pay attention to to ensure the correctness of the template code and the smooth operation of the website:

  • The label is case-sensitive:The template tags of Anqi CMS are case-sensitive. Please make sure.pageList/pages/item.Title/item.Linkare written strictly according to the camel case naming convention in the document.
  • Template file location:) pageListThe tags are usually in)/templatedirectory..htmlUsed in template files.
  • Data source: pageListThe one returned is a single page that has been published and is visible in the "Page Management" section on the backend. If a page has not been published or has been set to not display, it will not appear in the results.pageListThe results.

Summary

In summary, the Anqi CMS providespageLista straightforward and efficient way to manage