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

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 UsThese pages usually have relatively fixed content, do not belong to any specific category or article model, and AnQiCMS refers to them as 'single pages'.Fortunately, AnQiCMS provides a very intuitive and powerful template tag that allows you to easily retrieve and loop output this single page's information.

Core tags:pageList

To achieve getting all single pages in a template and looping them out, we need to usepageListTemplate tags. This tag is specifically designed to retrieve all the independent page data you have created in the background "Page Resources" -> "Page Management".

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

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

The most basic usage is to retrieve the title and link of each single page and display them. For example, you might want to list all 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 fetch all single page data and assign the result to a variable namedpages.
  • {% for item in pages %}This is a standard loop structure, which will iterate over eachpagesEach single-page data in the list, assigns the current page data to the variable during each loop.itema variable.
  • {{ item.Link }}to visit the current page (item) link address.
  • {{ item.Title }}to visit the current page (item) title.

Deep Understanding: Available Page Data Fields

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

  • Id: The unique identifier ID of a single page.
  • TitlePage title, usually used for navigation or list display.
  • LinkPage access link.
  • DescriptionPage description information, 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, which can be uploaded on the backend.
  • ThumbSingle page thumbnail address, 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 a more rich display effect.

Display more page information

Assume you want to display a thumbnail, title, and brief description of an independent page in a certain 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 %}

Here we used{% if item.Logo %}and{% if item.Description %}to determine if these fields exist, rendering should only be performed when they do, to avoid blank pages or errors. Pay special attention to when you need to outputitem.ContentWhen (page content) is, 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 fetch all single pages. But if you only want to display a part of them, or want to exclude certain specific single pages (such as an internal page that is not intended to be displayed in the navigation), you can use it inside 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

pageListTags are a very practical feature in the AnQiCMS template system, making the management and display of independent pages exceptionally simple.By mastering its basic usage and available data fields, you can easily build page lists that meet various needs.

  • Template path:Remember that the default template for standalone pages is usuallypage/detail.html. If you specify a custom template for a standalone page, for example, the "About Us" page usespage/about.htmlThen make sure that the template file exists in your template directory.
  • The difference between independent pages and articles/categories:A standalone page is more suitable for pages with simple content structure, low update frequency, and no need for complex classification and archiving.For content that requires frequent updates and classification management, such as news, blogs, and product lists, it is recommended to use AnQiCMS's 'Content Model' and 'Document Classification' features.

Make full use of it in AnQiCMS,pageListTags can effectively enhance the clarity of your website's structure and user experience.

Common Questions (FAQ)

  1. Q: Can I display only a part of the independent pages instead of all of them? A:Of course you can.pageListThe tag will get all independent pages, and you can filter them inside.forin the loop, using{% if ... %}condition statements, based on page ID, title, or other available fields. For example,{% if item.Id != 1 %}Can exclude the page with ID 1.

  2. **Q: Content of an independent page.ContentThe field contains HTML tags, and directly outputting will display the source code. What should I do?