How to call and display the detailed content and images of a specific single page of AnqiCMS on the front page?

In AnQiCMS, it is actually much simpler than you imagine to call and display the detailed content and images of a specific single page on the front page.AnQiCMS powerful template tag system, especially for single-page design tags, allows you to easily achieve this.

Understanding the single page function of AnQiCMS

Firstly, we know that AnQiCMS provides an independent "page management" module, which allows us to create independent single pages such as "About Us", "Contact Information", or "Service Introduction".This single-page content, images, SEO information, etc., can all be centrally managed through the backend.While displaying on the front end, we just need to make good use of the template tags provided by AnQiCMS, and we can flexibly present these contents to the users.

AnQiCMS's template system uses syntax similar to Django, using{{变量}}Output data,{% 标签 %}to handle logic and call functions. For the call of single-page content, the core ispageDetailLabel.

Core: UsingpageDetailLabel call single page detail

pageDetailLabels are specifically used to retrieve single page details. Whether you want to get the current visited single page information or specify the content of a single page, it can handle it.

Under normal circumstances, when a user directly accesses a single page (such as by clicking on the navigation menu to enter the "About Us" page), AnQiCMS will automatically identify the single page ID of the current page. At this time, you do not need to specify the ID separately, and can directly usepageDetailLabel can be used to obtain information of the current single page.

For example, to display the title of the current single page on the page:

<div>单页标题：{% pageDetail with name="Title" %}</div>

If you need to call the content of a specific single-page (such as the "About Us" page with ID 10) on a non-single-page detail page (such as a module on the homepage), you can specify it like this:

{% pageDetail aboutUsPage with id="10" %}
<h2>{{ aboutUsPage.Title }}</h2>
<p>{{ aboutUsPage.Description }}</p>

Here, we useid="10"The parameter specifies the single-page ID to be called, and the obtained data is stored inaboutUsPagethis variable, and then displayed through{{ aboutUsPage.Title }}and{{ aboutUsPage.Description }}to show the title and description.

In addition to using the ID, if you have set a custom URL alias for your single page (you can set it in the "Page Management" section of the backend, for exampleabout-us), you can also usetokenby calling the parameter:

{% pageDetail contactPage with token="contact-us" %}
<h3>联系我们：{{ contactPage.Title }}</h3>
<div class="content">{{ contactPage.Content|safe }}</div>

Display detailed content and images of a single page

Detailed content and images on a single page are its core components.pageDetailTags provide rich fields, allowing you to display comprehensively.

1. Display content of a single page

The most important part of a single page is usually its main content.This content is edited by a rich text editor in the background and may contain HTML tags.|safeFilter.

{% pageDetail pageContent with name="Content" %}
<div class="page-content">
    {{ pageContent|safe }}
</div>

If you have enabled the Markdown editor in the background and want to render Markdown content on the front end,pageDetailTagsContentThe field will be converted by default. You can also add it manually if neededrender=trueorrender=falseParameter.

2. Call a single page image

Single page usually includes a main image, thumbnails, even an image group. AnQiCMS provides corresponding fields for easy access.

  • Main Image (Logo): 通常用于单页的封面或主要的视觉元素。

    {% pageDetail pageLogo with name="Logo" %}
{% if pageLogo %}
<img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}" class="page-main-image" />
{% endif %}

    这里我们使用了一个if 判断，确保图片存在时才进行输出，避免页面出现无效的图片链接。

  • Thumbnail (Thumb):If you have uploaded a thumbnail for a single page in the background or if the system has automatically generated a thumbnail, you can access it throughThumbfield call.

    {% pageDetail pageThumb with name="Thumb" %}
{% if pageThumb %}
<img src="{{ pageThumb }}" alt="{% pageDetail with name="Title" %}" class="page-thumbnail" />
{% endif %}

  • Slide group image (Images):Some single pages may need to display a set of images, such as a carousel or gallery.ImagesThe field will return an array of image URLs, and you need to useforLoop to traverse and display them.

    {% pageDetail pageGallery with name="Images" %}
{% if pageGallery %}
<div class="page-gallery">
    {% for imageUrl in pageGallery %}
    <img src="{{ imageUrl }}" alt="{% pageDetail with name="Title" %} - {{ forloop.Counter }}" />
    {% endfor %}
</div>
{% endif %}

    Hereforloop.CounterCan get the current element's index in the loop, convenient for adding differentalttext or other properties.

Comprehensive example: Build a complete single-page detail page

假设我们有一个“about us”的单页，ID为10，URL别名为about-us。我们希望在一个单独的模板文件template/default/page/detail.htmlThis shows all the information in the default detail template path of AnQiCMS single page.

{% extends 'base.html' %} {# 继承您的基础布局文件 #}

{% block title %}
    <title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}

{% block content %}
<div class="container page-container">
    <h1 class="page-title">{% pageDetail with name="Title" %}</h1>

    {# 显示主图片 #}
    {% pageDetail mainLogo with name="Logo" %}
    {% if mainLogo %}
    <div class="page-header-image">
        <img src="{{ mainLogo }}" alt="{% pageDetail with name="Title" %}" />
    </div>
    {% endif %}

    {# 显示单页内容 #}
    {% pageDetail pageContent with name="Content" %}
    {% if pageContent %}
    <div class="page-detail-content">
        {{ pageContent|safe }}
    </div>
    {% else %}
    <p>抱歉，此单页内容为空。</p>
    {% endif %}

    {# 显示幻灯片组图 #}
    {% pageDetail pageImages with name="Images" %}
    {% if pageImages %}
    <div class="page-image-gallery">
        <h3>相关图片：</h3>
        {% for imgUrl in pageImages %}
        <img src="{{ imgUrl }}" alt="{% pageDetail with name="Title" %}图集{{ forloop.Counter }}" class="gallery-item" />
        {% endfor %}
    </div>
    {% endif %}

    {# 还可以调用其他字段，例如描述或自定义字段 #}
    {% pageDetail pageDescription with name="Description" %}
    {% if pageDescription %}
    <div class="page-description">
        <p>简介: {{ pageDescription }}</p>
    </div>
    {% endif %}

    {# 如果有自定义字段，例如“团队成员”，且调用字段名为"team_members" #}
    {% pageDetail teamMembers with name="team_members" %}
    {% if teamMembers %}
    <div class="page-custom-field">
        <h4>团队成员: {{ teamMembers }}</h4>
    </div>
    {% endif %}

</div>
{% endblock %}

This code first calls the current single page's title as the page.titleCombine it with the website name to optimize SEO. Then sequentially display the main image, content, gallery, and description.