How to display the detailed content of a specified article or product in AnQiCMS?

AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides an intuitive way to manage and display various content.When you want to display a specific article, product details, or any independent content page created through a content model on a website, the key is to make use of its powerful template tag features.

AnQiCMS calls the independent displayable content on the website, such as articles and products, 'documents' (archive).This unified design makes it very consistent and convenient to manage and call the detailed information of these contents.No matter what you want to display, whether it is a blog post, product details, or specific event information, it can be achieved through the same logic and tags.

Core tags:archiveDetailUsage of

To display the detailed content of a specified document, we mainly rely on the AnQiCMS providedarchiveDetailtag. This tag is specifically used to obtain detailed data for a single document.

In the template, if you are already on the detail page of a document, the system will automatically recognize and load the data of the current document, at this point you can directly go through{{ archive.字段名 }}The way to call the various information of the document. For example, to display the title of the current document, you can directly use{{ archive.Title }}.

If you need to explicitly retrieve the data of a specific document (not the data of the current page document) or to retrieve fields outside the defaultarchiveobject,archiveDetailThe label is particularly important. Its basic usage is:

{% archiveDetail 变量名称 with name="字段名称" id="文档ID" %}

Or through a URL alias:

{% archiveDetail 变量名称 with name="字段名称" token="文档URL别名" %}

here,变量名称is an optional parameter, if set, you can assign the obtained data to this variable and use it later.nameThe attribute is used to specify the specific field you want to retrieve, for exampleTitle(Title),Content(Content),Description(Description) and others.idortokenis used to precisely specify the content of the document you want to display.

Common fields called:

The AnQiCMS documentation includes a series of commonly used fields, such as:

  • Title (Title): {% archiveDetail with name="Title" %}or{{ archive.Title }}
  • Content (Content): {% archiveDetail with name="Content" %}or{{ archive.Content }}
  • Summary (Description): {% archiveDetail with name="Description" %}or{{ archive.Description }}
  • Link (Link): {% archiveDetail with name="Link" %}or{{ archive.Link }}
  • Publish time (CreatedTime):Need to cooperatestampToDateFunction to format, for example{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04") }}
  • Cover main image (Logo): {% archiveDetail with name="Logo" %}or{{ archive.Logo }}
  • Thumbnail (Thumb): {% archiveDetail with name="Thumb" %}or{{ archive.Thumb }}
  • Category information (Category): {{ archive.Category.Title }}Get the category title or use{% categoryDetail with name='Title' id=archive.CategoryId %}

Pay special attentionContentField display:

When you display the document'sContentWhen content contains HTML tags, in order to ensure that the browser can correctly parse and render these contents, it is usually necessary to add|safeFilter. Moreover, if your content has enabled the Markdown editor,archiveDetailTags also supportrenderparameters to control whether Markdown is converted to HTML, as well aslazyParameters are used for lazy loading of images. For example:

{# 显示文档内容并解析HTML，如果开启Markdown则渲染，且图片支持data-src懒加载 #}
{% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
{{ articleContent|safe }}

Custom fields of content model display:archiveParamsTag

AnQiCMS has a major advantage in its flexible content model.You can add custom fields for different content models (such as article models, product models) in the background.archiveParams.

If you want to iterate and display all custom parameters of a document, you can do it like this:

{% archiveParams params %}
    {% for item in params %}
        <div>
            <span>{{ item.Name }}：</span>
            <span>{{ item.Value }}</span>
        </div>
    {% endfor %}
{% endarchiveParams %}

here,item.NameIs the name of a custom field (such as "article author"),item.ValueIs the corresponding value of the field.

If you know the name of the custom field (for example, you have added a field namedauthorCustom field), you can also call it directly througharchiveDetailTag to call it:

{# 直接获取名为'author'的自定义字段的值 #}
<div>作者：{% archiveDetail with name="author" %}</div>

Display the detailed content of a single page (Page):pageDetailTag

In addition to articles and products of this kind of "document", AnQiCMS also supports creating independent "pages" (such as "About Us", "Contact Us"). The logic for displaying the detailed content of a page is very similar to that for displaying documents, usingpageDetail.

The usage is consistent witharchiveDetailSimilarly, it can be accessed byidortokenSpecifying a single page and usingnameProperties to obtain specific fields (such asTitle/Content/Description/Logo/Imagesetc.).

{# 获取ID为5的单页标题 #}
{% pageDetail pageTitle with name="Title" id="5" %}
<h1>{{ pageTitle }}</h1>

{# 获取当前单页的内容 #}
{% pageDetail pageContent with name="Content" %}
<div>{{ pageContent|safe }}</div>

An example combining practical scenarios

Display of general article detail page:

Assuming you want to build a common article detail page, including title, category, publish date, tags, views, and main content.

<article>
    <h1>{{ archive.Title }}</h1>
    <div>
        <span>分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>
        <span>发布于：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
        <span>浏览量：{{ archive.Views }}次</span>
        <span>标签：
            {% tagList tags with itemId=archive.Id limit="10" %}
                {% for tag in tags %}
                    <a href="{{ tag.Link }}">{{ tag.Title }}</a>
                {% endfor %}
            {% endtagList %}
        </span>
    </div>
    <div class="content-body">
        {% archiveDetail docContent with name="Content" render=true lazy="data-src" %}
        {{ docContent|safe }}
    </div>
</article>

Product detail page display:

For the product detail page, in addition to the title and description, it may also be necessary to display custom product parameters (such as model, brand, color) and contact information.

`twig

<div class="product-images">
    <img src="{{ archive.Logo }}" alt="{{ archive.Title }}" />
    {# 如果有其他产品图片，可以通过 archive.Images 循环展示 #}
    {% if archive.Images %}
        {% for img in archive.Images %}
            <img src="{{ img }}" alt="{{ archive.Title }} - 更多图片" />
        {% endfor %}
    {% endif %}
</div>

<div class="product-info">
    <h1>{{ archive.Title }}</h1>
    <p class="description">{{ archive.Description }}</p>

    <div class="product-specs">
        <h3>产品参数：</h3>
        {% archiveParams params %}
            {% for item in params %}
                <div>
                    <span>{{ item.Name }}：</span>
                    <span>{{ item.Value }}</span>
                </div>
            {% endfor %}
        {% endarchiveParams %}
    </div>

    <div class="contact-info">
        <p>如需购买或咨询，请联系：</p>
        <p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name="Cellphone" %}</a></p