How does the `pageList` tag display all the titles and links of the individual pages of the website?

In the Aiqi CMS, make use ofpageListThe tag displays the titles and links of all single pages, which is a very common and practical need 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 AnQi CMS.In the Anqi CMS backend management, there is a special "Page Resources" module, which includes the "Page Management" function.This is where you create and manage independent pages such as 'About Us', 'Contact Us', and 'Privacy Policy'.These pages usually have relatively fixed content, do not belong to articles or product models, and each has an independent 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——pageListIt is specifically used to obtain information about all single pages on a 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 links of the pages.

UsepageListThe basic structure of tags is very intuitive, it needs a start tag{% pageList %}And an ending tag.{% endpageList %}We can use between these tagsforloop to process each single page one by one.

Basic usage: Display the titles and links of all single pages

To display the titles and links of all single pages on a website, we need topageListwith the tag andforCombine in a loop.pageList pagesDeclared a namedpagesThe variable, it will contain all the collections of single pages. Inforthe loop,itemrepresents each single page object in the collection.

EachitemAn object contains a series of page-related properties, the most commonly used and most suitable for our needs isitem.Title(Page title) anditem.Link(Page link).

Here is a simple template code example that will display all single pages in an unordered list (<ul>) in the form, each list item contains 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 Anqin CMS backend and generate a list item for each page<li>which includes a hyperlink<a>The link text is the title of the page, and the link's target address is the actual URL of the page.

Deep understandingpageListParameters and fields of the tag

pageListTags do not usually require additional parameters to retrieve all single-page information. However, for multi-site users, one cansiteIdParameters to specify the single-page list of a specific site. For example:{% pageList pages with siteId="1" %}.

exceptitem.Titleanditem.LinkIn addition, each single pageitemThe object also provides other useful fields that can be displayed as needed:

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

If you want to display this additional information in the list, you can directly useforUsing a loop{{ item.Description }}/{{ item.Thumb }}to 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>

A more flexible display method: 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 created a "Privacy Policy" page, but you only want to display the link in the footer and not in the main navigation bar.At this time, one canforAdd conditional judgment within the loop to filter specific pages

We can make use ofitem.IdOr (the unique ID of the page)item.Title(Page Title) to filter. Using ID is usually more accurate and robust because 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>

By such condition judgment, you can flexibly control which single pages should be displayed at the current location.

Application scenario example

pageListThe flexibility of the tag makes it suitable for a variety of website structures and layouts:

  • Website footer navigation: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 in-site search results:In search results, it is also desirable to display related single-page pages.
  • HTML site map: Create a concise list to help users and search engines quickly understand the website structure.

Points to note

While usingpageListWhen labeling, there are several small details to pay attention to in order to ensure the correctness of the template code and the normal operation of the website:

  • Label case sensitivity:The template tags of AnQi CMS are case-sensitive. Please make surepageList/pages/item.Title/item.Linkare written strictly according to the camel case naming convention in the document.
  • Location of the template file: pageListthe tags are usually in/templateUnder the directory.htmlused in template files.
  • Data source: pageListThe one-page that is published and visible in the background "Page Management". If a page is not published or set to not display, it will not appear inpageListthe results.

Summary

In summary, it is about AnQi CMS'spageListLabels provide a直观 and efficient way to manage and