How to display document recommendation attributes (such as headline, recommendation) on the document list or detail page?

It is crucial to highlight key content on a website in a content management system to attract users and increase page views.AnQiCMS provides a powerful document recommendation feature that allows website operators to flexibly tag and display articles.This article will introduce in detail how to cleverly use these recommended attributes in the document list and detail page of Anqi CMS, making your website content more vivid and guiding.

Understand the recommended attributes of Anqi CMS

AnQi CMS has designed a variety of recommended attributes for each document, which can be selected during the background editing of documents. They include:Headline[h]/Recommended[c]/Slide[f]/Special recommendation[a]/Scroll[s]/Bold[h]/Image[p]/Jump [j]It is worth noting that these properties can be selected individually, in groups, or not selected at all. Each letter represents a specific property, making it convenient for identification and invocation in front-end templates.

These attributes are not just simple tags, they are the carrier of content operation strategy.For example, you can mark important news as 'headline' and display it in the most prominent position on the homepage;Mark suitable image articles as 'Slideshow' to display in the slideshow area;Or mark high-quality in-depth articles as 'Recommended', highlighting them in the sidebar or related recommendation modules.

Display recommended properties in the document list

On the list page of the website, such as category lists, search result pages, or article modules on the homepage, we often need to filter content based on recommended attributes or directly display the recommended attributes next to each article title. This is mainly achieved byarchiveListthe tag.

1. Filter documents with specific recommended properties

If you want to display documents with the "headline" property only in a specific list area, you can useflagParameters. For example, to list the latest 5 top articles in a block:

{% archiveList archives with type="list" limit="5" flag="h" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">{{item.Title}}</a>
        </li>
    {% empty %}
        <li>暂无头条文章</li>
    {% endfor %}
{% endarchiveList %}

here,flag="h"EnsuredarchivesThe variable will only contain documents marked as 'Top'. You can replace them as needed.hFor other attribute letters, or use commas to separate multiple attributes (such asflag="hc"Filter documents that are both headlines and recommended).

2. Display the recommended attribute tags of documents in the list item.

If you want to display the recommended attributes of each list article directly next to its title (for example, archiveListusingshowFlag=trueParameter.

OnshowFlag=trueAfter, each in the loopitemThe object will contain oneFlagfield. ThisFlagThe field will return a string that contains the letter abbreviations of all selected recommended properties (for example, "hc" indicates that the document is marked as both "Headline" and "Recommended").You can display the corresponding Chinese or icon through conditional judgment.

{% archiveList archives with type="list" limit="10" showFlag=true %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                {%- if item.Flag contains "h" %}
                    <span style="color: red; margin-right: 5px;">[头条]</span>
                {%- endif %}
                {%- if item.Flag contains "c" %}
                    <span style="color: green; margin-right: 5px;">[推荐]</span>
                {%- endif %}
                {{item.Title}}
            </a>
        </li>
    {% empty %}
        <li>暂无文章</li>
    {% endfor %}
{% endarchiveList %}

In the above example,item.Flag contains "h"Used to determine whether the current document contains the attribute “Top News”,item.Flag contains "c"Then determine whether it contains the 'Recommended' attribute. You can add styles or icons for different attributes according to your actual needs.

Display the recommended attribute on the document detail page.

When a user clicks to enter the details page of a document, sometimes it is also necessary to display the recommended properties owned by this article below the title or in the sidebar. This can be done byarchiveDetailTag implementation.

archiveDetailThe label is used to obtain the document detail data of the current page. You can directly access it on the document detail pagearchivean object (usually provided by the system) or usearchiveDetailtags to retrieveFlagfield.

<article>
    <h1>{{archive.Title}}</h1>
    <p class="article-meta">
        发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}
        <span> | </span>
        浏览量：{{archive.Views}}
        <span> | </span>
        <!-- 显示推荐属性 -->
        {%- if archive.Flag contains "h" %}
            <span style="color: red; margin-left: 5px;">[头条]</span>
        {%- endif %}
        {%- if archive.Flag contains "c" %}
            <span style="color: green; margin-left: 5px;">[推荐]</span>
        {%- endif %}
        {%- if archive.Flag contains "f" %}
            <span style="color: blue; margin-left: 5px;">[幻灯]</span>
        {%- endif %}
        <!-- 更多属性判断... -->
    </p>
    <div class="article-content">
        {{archive.Content|safe}}
    </div>
</article>

Here, we directly go througharchive.FlagTo determine the properties of the current document. Ifarchivethe object is not available in the current template context, it can also be usedarchiveDetailto explicitly retrieve using the tag, for example:

{% archiveDetail currentDocFlag with name="Flag" %}
<p class="article-meta">
    <!-- ...其他信息... -->
    {%- if currentDocFlag contains "h" %}
        <span style="color: red; margin-left: 5px;">[头条]</span>
    {%- endif %}
    <!-- 更多属性判断... -->
</p>

Flexible application with tips

• Style customizationTo make the recommended properties more prominent, you can define unique CSS styles for different properties, such as setting a red background for "headline", a green border for "recommended", or adding small icons to it.
• Combined Query: You can useflagThe parameter withcategoryId(Category ID),order(Sorting Methods) and otherarchiveListUsing parameters together to achieve more accurate content filtering and display. For example, under a certain category, only display the top 5 'recommended' articles sorted by views.
• Exclude specific attributes: If you wish to display a regular article list but exclude all 'headlines' articles, you can useexcludeFlag="h"Parameter.
• Multi-attribute logic: A document may be tagged as both 'headline' and 'recommended',item.FlagIt will return a combined string like 'hc'. In the template, usecontainsThe operator can flexibly determine whether it contains a specific attribute.

The recommended attribute feature of AnQi CMS provides rich tagging and display methods for website content.By the above implementation methods in the document list and detail pages, you can easily manage and highlight important content, enhance user experience, and effectively guide website traffic, ultimately helping you achieve better website operation results.

Frequently Asked Questions (FAQ)

Q1: What do the letter marks recommended by Anqi CMS (such as[h]/[c]) represent?

A1: These letters are the quick tags preset in the Anqi CMS background, convenient for you to quickly select when editing documents. They represent:hrepresenting the headline,cRepresents recommendation,frepresenting slides,aRepresents recommended,sRepresents scrolling,pRepresents image,jRepresents a jump. When you edit documents in the background, you can also see the corresponding detailed explanation by hovering over the recommended attribute options.

Q2: I only want to display the 'Headline' and 'Recommendation' property tags on the list page, and do not want to display other properties (such as 'Slideshow', 'Image'), how can I implement it in the template?

A2: Even if the document has multiple recommended attributes, you can optionally display them. In the template, you only need to make conditional judgments for the specific attributes you want to display. For example:

{%- if item.Flag contains "h" %}
    <span class="flag-headline">[头条]</span>
{%- endif %}
{%- if item.Flag contains "c" %}
    <span class="flag-recommend">[推荐]</span>
{%- endif %}

This, onlyitem.FlagWill display the corresponding mark when the string contains 'h' or 'c'. Other attributes without explicit judgment will not be displayed.

Q3: I set upshowFlag=trueWhy,item.FlagIt returns a string of letters (such as "hc") instead of a Chinese description?

A3:item.FlagThe field returns a string that contains the English abbreviations of all selected recommended properties. This is to provide the greatest flexibility