In AnQiCMS, it is actually a very common requirement to display a list of all single-page lists and links in the website template, such as placing a 'site map' or a 'quick link' area at the bottom of the website, or listing all 'service items' single pages in the sidebar.AnQiCMS provides a simple and powerful template tag, allowing you to easily achieve this.

Understanding the single page and its role

In AnQiCMS, a single page (Page) is usually used to publish those content that is relatively fixed, does not require classification management, but is indispensable, such as "About Us", "Contact Information", "Privacy Policy", "Terms of Service", and so on.Each single page has its own independent URL, title, and content. You can create and edit it in the "Page Resources" -> "Page Management" in the backend.

Core:pageListTemplate Tag

To get the list of all single pages, you need to use AnQiCMS built-inpageListTemplate tag. This tag is designed to be very intuitive, it will help you extract all published single-page data from the database and provide it to the template for iteration and display.

UsepageListThe basic structure of the label is usually like this:

{% pageList pages %}
    {# 循环遍历每一个单页面 #}
    {% for item in pages %}
        {# 在这里展示每个单页面的信息 #}
    {% endfor %}
{% endpageList %}

Here, pagesIs a temporary variable name that will carry all the single page data obtained. You can name it according to your preference.singlePages/myPagesAs long as it remains consistent in theforloop.

Retrieve specific information of a single page

In{% for item in pages %}Inside this loop,itemThe variable represents the current single page. Throughitem, you can access various properties of the single page, including:

  • item.IdThis is the unique ID of the single page.
  • item.TitleThis is the title of the single page, which is most commonly used for display in lists.
  • item.LinkThis is the access link of the single page, used to build clickable URLs.
  • item.Description: A brief description of a single page, sometimes also used as a supplement to list items.
  • item.Content: The full content of a single page (but usually not displayed directly in the list).
  • item.Logo: The large image or cover image address of a single page.
  • item.Thumb: The thumbnail image address of a single page.

Build a list of single pages in the template.

Now, let's take a specific example to show how to display this information. You can place the following code snippet in any template file where you want to display a single-page list, such asfooter.html(Website Footer Template),sidebar.html(Sidebar Template) or a dedicatedsitemap.htmlthe page.

<div class="site-quick-links">
    <h3>快速链接</h3>
    <ul>
        {% pageList pages %}
            {% for item in pages %}
                {# 这里的 {{ item.Link }} 会自动生成单页面的完整访问地址 #}
                {# 这里的 {{ item.Title }} 就是您在后台为单页面设置的标题 #}
                <li>
                    <a href="{{ item.Link }}" title="访问 {{ item.Title }}">
                        {{ item.Title }}
                    </a>
                    {% if item.Description %}
                        <p class="page-description">{{ item.Description|truncatechars:80 }}</p> {# 如果有描述，截取前80个字符显示 #}
                    {% endif %}
                </li>
            {% empty %}
                {# 当没有任何单页面时，显示此提示 #}
                <li>目前还没有可展示的单页面。</li>
            {% endfor %}
        {% endpageList %}
    </ul>
</div>

In this example, we created an unordered list(<ul>), each list item(<li>) contained a link to a single page. The text of the link is the title of the single page, and if the single page has a description filled in, we will also display a part of the description text.

Advanced usage and tips

  • Exclude specific pagesSometimes you may not want to display all single pages in the list.For example, if the "Contact Us" page is already in the main navigation, you may want to exclude it from the quick links at the bottom.You can useifCondition judgment to implement:

    {% pageList pages %}
    {% for item in pages %}
        {# 假设ID为5的单页面是“联系我们”，或者标题为“旧版本说明” #}
        {% if item.Id != 5 and item.Title != '旧版本说明' %}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endif %}
    {% endfor %}
{% endpageList %}

    Suggest usingitem.IdExclude, because the ID is unique and usually does not change, which is more stable than relying on the title.

  • Style Control: To make the list look more beautiful, you can givediv/ul/li/aAdd custom CSS classes to HTML tags (such as in the example below),site-quick-links/page-descriptionThen define the styles for these classes in your CSS file.

  • Handling empty states:{% empty %}Tags are very useful, they can be used topageListWhen no single page is found, display a friendly prompt to avoid the page from appearing blank or showing errors.

BypageListLabel, you can flexibly display and manage all single-page lists and links in the AnQiCMS template, providing better navigation and user experience for your website.

Frequently Asked Questions (FAQ)

Q1:pageListCan the tag filter specific categories of single pages? For example, only display single pages of the "About" category.

A1: pageListThe design intention of the tag is to retrieve all published single-page articles, it itself does not support direct filtering based on categories or other custom fields. If you need to filter, you canforuse labels insideifMake a conditional judgment. For example, if you have agreed on the keyword "category" in the content or description of a single page, or identify through the ID or title of a single page, then you can use the followingitem.Descriptionoritem.TitleExclude or only display specific pages.

Q2: If my website has a large number of single pages, will listing all of them affect website performance?

A2:AnQiCMS is developed based on the Go language and is known for its high performance and high concurrency features. For a conventional number of single-page applications (for example, dozens to hundreds),pageListThe performance impact of tags is usually negligible. The system will efficiently retrieve data from the database.But in extreme cases, if your website has an extremely large number of single pages (thousands even tens of thousands), and listing them all on the same page would indeed increase the rendering time of the page.In this case, you may need to consider using JavaScript for pagination on the front end, or re-evaluate the design requirements to see if all pages really need to be displayed in the same list all at once.

Q3: Can I display thumbnails or summaries in a single-page list, in addition to titles and links?

A3:Absolutely. As mentioned in the article, in{% for item in pages %}the loop, you can not only accessitem.Titleanditem.LinkCan also obtainitem.Description(Summary),item.Logo(Large Image) anditem.Thumb(Thumbnail) etc. You can freely combine this information according to the design requirements of the template to enrich your single-page list display. For example, add a<img>Labels to display thumbnails or a brief description below the link.