As an experienced person who deeply understands the operation of AnQiCMS, I know the core position of content in website construction.The single page acts as the cornerstone for carrying corporate core information, service introduction, contact information, and other static content, and its effective presentation is crucial for users to understand the website and corporate image.pageListLabel, get and flexibly display all single-page content on the front end.
MasterpageListLabel, build clear single-page navigation and display.
In AnQiCMS, a single page is an important part of the website structure, commonly used for pages that do not require frequent updates and have relatively fixed content, such as 'About Us', 'Contact Information', and 'Terms of Service'.These page management is performed in the "Page Resources" module on the backend.pageList.
pageListThe main function of the label is to obtain all single page lists that have been created. AndarchiveListare different from the label,pageListThe design concept is comprehensive acquisition, not 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 the loop logic in the frontend template.
UsepageListThe basic syntax structure of the label is concise and clear:
{% pageList pages %}
{# 在这里循环展示每个单页面信息 #}
{% endpageList %}
Here,pagesis a customizable variable name that will carry all the single page object arrays obtained from the background. Through this variable, you can{% pageList %}and{% endpageList %}use between tagsforLoop to traverse and render the details of each single page.
pageListThe tag currently supports an optional parameter.siteIdThis parameter is mainly used for multi-site management scenarios. If you have created multiple sites in the AnQiCMS backend and need to call the single-page data of a specific site,siteIdSpecify it. However, for most single-site operators, this parameter is usually not required, and the system will automatically obtain the list of single-page lists for the current site.
InforIn the loop, each single page object (usually nameditem) includes a rich set of fields that you can call to fully display the properties of the page:
Id: The unique identifier of a single page.Title：The title of a single page, usually the main name that users see on the page.LinkPage access link.Description：The brief description of a single page, often used for SEO or list summaries.Content：Single page full content, usually containing HTML structure.Logo：Single page thumbnail large image address.Thumb：Single page thumbnail address.
Front-end Display Example: From Basic List to Smart Filtering
UnderstoodpageListThe basic usage and available fields, we can start with the actual display on the front-end. The following are some common application scenarios and code examples.
Create a simple single-page list
The most direct application is to list all single-page applications 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 traverse 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 pages
In practical applications, you may not want all single pages to be displayed in a specific list, for example, you may have a single page for internal use, or a page that is only displayed under certain conditions. At this time, you canforuseifFilter by condition. For example, if you need to exclude items with ID1The "About Us" page and pages 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 andDescriptionfield to provide more information.
Advanced display: Custom styles and layout
Sometimes, you may need to apply unique styles or layouts for certain specific single-page applications.forloop.Counterandforloop.RevcounterLoop auxiliary variables are very useful at this time.forloop.CounterRepresents the current loop index (starting from 1).forloop.RevcounterRepresents 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.featured类，以便通过CSS为其定义特殊的展示效果。同时，Description字段通过truncatechars过滤器进行了截断，确保在卡片布局中文字不会过长。
Content creation and operation considerations
As a website operator, when usingpageListWhen using tags, we also need to pay attention to some details of content creation and operation:
Firstly,Page title and descriptionThe input is crucial in the background.pageListThe label will directly retrieve this information and display 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,Management order of a single page.. AlthoughpageListIt does not directly provide sorting parameters, but the 'Display Order' field in the 'Page Management' section of AnQiCMS backend can control the default sorting of pages. This means that the order you adjust in the backend will usually also be reflected inpageListThe output, unless you have customized sorting logic in your frontend code.
Finally, distinguish betweensingle-page and article/productusage.pageListApplicable for static information pages display, while for dynamic updates such as blog posts, news, or product information, it should be usedarchiveListorcategoryListWait for more professional tags, as they provide more rich filtering, sorting, and pagination features to adapt to the characteristics of dynamic content.
By making reasonable use ofpageListLabel and its logical control pairing, you can easily build clear, beautiful and functional single-page display modules on AnQiCMS frontend, thus enhancing the information architecture and user experience of the website.
Common Questions and Answers (FAQ)
1.pageListCan the label fetch a single page specified by an ID?
pageListThe tag design is used to retrieve all or single-page lists filtered through a loop, it does not directly support retrieving a single page by ID. If you need to retrieve and display the details of a specific ID's single page, you should usepageDetailLabel, this label allows you to throughidortokenSpecify the parameter precisely to obtain the single page that needs to be accessed.
2. How to controlpageListThe display order of the single page labels obtained?
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' section of the AnQiCMS backend.The smaller the number, the closer it is displayed.pagesData is stored in a variable and then sorted on that variable in the custom logic of JavaScript or templates.
3.pageListandarchiveListWhat are the main differences, and when should they be used?
pageList主要用于获取和展示single pageThese pages are typically static, informative content such as 'About Us', 'Contact Information', 'Terms of Service', etc., which are updated less frequently and do not have complex structures such as categories, tags, etc.archiveListThen used for acquisition and displayArticles, productsauto dynamic content, they usually belong to a specific content model (such as article model, product model), and can have categories, tags, comments, custom fields, etc., and support more rich filtering, sorting, and pagination features. In short,pageListProcess static fixed content,archiveListProcess dynamic structured content.