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 pages", their content is fixed, they do not belong to conventional articles or product categories, but they are an indispensable part of the website.
When you have accumulated a large number of single pages on your website, you may wish to display a list of these single pages in a specific location, such as the bottom of the website, the sidebar, or even on a dedicated page, to facilitate browsing and searching for visitors.AnQiCMS provides a very intuitive and flexible way, allowing you to easily achieve 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 Resources" under the "Page Management" feature.Each single page has its own name, content, custom URL, and can even set a thumbnail 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 backend-created single pages on your website template, AnQiCMS provides a special template tag:pageList. This tag helps us get all the single page data and iterate it in the template.
通常，你会将这段代码放置在网站的公共区域，比如页脚（footer.htmlSide panel (aside.html), or a separate list page.
First, you need to use{% pageList pages %}Tag 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 throughfora loop.
Here is a basic example, it lists all the titles and links of single pages:
<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 page data, it assigns the page data topagesVariable.{% for item in pages %}and{% endfor %}This is a standard loop structure,itemThe variable represents a single page object in each loop.{{ item.Link }}Will output the access link of the current page.{{ item.Title }}: 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, you can display more information in the list according to your design requirements. In addition to the title and link, common fields include:
item.Description: Brief introduction of the single page.item.Thumb: Thumbnail address of the single page (if uploaded).item.Id: Unique ID of the single page.
For example, if you want to display a thumbnail and a brief introduction on a single page, you can modify the template code as follows:
<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 a single page has a thumbnail, to avoid displaying a blank when there is no image<img>Tag, to improve the page's tidiness
Exclude specific single pages
Sometimes you may not want all single pages to be displayed in the list, such as a single page used internally. AlthoughpageListThe tag itself does not provide an "exclude" parameter, but you can use the template's conditional judgment to skip specific pages in the loop.ifTag) in the loop to skip specific pages.
Assume you want to exclude single pages with IDs 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.
Call a single-page list in a multi-site environment.
If you are using the multi-site management feature of AnQiCMS and want to call the single-page list of another site in a template of a site,pageListLabels also providedsiteIdParameter. Just specify the target site ID to enable cross-site calling:
{# 调用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 alias and SEO:When creating a single-page in the background, it is advisable to set the "custom URL" and "SEO title", "keywords", and "description" properly, which can help search engines better understand and index your single-page, improving search rankings.Ensure the URL structure is concise and easy to understand, avoid being too long or containing irrelevant characters.
- Navigation integration:The single-page list is often used for website navigation or auxiliary navigation.Combining the "Website Navigation Settings" feature of AnQiCMS, manually adding important single pages to the navigation can further improve user access convenience.
- Template conventions:AnQiCMS Recommended Use
page/detail.htmlAs the default template for a single page. If you have created a custom template such aspage/about.htmlRemember to specify it in the single page editing interface in the background. - Description application:
item.DescriptionIt is particularly important in list display, as 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 attractive and informative introduction.
BypageListLabel, AnQiCMS allows website operators to easily display and manage single-page lists on the front-end template, whether as a supplement to website navigation or as part of the information display, it provides strong support.Make full use of these features, which will help you better organize website content and improve user experience.
Frequently Asked Questions (FAQ)
1. Can I control the sorting method of the single-page list?Yes, AnQiCMS allows you to set the 'Display Order' field when 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 label will follow the sorting rule you set in the background by default.
2. If the content of a single page is very long, get all single pages in the list pageitem.ContentWill it affect the page loading performance?It will not affect performance.pageListThe tag is in the loop,itemThe object does not contain completeContentfield data, it mainly providesId/Title/Link/Description/Thumbbasic information for lists. Only when the user clicks the link to enter the single page detail page,pageDetailThe page content will be loaded only when the label is clicked. This design avoids loading too much unnecessary data on the list page, thus ensuring the page loading speed.
3. How to make the single-page list display only specific "types" of pages instead of all single pages? For example, only display single pages related to "Company Introduction"?AnQiCMS's single-page feature does not have the concept of 'type' classification. All single pages exist as independent entities. If you need to categorize or group single pages for display, there are usually two strategies:
* **在后台手动指定：** 为每个单页面添加一个自定义字段，例如“页面组别”，并在其中填写“公司介绍”、“产品说明”等。然后，在模板中使用 `{% if item.CustomField == '公司介绍' %}` 进行条件判断，来只显示特定组别的页面。
* **利用页面ID进行选择性显示/排除：** 像文章中演示的那样，通过 `{% if item.Id == X %}` 或 `{% if item.Id != Y %}` 的方式，手动选择需要显示或排除的特定页面ID，以实现类似“类型”筛选的效果。