As an experienced person who deeply understands the operation of AnQiCMS, I know the core status of content in website construction.A single page serves as the cornerstone for carrying corporate core information, service introduction, contact information, and other static content. Its effective display is crucial for users to understand the website and the corporate image.This article will elaborate on how to use the built-in features of AnQiCMSpageListLabel, retrieve and flexibly display all single page content on the front end.
MasterpageListLabel, build a clear single page navigation and display.
In AnQiCMS, a single page is an important part of the website structure, commonly used for pages such as 'About Us', 'Contact Information', 'Terms of Service', etc., which do not require frequent updates and have relatively fixed content.The management of these pages is carried out in the "Page Resources" module on the back end.To统一或分类展示这些单页面在前端（如网站的底部导航、侧边栏或专门的“解决方案”列表），AnQiCMS provides a powerful and concise template tag—pageList.
pageListThe primary function of the label is to retrieve all the single-page lists that have been created. AndarchiveListDifferent from other labels,pageListThe design philosophy is to obtain comprehensively, rather than based on complex filtering conditions.This means it will return all the visible single-page data on your backend.If you need to further filter or sort these pages, you need to implement it in the loop logic of the frontend template.
UsepageListThe basic syntax structure of the label is concise and clear:
{% pageList pages %}
{# 在这里循环展示每个单页面信息 #}
{% endpageList %}
Here, pagesIs a variable name that you can customize, which will carry all the single page object arrays obtained from the background. Through this variable, you can use it in{% pageList %}and{% endpageList %}tags betweenforLoop to traverse and render the detailed information of each single page.
pageListThe tag currently supports an optional parameter.siteId. This parameter is mainly used for multi-site management scenarios. If you have created multiple sites in the AnQiCMS background and need to call the single page data of a specific site, you can usesiteIdSpecify. However, for most single-site operators, this parameter is usually not required, and the system will automatically retrieve the single-page list of the current site.
InforIn the loop, each single page object (usually nameditem) contains a wealth of callable fields that allow you to fully display the various properties of the page:
IdThe unique identifier of the single page.TitleThe title of a single page, usually the main name that users see on the page.LinkThe access link of the single page.DescriptionA brief description of a single page, often used for SEO or list summaries.Content: Complete content of a single page, usually containing HTML structure.Logo: Thumbnail large image address of a single page.Thumb: Thumbnail address of a single page.
Front-end display example: from basic list to intelligent filtering
UnderstoodpageListAfter learning the basic usage and available fields, we can start with the actual display on the front-end. Below are some common application scenarios and code examples.
Create a simple single-page list
The most direct application is to list all single pages in the footer or navigation menu of a website. This can be achieved through a simpleforloop:
<nav class="footer-nav">
<h3>重要链接</h3>
<ul>
{% pageList pages %}
{% for item in pages %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endpageList %}
</ul>
</nav>
This code will iterate over all single pages, create a list item for each page, and display its title and link. This is very effective for quickly building the basic navigation of a website.
Filter and exclude specific single page
In practical applications, you may not want all single pages to be displayed in a specific list, for example, you may have an internal use page, or a page that is only displayed under certain conditions. At this point, you canforuse labels insideifFilter conditions. For example, if you need to exclude IDs for1pages titled 'About Us' and those with titles containing 'Privacy':
<div class="sidebar-links">
<h3>我们的服务</h3>
<ul>
{% pageList pages %}
{% for item in pages %}
{# 排除ID为1的页面，并且排除标题包含“隐私”的页面 #}
{% if item.Id != 1 and "隐私" not in item.Title %}
<li>
<a href="{{ item.Link }}" title="{{ item.Description }}">
{% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}"/>{% endif %}
<span>{{ item.Title }}</span>
</a>
</li>
{% endif %}
{% endfor %}
{% endpageList %}
</ul>
</div>
This example not only demonstrates how to exclude specific pages, but also shows how to combineThumbfield to display thumbnails, and throughDescriptionfield to provide more information.
Advanced display: Custom style and layout
Sometimes, you may need to apply unique styles or layouts to certain single-page applications.forloop.Counterandforloop.RevcounterLoop auxiliary variables are very useful at this time.forloop.CounterIndicates the current loop index (starting from 1),forloop.RevcounterIndicates the index from the end.
<div class="special-pages-section">
{% pageList pages %}
{% for item in pages %}
<div class="page-card {% if forloop.Counter == 1 %}featured{% endif %}">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
{% if item.Logo %}<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="page-logo"/>{% endif %}
<p>{{ item.Description|truncatechars:100 }}</p> {# 截取描述文字，保持简洁 #}
<a href="{{ item.Link }}" class="read-more">了解更多</a>
</div>
{% endfor %}
{% endpageList %}
</div>
In this example, we added the first single-page to the list.featuredclass, so that it can be defined with special display effects through CSS. At the same time,Descriptionfield throughtruncatecharsThe filter was truncated to ensure that the text will not be too long in the card layout.
Considerations for content creation and operation
As a website operations manager, while usingpageListWhen using tags, we also need to pay attention to some details of content creation and operation:
first, Page title and descriptionThe input is crucial in the background.pageListThe label directly retrieves this information and displays it on the front end, which not only affects user experience but is also a key element for search engine optimization (SEO).Ensure each single page has a unique, attractive title and a concise, accurate description.
secondly,The management order of the single page.. AlthoughpageListIt does not directly provide a sorting parameter, but the "Page Management" "Display Order" field in the AnQiCMS background can control the default sorting of the page. This means that the order you adjust in the background will usually also be reflected inpageListThe output, unless you have customized sorting logic in your frontend code.
Finally, distinguishSingle-page and article/productusage.pageListIt is suitable for displaying on static information pages, while for dynamically updated blog posts, news, or product information, it should be usedarchiveListorcategoryListTags that are more professional, because they provide richer filtering, sorting, and pagination functions to adapt to the characteristics of dynamic content.
By reasonable applicationpageListTag and logical control of its matching, you can easily build clear, beautiful and functional single-page display modules on the AnQiCMS front-end, thereby enhancing the information architecture and user experience of the website.
Frequently Asked Questions (FAQ)
1.pageListCan the tag retrieve a single specified ID page?
pageListThe tag is designed to retrieve all or filtered single-page lists. It does not directly support retrieving a single single-page by ID. If you need to retrieve and display the details of a specific single-page by ID, you should usepageDetailThe tag allows you to pass throughidortokenThe parameter precisely specifies the single page to be obtained.
2. How to controlpageListThe display order of the single page obtained by the tag?
pageListThe tag itself does not provideorderParameters are used to directly control sorting. The default sorting of a single page usually depends on the "display order" set in the "Page Management" of the AnQiCMS backend.The smaller the number, the earlier it is displayed. If you need to implement a more complex sorting on the front-end (such as by title alphabetical order), you need to get thepagesData is stored in a variable and then sorted in the custom logic of JavaScript or a template.
3.pageListandarchiveListWhat are the main differences, and when should they be used?
pageList主要用于获取和展示single pageThese pages are usually static, informative content, such as "About Us", "Contact Information", "Terms of Service", etc., and they are updated less frequently, without categories, tags, and complex structures. AndarchiveListUsed to retrieve and displayArticles, productsContent that is dynamic, usually belonging to a specific content model (such as an article model, product model), can have categories, tags, comments, custom fields, and support more rich filtering, sorting, and pagination functions. In short,pageListHandle static fixed content,archiveListHandle dynamic structured content.