How to call and display the detailed content and images of a specific page in 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.The powerful template tag system of AnQiCMS, especially the tags designed for single-page design, 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 like "About Us", "Contact Information", or "Service Introduction".This page's content, images, SEO information, etc., can all be managed centrally through the backend.And when 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{{变量}}to output data,{% 标签 %}to handle logic and call functions. The core of calling single-page content ispageDetail.

core: usingpageDetailLabel to call single page details

pageDetailThe label is specifically used to obtain detailed data of a single page. Whether you want to obtain information about the current single page being visited, or specify the content of a certain single page, it can handle it.

In most cases, when a user directly accesses a single page (such as by clicking on a 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 additionally, and can use it directlypageDetailThe label can obtain various 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>

And 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 stores the obtained data inaboutUsPagethis variable, then through{{ aboutUsPage.Title }}and{{ aboutUsPage.Description }}to display the title and description.

Except through ID, if your single page has set a custom URL alias (you can set it in the background "Page Management" when editing a single page, for exampleabout-us), you can also retrieve and cycle through them using thetokento call with parameters:

{% 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 of a single page are its core components.pageDetailTags provide rich fields for a comprehensive display.

1. Display the content of a single page

The main 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.Therefore, when outputting on the front end, in order for these HTML tags to be correctly parsed and displayed with styles, we need to use|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,pageDetaillabel'sContentThe field will be translated by default. You can also add it manually if neededrender=trueorrender=falseParameter.

2. Call single page image

A single page usually includes a main image, thumbnails, and even a group of images. AnQiCMS provides corresponding fields for easy access.

  • Main image (Logo):It is usually used for the cover or the main visual element of a single page.

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

    Here we use oneifJudgment, to ensure that the image is output when it exists, to avoid invalid image links on the page.

  • 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 accessThumbthe field.

    {% 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, 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.CounterYou can get the index of the current element in the loop, which is convenient for adding differentalttext or other properties.

Comprehensive example: building a complete single-page detail page

Assuming we have a 'About Us' single page, ID 10, with a URL aliasabout-usWe would like to have a separate template filetemplate/default/page/detail.htmlThis is the default detail template path of AnQiCMS page where all information is displayed.

{% 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 page title as the page.titleCombine the website name to optimize SEO. Then display the main image, content, gallery, and description in order.