In website operation, single-page content (such as "About UsThey are usually carriers for displaying corporate core information, brand stories, or specific service details.pageListandpageDetailTwo core tags make content organization and presentation both flexible and convenient.

Backend management for single-page content

In AnQiCMS backend, single-page content is centrally managed under "Page Resources" -> "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 set for search engine optimization, and you can set TDK (Title, Description, Keywords) separately for each single page to improve the page's performance in search engines.
  3. Custom URLSet a concise and meaningful URL alias for the page, which is not only helpful for user memory but also an important aspect of SEO-friendliness.The system will automatically generate a pinyin URL based on the page name, and you can also manually modify it.
  4. Single page introductionSummary of page content, which can be used for list display or Meta Description.
  5. Single page content：This 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 Order：Control 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 background.contact.htmlEnsure that the file exists in your template design package. AnQiCMS supports it by default.page/detail.htmlorpage/detail-{单页ID}.htmlSuch template naming conventions.
  8. Banner image, thumbnail：Upload images related to the page theme, used to display an eye-catching Banner at the top of the page or as a thumbnail on list pages.

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

pageDetailTag: Fine-grained display of single page content

When we want to display a specific single-page content on the website front-end,pageDetailThe label is your powerful 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" page to show contact information and a map.
  • Display a detailed introduction page for a service.

Usage:pageDetailThe core of the label lies in passing throughnameParameters specify the specific fields 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.
  • Link：Page link.
  • Description：Page description.
  • Content：Page main content, usually requires combining.|safea filter to render the HTML correctly.
  • Logo：Main image or thumbnail of the page.
  • Images：The Banner image collection of the page, usually an array, can be accessed.[0]Get the first one.
  • UpdatedTime,CreatedTime：The creation and update time of the page, can be formatted for display using.formatparameter.

pageList标签：Flexible Display of Multiple Page Links

If you need to list multiple single pages on a page, for example, to display all service page links at the bottom of the website, or to show a 'quick links' list in the sidebar,pageListThe label comes into play. It retrieves all the single pages you create in the background.

Main Purpose:

  • Display navigation links to common pages such as "Services
  • Create a list pointing to a key single page in the sidebar.
  • Build a “All pages”}]