How to manage and display independent single-page content for `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 UsThese pages are usually called "single-page content".pageListandpageDetailThese core tags.

Single-page content: the cornerstone of the website

The single-page content is an indispensable part of the website, carrying important static information. It is the key to users understanding the company, obtaining help, or building trust.In AnQiCMS, the management of single-page content is very intuitive.You can access the 'Page Resources' menu in the background 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 front-end page.
  • SEO title, keywords, single page introduction:These fields are designed for search engine optimization, helping your single-page application perform better in search results.
  • Customize URL:Allows you to set a simple, meaningful URL path for the page, for example, setting the URL of the "About Us" page to/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 for personalized display provided by AnQiCMS for single-page websites.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 of the background, and we can then turn our attention to how to display these contents on the website frontend through tags.

pageDetailTags: Refine the display of specific single-page content

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

Basic usage:

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

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

Or, if you want to assign the obtained title to a variable and then perform subsequent operations:

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

Display of common fields:

pageDetailTags can obtain various detailed information from a single page:

  • Title and Description: Title(Page Title)、Description(Page Summary)。
    
<h2>{% pageDetail with name="Title" %}</h2>
<p>{% pageDetail with name="Description" %}</p>
  • Page Link： LinkField can get the complete URL of a single page.
    
<a href="{% pageDetail with name="Link" %}">访问此页面</a>
  • Main Content： ContentThe field is the most core part of the single page, it includes all the text, images, and other content you edit in the backend editor. BecauseContentMay contain HTML code, so it usually needs to be outputted in conjunction with|safea filter to ensure that HTML content is parsed correctly rather than displayed as 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 canContentadded after the fieldrender=trueParameter (still need|safe):
    
<div class="page-content">
    {% pageDetail pageContent with name="Content" render=true %}
    {{ pageContent|safe }}
</div>
  • Image resources: Logo(Thumbnail large image of single page) andThumb(Thumbnail of single page) andImagesThe field (single-page slide group image) 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:

On the single page detail page,pageDetailIt will default to get the information of the current page. But if you want to call the content of a specific single page on another page (for example, displaying a brief introduction of "About Us" on the homepage), you canidortokenParameters to specify:

{# 获取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>

pageListTags: Flexible organization of single-page collections

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 timepageListThe label comes into play. It allows you to get a collection of a single page, and traverse and display it by looping through the labels.

Basic usage:

UsepageListLabel, you need to define a variable to store the single page list retrieved, and then process each single page one by one.forLoop 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,itemThe variable represents each single page in the list, you can access it like thispageDetailSimilarly,Id/Title/Link/Description/Logo/Thumband other fields.

Useful scenario examples:

  1. Website footer navigation:Display links to pages such as "About Us
    
<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 of "Our Services" on the homepage, each service includes 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>