How to get and loop through all independent pages in AnQiCMS template (such as About Us)?

In AnQi CMS, sometimes we need to list some independent pages in the website's navigation bar, footer, or other specific areas, such as "About Us", "Contact Us", "Privacy Policy", and so on.These pages usually have fixed content and do not belong to a specific category or article model. AnQiCMS refers to them as 'single pages'.Luckyly, AnQiCMS provides a very intuitive and powerful template tag that can easily retrieve and loop out the information of these single pages.

Core tags:pageList

To achieve the output of all single pages in a template in a loop, we need to usepageListTemplate tag. This tag is specifically designed to retrieve all the independent page data created in the background "Page Resources" -> "Page Management".

pageListThe use of tags is very concise, it returns an array containing all the data of single pages (or a list object), you can specify a variable name for this list, and then iterate through the variable in the template to display the detailed information of each single page.

Basic Usage: Retrieve and display all single-page titles and links

The basic usage is to retrieve the title and link of each single page and display them. For example, you may want to list all the independent pages related to company information at the bottom of the website:

{# 使用 pageList 标签获取所有独立页面，并将其存储在名为 'pages' 的变量中 #}
{% pageList pages %}
    <nav class="footer-pages-nav">
        <ul>
        {# 遍历 'pages' 变量中的每一个页面，每次循环将当前页面数据赋值给 'item' #}
        {% for item in pages %}
            <li>
                {# 输出页面的链接和标题 #}
                <a href="{{ item.Link }}">{{ item.Title }}</a>
            </li>
        {% endfor %}
        </ul>
    </nav>
{% endpageList %}

In this code block:

  • {% pageList pages %}Tell AnQiCMS template engine to get all single page data and assign the result to a variable namedpages.
  • {% for item in pages %}This is a standard loop structure, it will iterate over each onepagesEach single page data in the list, each time the loop assigns the current page data toitemVariable.
  • {{ item.Link }}: Access the current page (item) link address.
  • {{ item.Title }}: Access the current page (item) title.

Deep understanding: fields available on the page data

pageListeach tag looped outitemObjects, all contain a series of practical fields, which you can flexibly call according to your own needs. These fields include:

  • IdThe unique identifier ID of a single page.
  • TitleThe title of a single page, usually used for navigation or list display.
  • LinkThe access link of the single page.
  • DescriptionThe description information of a single page, which can be set in the background.
  • Content: Detailed content of a single page, usually containing HTML formatted text.
  • Logo: Cover image address of a single page, can be uploaded on the backend.
  • Thumb: Thumbnail address of a single page, can be uploaded on the backend.

Useful scenarios: Personalized display and filtering.

In addition to simple titles and links, we can also combine other fields to achieve richer display effects.

Display more page information

Assuming you want to display a thumbnail, title, and brief description of an independent page in an area:

{% pageList pages %}
    <div class="all-pages-overview">
    {% for item in pages %}
        <div class="page-card">
            <a href="{{ item.Link }}">
                {# 如果页面有上传 Logo 图片，则显示它 #}
                {% if item.Logo %}
                    <img src="{{ item.Logo }}" alt="{{ item.Title }}" class="page-card-image">
                {% endif %}
                <h3>{{ item.Title }}</h3>
            </a>
            {# 如果页面有描述，则显示它 #}
            {% if item.Description %}
                <p class="page-card-description">{{ item.Description }}</p>
            {% endif %}
            {# 如果需要显示部分内容，确保对 HTML 内容使用 |safe 过滤器 #}
            {# <div class="page-card-content">{{ item.Content|truncatechars:100|safe }}</div> #}
        </div>
    {% endfor %}
    </div>
{% endpageList %}

We used here{% if item.Logo %}and{% if item.Description %}To determine whether these fields exist, rendering should only be performed when they do, to avoid blank pages or errors. Pay special attention to when you want to outputitem.ContentWhen the page content is rendered, since it may contain HTML tags, in order to ensure that the browser parses it correctly rather than displaying the raw code, you need to use|safeFilter, for example{{ item.Content|safe }}.

Exclude specific pages

pageListThe tag will retrieve all single pages. But if you only want to display a part, or want to exclude certain specific single pages (for example, an internal page that is not intended to be displayed in the navigation), you can use it within the loop.ifConditional statements are used for filtering.

{# 假设我们不想在导航中显示 ID 为 5 和 10 的页面，以及标题为“旧版文档”的页面 #}
{% pageList pages %}
    <nav class="main-pages-nav">
        <ul>
        {% for item in pages %}
            {# 使用 if 语句排除指定 ID 或标题的页面 #}
            {% if item.Id != 5 and item.Id != 10 and item.Title != '旧版文档' %}
                <li>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                </li>
            {% endif %}
        {% endfor %}
        </ul>
    </nav>
{% endpageList %}

In this way, you can flexibly control which pages should be displayed on the front end and which should be hidden.

Summary and advanced tips

pageListThe tag is a very practical feature in the AnQiCMS template system, which makes the management and display of independent pages extremely simple.By mastering its basic usage and available data fields, you can easily build a list of pages that meet various needs.

  • Template path:Remember, the default template for a standalone page is usuallypage/detail.html. If you specify a custom template for a standalone page, such as the "About Us" page usespage/about.htmlMake sure the template file exists in your template directory.
  • The difference between standalone pages and articles/categories:An independent page is more suitable for content that has a simple structure, a lower frequency of updates, and does not require complex classification and archiving.For news, blogs, product lists, and other content that requires frequent updates and categorization management, it is recommended to use AnQiCMS's 'Content Model' and 'Document Classification' features.

Make full use of AnQiCMS,pageListLabels can effectively enhance the structure clarity and user experience of your website.

Frequently Asked Questions (FAQ)

  1. Q: Can I only display some independent pages instead of all of them? A:Of course you can.pageListThe label will retrieve all independent pages, you can filter within itsforUsed in loop:{% if ... %}conditional statements based on page ID, title, or other available fields. For example,{% if item.Id != 1 %}You can exclude the page with ID 1.

  2. **Q: The content of the independent pageContentThe field contains HTML tags, and the source code will be displayed directly. What should I do?