AnQi CMS provides a intuitive and powerful content management capability, among which the single-page feature is an ideal choice for building independent pages such as 'About Us', 'Contact Information', or 'Privacy Policy'.When you need to display the titles and links of these single pages collectively at a certain location on the website, such as the footer navigation, sidebar, or a special page index, AnQiCMS template tags can help you easily achieve this.
In AnQiCMS backend, the single page content is created and maintained under "Page Resources" -> "Page Management".You can easily add independent pages like "About Us" and "Contact Information" to your website, and set their titles, content, and URLs in detail.Once these single pages are created, we can use template tags to display them on the frontend page.
UsepageListTag list all single pages
You need to use AnQiCMS built-in to list all single page titles and links in the front-end templatepageListTemplate tag. This tag is specifically designed to retrieve and traverse all single-page data of a website.
pageListThe basic usage of the tag is very simple. It is usually used with other control flow tags such asforCombine the loop to traverse the information of each single page.
Firstly, you need to find the appropriate position in the template file where you want to display the list of single pages. This may be on the website'sbash.html(If you want it to be displayed on all pages, such as the footer),index.html(Home page), or any other specific page template.)
Next, you can use it like this:pageListTags:
<div class="footer-links">
<h4>快速链接</h4>
<ul>
{% pageList pages %}
{% for item in pages %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endpageList %}
</ul>
</div>
Let's break down this code:
{% pageList pages %}This is the core tag, it retrieves all the single-page data published on the website and assigns it to a variable namedpages.{% for item in pages %}This is a loop statement, it traversespagesEach single page in the variable. In each iteration, the data of the current page will be temporarily stored initemthe variable.{{ item.Link }}This will output the complete URL link of the current page.{{ item.Title }}This will output the title of the current single page.{% endfor %}and{% endpageList %}These are the corresponding end tags, marking the loop andpageListScope of the tag.
By this code, you can generate an unordered list containing all single page titles and corresponding links. You can use them according to your website design, with<div>/<span>Or use other HTML tags to wrap these links and apply the corresponding CSS styles to keep them consistent with the overall style of the website.
Flexible filtering and display
AnQiCMS'pageListLabels also allow you to make some adjustments based on specific needs.
Exclude certain pages:Sometimes you may not want all single pages to be displayed, such as some internal test pages or pages that are not displayed in the public navigation. You canforUsing a loopifConditional judgments to exclude them. Suppose you want to exclude the single page with ID 1, or the single page with the title "Test Page":
<div class="footer-links">
<h4>常用页面</h4>
<ul>
{% pageList pages %}
{% for item in pages %}
{# 排除ID为1的页面，或者标题为“测试页面”的页面 #}
{% if item.Id != 1 and item.Title != "测试页面" %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endif %}
{% endfor %}
{% endpageList %}
</ul>
</div>
here,item.Idanditem.TitleUsed to retrieve the ID and title of a single page, you can flexibly adjust the judgment conditions according to your actual needs.
Display more page information:In addition to the title and link, each single page also contains other useful information, such as:
item.Description: Brief introduction of the single page.item.Thumb: Thumbnail address of a single page.item.Content: Detailed content of the single page (usually not displayed in the list, but available when needed).
If you wish to display this additional information in the list, you can refer to{{ item.Title }}and{{ item.Link }}to call the usage. For example, to display thumbnails and summaries:
<div class="page-highlights">
{% pageList pages %}
{% for item in pages %}
{% if item.Thumb %} {# 检查是否有缩略图 #}
<div class="page-card">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
</a>
</div>
{% endif %}
{% endfor %}
{% endpageList %}
</div>
By using these flexible tag combinations, you can easily display all or specific single-page content in the way you want in AnQiCMS, thereby enhancing the usability and user experience of the website.
Frequently Asked Questions (FAQ)
1. Where can I create and manage the single page of AnQi CMS?You can find the 'Page Management' option under the 'Page Resources' menu in the AnQiCMS backend.Here, you can create, edit, delete, and manage all single-page content, including their titles, content, URL aliases, SEO information, etc.
2. How to control the display order of single pages?When editing any single page in the "Page Management" section of the background, you will see a "Display Order" field.This field allows you to set a number, the smaller the number, the earlier the single page will be displayed in the list when called.You can adjust these numbers according to your needs to control the page sorting.
3. Besides the title and link,pageListWhat information can the label display on a single page?exceptitem.Title(Title) anditem.Link(Link), you can also access it throughitemVariable access and display other properties of a single page, such as:
item.Id: Unique ID of the single page.item.Description: Brief description of a single page.item.Content: Detailed content of a single page (note that it may need to be truncated or avoided when displayed in a list).item.Logo: Address of the thumbnail and large image set for a single page.item.Thumb: Thumbnail address of the single page setting. You can optionally add this information to your template as needed.