How to list and display all single-page titles and links?

AutoCMS provides a straightforward and powerful content management capability, where 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-page contents collectively at a certain location on the website, such as the footer navigation, sidebar, or a dedicated page index, AnQiCMS template tags can help you easily achieve this.

In AnQiCMS backend, single page content is created and maintained under 'Page Resources' -> 'Page Management'.You can easily add independent pages such as "About Us" and "Contact Information" to the website, and set their titles, contents, and URLs in detail.Once these single-page applications are created, we can use template tags to display them on the front-end pages.

UsepageListList all single pages with tags

To list all single-page titles and links in the front-end template, you need to use the built-in AnQiCMS.pageListTemplate tags. This tag is specifically designed to retrieve and iterate over all single-page data of the website.

pageListThe basic usage of the tag is very simple. It is usually used with other control flow tags (such asforLoop) combined to iterate through each single page information.

Firstly, you need to find the appropriate location in the template file where the single page list needs to be displayed. This could be on the websitebash.html（If you wish to display 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 piece of code:

  • {% pageList pages %}：This is the core tag, it retrieves all published single-page data on the website and assigns this data to a variable namedpages.
  • {% for item in pages %}：This is a loop statement, it iterates overpagesEach single page within the variable. In each iteration, the data of the current single page will be temporarily stored initemthe variable.
  • {{ item.Link }}This will output the complete URL link of the current single page.
  • {{ item.Title }}This will output the title of the current single page.
  • {% endfor %}and{% endpageList %}These are the corresponding end tags, marking loops andpageListThe scope of the tag.

Through this code, you can generate an unordered list containing all single-page titles and corresponding links. You can use it according to your website design,<div>/<span>Wrap these links with other HTML tags and apply the corresponding CSS styles to keep them consistent with the overall style of the website.

Flexible filtering and display

AnQiCMSpageListThe label also allows you to make some adjustments based on specific needs.

Exclude specific 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 can inforuse in a loop.ifCondition judgment to exclude them. Assume 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 obtain the ID and title of a single page, you can flexibly adjust the judgment conditions according to your actual needs.

Display more page information:Besides the title and link, each single page also contains other useful information, such as:

  • item.DescriptionSummary of a single page.
  • item.Thumb：Single page thumbnail address.
  • item.Content: Detailed content of the single page (usually not displayed directly 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 }}the usage to call. For example, displaying 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>

Through 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.

Common Questions (FAQ)

1. Where can I create and manage the single page of Security 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, and more.

2. How to control the display order of single pages?When editing any single page in the "Page ManagementThis field allows you to set a number, the smaller the number, the closer the single page will be displayed at the top when called in the list.You can adjust these numbers according to your needs to control the page sorting.

3. Besides the title and link,pageList标签还能显示单页面的哪些信息？Exceptitem.Title(Title) anditem.Link（链接），您还可以通过item变量访问和显示单页面的其他属性，例如：

  • item.IdUnique ID of a single page.
  • item.Description：单页面的简短描述。
  • item.Content：Single page detailed content (note that truncation or avoiding direct display may be required when displayed in a list).
  • item.Logo：Thumbnail and full image address for single page settings.
  • item.Thumb：Single page setting thumbnail address. You can optionally add this information to your template as needed.