In website operation, we often need to create some independent pages, such as "About Us", "Contact Information", "Terms of Service", or some special introduction pages.These pages are usually called 'single-page', their content is fixed, and they do not belong to conventional articles or product categories, but they are an indispensable part of the website.
When your website accumulates a large number of single pages, you may wish to display a list of these single pages in a specific location, such as the footer of the website, the sidebar, or even on a dedicated page, for the convenience of visitors to browse and find them.AnQiCMS provides a very intuitive and flexible way for you to easily implement this requirement in website templates.
Single page management in AnQiCMS
In the AnQiCMS backend, you can create and edit these single pages through the "Page Management" function under "Page Resources".Each single page has its own name, content, custom URL, and even can be set with thumbnails and SEO information.These rich properties provide us with great flexibility when displaying on the front end.
Display single page list in AnQiCMS template
To display these background-created single-page presentations on your website template, AnQiCMS provides a special template tag:pageListThis tag helps us retrieve all the single-page data and iterate over it in the template.
通常，你会将这段代码放置在网站的公共区域，比如页脚（footer.html）、sidebar（aside.html），or an independent list page.
Firstly, you need to use{% pageList pages %}tags to get all single-page data.pagesis a temporary variable name, you can name it according to your preference. This variable will contain an array of single-page objects, and we can process these pages one by one through a loop.forWe can process these pages one by one through a loop.
The following is a basic example, which lists all single-page titles and links:
<nav>
<ul class="single-page-nav">
{% pageList pages %}
{% for item in pages %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endpageList %}
</ul>
</nav>
In this code block:
{% pageList pages %}: This is the key tag to get all single pages, which assigns page data topagesa variable.{% for item in pages %}and{% endfor %}This is a standard loop structure.itemThe variable represents a single page object individually in each loop.{{ item.Link }}It will output the access link of the current single page.{{ item.Title }}Will output the title of the current single page.
Enrich the display content of the single page list.
AnQiCMS provides multiple available fields for each single-page object, allowing you to display more information according to your design needs in the list. In addition to the title and link, common fields include:
item.DescriptionSummary of a single page.item.ThumbThumbnail URL of a single page (if uploaded).item.IdUnique ID of a single page.
For example, if you want to display a single page thumbnail and introduction in the list, you can modify the template code like this:
<div class="single-page-list">
{% pageList pages %}
{% for item in pages %}
<div class="page-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
{% if item.Thumb %} {# 判断是否有缩略图 #}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="page-thumb">
{% endif %}
<p>{{ item.Description }}</p>
</a>
</div>
{% endfor %}
{% endpageList %}
</div>
Here we have added{% if item.Thumb %}To determine if there is a thumbnail on a single page, to avoid displaying a blank space when there is no image.<img>Tag, improve the page's neatness.
Exclude specific single pages
Sometimes you may not want all single pages to be displayed in the list, for example, a single page used internally. AlthoughpageListThe tag itself does not directly provide an "exclude" parameter, but you can use the template's conditional judgment (iftag) to skip specific pages in the loop.
If you want to exclude single pages with ID 10 and 12, you can write it like this:
<nav>
<ul class="single-page-nav">
{% pageList pages %}
{% for item in pages %}
{% if item.Id != 10 and item.Id != 12 %} {# 排除ID为10和12的页面 #}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endif %}
{% endfor %}
{% endpageList %}
</ul>
</nav>
In this way, you can flexibly control which pages participate in display at the template level.
Calling a single-page list in a multi-site environment
If you are using the multi-site management feature of AnQiCMS and want to call a single-page list from another site's template in a site's template,pageListtags also providesiteIdParameters. Simply specify the ID of the target site to achieve cross-site calls:
{# 调用ID为2的站点的单页面列表 #}
<ul class="other-site-pages">
{% pageList pages with siteId="2" %}
{% for item in pages %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endpageList %}
</ul>
Practical Tips and Suggestions
- URL Aliases and SEO:When creating a single page in the background, setting 'Custom URL' and 'SEO Title', 'Keywords', and 'Description' reasonably can help search engines better understand and index your single page, improving search rankings.Ensure the URL structure is simple and easy to understand, avoiding being too long or containing irrelevant characters.
- Navigation Integration:The single-page list is often used for the main navigation or auxiliary navigation of a website.Combine the "Website Navigation Settings" feature of AnQiCMS, manually add important single-page websites to the navigation, which can further enhance the convenience of user access.
- Template Conventions:AnQiCMS recommends using
page/detail.htmlAs the default template for a single page. If you have created a custom template such aspage/about.htmlfor a specific single page, remember to specify it in the single page editing interface in the background. - The application of the content introduction:
item.DescriptionEspecially important in the list display, it allows visitors to quickly understand the content of the page and decide whether to click. When editing a single page in the background, be sure to write an engaging and informative introduction.
PasspageListTags, AnQiCMS allows website operators to easily display and manage single-page lists in frontend templates. Whether as a supplement to website navigation or as part of information display, it provides strong support.Flexibly utilize these features, which will help you better organize website content and enhance user experience.
Common Questions (FAQ)
1. Can I control the sorting method of the single-page list?Yes, AnQiCMS allows you to set the "Display Order" field while editing a single page through the "Page Management" interface in the backend.The smaller the number, the higher the page will be displayed in the list.pageListThe tags will follow the sorting rule you set in the background by default.
2. If the content of a single page is very long, whether getting all single pages in the list pageitem.Contentwill affect the page loading performance?will not affect performance.pageListwhen the tag is in the loop,itemAn object does not usually contain completeContentfield data, it mainly provides basic information likeId/Title/Link/Description/Thumblists. Only when the user clicks the link to enter the single page detail page,pageDetailTags must be selected to load the full content of the page. This design avoids loading unnecessary data on the list page, thereby ensuring the page loads quickly.
How to make a single-page list display only specific 'type' pages instead of all single pages? For example, only display single pages related to 'Company Introduction'?The single-page feature of AnQiCMS itself does not have the concept of 'type' categories; all single pages exist as independent entities. If you need to categorize or group the single pages for display, there are usually two strategies:
* **在后台手动指定：** 为每个单页面添加一个自定义字段，例如“页面组别”，并在其中填写“公司介绍”、“产品说明”等。然后，在模板中使用 `{% if item.CustomField == '公司介绍' %}` 进行条件判断，来只显示特定组别的页面。
* **利用页面ID进行选择性显示/排除：** 像文章中演示的那样，通过 `{% if item.Id == X %}` 或 `{% if item.Id != Y %}` 的方式，手动选择需要显示或排除的特定页面ID，以实现类似“类型”筛选的效果。