In AnQiCMS, the need to display a list of all single-page links in the website template is actually a very common requirement. For example, you may want to place a "site map" or a "quick linkAnQiCMS provided 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 UsEach single page has its own independent URL, title and content. You can create and edit it in the 'Page Resources' -> 'Page Management' in the background.

Core:pageListTemplate tags

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 tag is usually like this:

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

Here,pagesIt is a temporary variable name, which will carry all the single-page data obtained. You can name it according to your preference.singlePages/myPagesEnglish, as long as it isforconsistent in the loop.

Get specific information of a single page

In{% for item in pages %}in this loop,itemthe variable represents each single page currently. Throughitem，You can access various properties of this single page, including:

  • item.Id: The unique ID of the single page.
  • item.Title: The title of the single page, which is most commonly used for display in the list.
  • item.Link: English single-page access link, used to build clickable URLs.
  • item.Description: English brief description of a single page, sometimes also used as supplementary explanation for list items.
  • item.Content: Single-page full content (but usually not displayed directly in the list).
  • item.Logo: Address of the large image or cover image of the single page.
  • item.Thumb: Address of the thumbnail image of the single page.

Build single page list in template

Now, let's take a specific example to see 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.htmlpage.

<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>）contains a link to a single page.The text linked is the title of the single page, and if the single page has a description filled in, we will also display a portion of the description.

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 might want to exclude it from the quick links at the bottom.ifCondition 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 %}

    It is recommended to useitem.IdExclude it, 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 (such as the ones in the examples) to HTML tagssite-quick-links/page-description), then define the styles for these classes in your CSS file.

  • Handling empty state:{% empty %}The label is very useful, it can bepageListA friendly prompt is displayed when no single page is found, to avoid the page from being blank or displaying an error.

PasspageListTags, 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.

Common Questions and Answers (FAQ)

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

A1: pageListThe design intention of the label is to retrieve all published single-page applications, it itself does not support direct filtering by category or other custom fields. If you need to filter, you canforuseifPerforming conditional judgments. For example, if you have agreed on the keyword "category" in the single-page content or description, or identify through the ID or title of a single page, then you can according toitem.Descriptionoritem.TitleExclude or display specific pages only.

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

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

Q3: Can I display thumbnails or summaries in the single-page list besides the title and link?

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