In website operation, single-page content (such as "About Us", "Contact Information", "Service Introduction", etc.) plays a vital role.They are usually carriers for displaying corporate core information, brand stories, or specific service details.To efficiently manage and display these pages, AnQiCMS providedpageListandpageDetailTwo core tags make the organization and presentation of content both flexible and convenient.

Background management of single-page content.

In the AnQiCMS backend, single-page content is centrally managed under 'Page Resources' under 'Page Management'.Here, you can create, edit, delete, and configure various settings for a single page.

Create or edit a single page, the system provides a wealth of fields for you to fill in:

  1. Page NameThis is the main title of the page, also the name displayed to the user on the front end.
  2. SEO title, keywords, descriptionThese are for search engine optimization, you can set TDK (Title, Description, Keywords) separately for each single page to improve the page's performance in search engines.
  3. Custom URL: Set a concise and meaningful URL alias for the page, which is not only helpful for user memory but also an important aspect of SEO-friendly.The system will automatically generate a pinyin URL based on the page name, and you can also manually modify it.
  4. Single page introductionA brief summary of the page content, which can be used for list display or Meta Description.
  5. Single page contentThis is the main content of the page, AnQiCMS provides a powerful rich text editor that supports mixed text and images, and even supports Markdown syntax after enabling the Markdown editor, making content creation more efficient.
  6. Display orderControl the order of the single page in the list.
  7. Single page template: You can specify an independent template file for a specific single page. For example, to design a dedicated layout for the "Contact Us" page, simply select the corresponding template file in the backend (such ascontact.htmlEnsure that the file exists in your template design package. AnQiCMS supports this by default.page/detail.htmlorpage/detail-{单页ID}.htmlSuch template naming conventions.
  8. Banner image, thumbnailUpload images related to the page theme, used to display an eye-catching Banner at the top of the page or as a thumbnail on the list page.

These backend settings are the foundation for the front-end tags to be flexible in calling and displaying.

pageDetailTag: Fine-grained display of individual page content.

When we want to display a specific single-page content on the website front end,pageDetailThe tag is your helpful assistant. It allows you to accurately retrieve and display any field of the page based on the page ID or a custom URL alias (token).

main purpose:

  • Build the 'About Us' page to display the company profile.
  • Create the 'Contact Us' page to show contact information and a map.
  • Show a detailed introduction page for a service.

Usage method:pageDetailThe core of the tag lies in passing throughnameThe parameter specifies the specific field you want to retrieve.

{# 假设这是“关于我们”页面的模板文件 (page/detail.html 或 page/about-us.html) #}
<article>
    <h1 class="page-title">{% pageDetail with name="Title" %}</h1> {# 获取当前页面的标题 #}
    <div class="page-meta">
        <span>更新时间：{% pageDetail with name="UpdatedTime" format="2006-01-02" %}</span>
    </div>
    <div class="page-content">
        {# 获取页面主体内容，使用 |safe 过滤器确保HTML正确渲染 #}
        {%- pageDetail pageContent with name="Content" %}
        {{ pageContent|safe }}
    </div>

    {# 假设页面设置了Banner图，获取第一张作为背景 #}
    {%- pageDetail bannerImages with name="Images" %}
    {%- if bannerImages %}
    <div class="page-banner" style="background-image: url({{ bannerImages[0] }});"></div>
    {%- endif %}

    {# 您也可以指定其他页面的内容，例如，在首页展示ID为1的单页面简介 #}
    <div class="homepage-about-snippet">
        <h2>{% pageDetail with name="Title" id="1" %}</h2>
        <p>{% pageDetail with name="Description" id="1" %}</p>
        <a href="{% pageDetail with name="Link" id="1" %}">了解更多</a>
    </div>

    {# 或者通过自定义URL别名来获取，例如别名为'contact-us'的联系页面 #}
    <div class="contact-info">
        <h3>联系我们</h3>
        <p>地址：{% pageDetail with name="Address" token="contact-us" %}</p>
        <p>电话：{% pageDetail with name="Phone" token="contact-us" %}</p>
    </div>
</article>

Key field:

  • Id: Single page ID.
  • Title: Page title.
  • LinkPage link.
  • DescriptionPage description.
  • ContentPage main content, usually need to combine|safewith a filter to correctly render the HTML.
  • LogoPage main image or thumbnail.
  • Images: The page's Banner gallery, usually an array, can be[0]get the first one.
  • UpdatedTime,CreatedTime: The creation and update time of the page, can beformatformatted using the parameter.

pageListLabel: Flexible display of multiple page links

If you need to list multiple single pages on a page, such as displaying all service page links at the bottom of the website, or showing a 'quick links' list in the sidebar,pageListLabels come in handy. It retrieves all the single pages you create in the background.

main purpose:

  • Display navigation links to common pages such as "Services", "About", etc. at the bottom of the website.
  • Create a list in the sidebar that links to key single pages.
  • Build a "All Pages"