How to manage and display independent single-page content for the `pageList` and `pageDetail` tags?

In website operation, in addition to dynamically updated articles or product lists, we often need to display some relatively fixed and independent content pages, such as "About Us", "Contact Information", "Privacy Policy", or "Service Introduction".These pages are usually referred to as "single-page content." AnQiCMS provides us with powerful and flexible tools for managing and displaying these pages, especiallypageListandpageDetailthese two core tags.

Single-page content: the foundation of the website

Single-page content is an indispensable part of a website, carrying important static information, and is crucial for users to understand the company, obtain help, or establish trust.In AnQiCMS, the management of single-page content is very intuitive.You can access the 'Page Resources' menu in the backend to enter the 'Page Management' module, where you can create, edit, or delete your single page.

When creating or editing a single page, you will see a series of practical fields:

  • Page name:This is the title that users see on the frontend page.
  • SEO title, keywords, single page introduction:These fields are specifically designed for search engine optimization to help your single-page obtain better performance in search results.
  • Custom URL:Allow you to set a concise, meaningful URL path for the page, for example, setting the URL for the "About Us" page/aboutThis is very beneficial for user memory and SEO.
  • Single page content:This is the main content of a single page, AnQiCMS usually provides a rich editor (such as support for Markdown) to help you create a page with pictures and text.
  • Single page template: This is the key that AnQiCMS provides for personalized display on a single page.You can specify a completely different template file for a specific page to achieve a unique visual and functional layout.

Understood the page management method on the back end, we can then turn our attention to how to display these contents through tags on the website front end.

pageDetailTags: finely display specific single page content

When you need to display all the content of a specific single page in detail,pageDetailTags are your helpful assistant. They allow you to extract any field from a single page as needed and display it in a template.

Basic usage:

pageDetailTags are usually withnameParameters are used together to specify the page fields you need to call. For example, to display the title of the current single page, you can write it like this:

<div><h1>{% pageDetail with name="Title" %}</h1></div>

Or, if you want to assign the title obtained to a variable for subsequent operations:

{% pageDetail pageTitle with name="Title" %}
<div><h1>{{ pageTitle }}</h1></div>

Display of commonly used fields:

pageDetailTags can obtain various details of a single page:

  • Title and description: Title(Page title),Description(Page introduction).
    
<h2>{% pageDetail with name="Title" %}</h2>
<p>{% pageDetail with name="Description" %}</p>
  • Page link: LinkThe field can obtain the complete URL of a single page.
    
<a href="{% pageDetail with name="Link" %}">访问此页面</a>
  • Main content: ContentThe field is the core part of a single page, it contains all the text, images, and other content you edit in the backend editor. Due toContentMay contain HTML code, therefore it usually needs to be配合 in output.|safeFilter to ensure that HTML content is parsed correctly and not escaped.
    
<div class="page-content">
    {% pageDetail pageContent with name="Content" %}
    {{ pageContent|safe }}
</div>
    It is worth mentioning that if your single-page content is written using a Markdown editor and you want the front-end to automatically render it into HTML, you canContentfield.render=trueParameter (still required)|safe):
    
<div class="page-content">
    {% pageDetail pageContent with name="Content" render=true %}
    {{ pageContent|safe }}
</div>
  • Image resources: Logo(Thumbnail of single-page large image),Thumb(Thumbnail of single-page) andImages(Single page slide group image) field, allows you to display images related to the page.
    
<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
{% pageDetail pageImages with name="Images" %}
<div class="banner-carousel">
    {% for imgUrl in pageImages %}
        <img src="{{ imgUrl }}" alt="图片描述" />
    {% endfor %}
</div>

Specify a specific single page:

In the single page detail page,pageDetailIt will default to fetching the information of the current page. But if you want to call the content of a specific single page on other pages (for example, displaying a brief introduction of "About Us" on the homepage), you can do so byidortokento specify the parameters:

{# 获取ID为1的单页面标题 #}
<h3>{% pageDetail with name="Title" id="1" %}</h3>
{# 获取自定义URL别名为'contact-us'的单页面内容 #}
<div class="contact-info">
    {% pageDetail contactContent with name="Content" token="contact-us" %}
    {{ contactContent|safe }}
</div>

pageListLabel: Flexible organization of single-page collections

Sometimes, you may need to display multiple single-page lists in different areas of the website (such as footer navigation, sidebar, or service list), at this timepageListTags come into play. It allows you to get a collection of a single page and traverse and display it by looping through the tags.

Basic usage:

UsepageListWhen labeling, you need to define a variable to store the list of single pages you have obtained, and then go throughforloop to process each single page one by one.

<ul>
{% pageList pages %}
    {% for item in pages %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
{% endpageList %}
</ul>

In this loop,itemA variable represents each single page in the list, you can use it topageDetailaccess itsId/Title/Link/Description/Logo/Thumbfields.

Useful scenario example:

  1. website footer navigation:Display links to pages such as “About Us”, “Privacy Policy”, “Terms of Service”, etc. at the bottom of the website.
    
<nav class="footer-nav">
    <ul>
    {% pageList legalPages %}
        {% for item in legalPages %}
        {# 可以根据页面ID或自定义URL排除某些不适合在页脚展示的页面 #}
        {% if item.Id != 99 %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endif %}
        {% endfor %}
    {% endpageList %}
    </ul>
</nav>
  2. Home page service list:Display a single-page list related to "Our Services" on the homepage, each service has a title, description, and thumbnail.
    
<div class="services-overview">
    {% pageList services %}
        {% for service in services %}
        <div class="service-item">
            <img src="{{ service.Thumb }}" alt="{{ service.Title }}" />
            <h3><a href="{{ service.Link }}">{{ service.Title }}</a></h3>
            <p>{{ service.Description }}</p>
        </div>
        {% endfor %}
    {% endpageList %}
</div>