In a content management system, highlighting key content on the website is crucial for attracting users and increasing page views.AnQiCMS provides powerful document recommendation attribute features, allowing website operators to flexibly mark and display articles.This article will introduce in detail how to skillfully use these recommended attributes in the document list and detail page of the Anqi CMS, making your website content more vivid and guiding.

Understand the recommended attributes of Anqi CMS

The CMS of Anqi has designed various recommended attributes for each document, which can be selected during the background editing of documents.Top News[h]/[en]: Recommended [c]/Slide[f]/Recommended [a]/[en]: Scroll[s]/加粗[h]/[en]: 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, which is convenient for identification and invocation in the frontend template.

Show recommended attributes in the document list

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

1. Filter documents with specific recommended properties

If you want to display documents with the 'Headline' attribute only in a specific list area,flagParameters. 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"ensuringarchivesOnly documents marked as "Top" will be included in the variable. You can replace them as needed.hTo specify other property letters, or use commas to separate multiple properties (for exampleflag="hc"Filter documents that are both headlines and recommended).

2. Display the recommendation property tags of documents in the list items

If you wish to directly display the recommended attributes owned by each list article title (for example,archiveListtags.showFlag=trueParameter.

enableshowFlag=trueAfter, eachitemobject will contain aFlagfield. 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 use conditional judgment to display the corresponding Chinese or icon.

{% 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,item.Flag contains "c"Then judge 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 the user clicks to enter the details page of a document, it is also necessary to display its recommended properties below or on the side of the article title. This can be done byarchiveDetailLabel implementation.

archiveDetailThe label is used to obtain the document detail data of the current page. You can directly accessarchivethe object (usually provided by the system automatically) or usearchiveDetailTag to gainFlagfield.

<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, you can also usearchiveDetailthe tag to explicitly obtain, 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 use with tips

  • Style Customization: To make the recommended attribute more prominent, you can define unique CSS styles for different attributes, such as setting a red background for 'Headline', a green border for 'Recommended', or adding small icons to it.
  • Combined Query: You can useflagParameters withcategoryId(Category ID),order(Sort method) and otherarchiveListParameters are combined to achieve more accurate content filtering and display. For example, under a certain category, only the top 5 "recommended" articles sorted by views are displayed.
  • Exclude specific attributes: If you want to display a regular article list but exclude all 'headlines' articles, you can useexcludeFlag="h"Parameter.
  • Multi-attribute logic: An document may be marked as both "Top News" and "Recommendation",item.Flagand return combined strings like "hc". In the template, usecontainsThe operator can flexibly determine whether it contains a specific attribute.

The recommended attribute function of Anqi CMS provides rich tagging and display means for website content.Through the implementation methods mentioned above 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.

Common Questions and Answers (FAQ)

Q1: What do the letter symbols (such as[h]/[c]) represent in terms of meaning?

A1: These letters are preset quick tags in the AnQi CMS background, convenient for you to quickly select while editing documents. They represent:hrepresents the headlinecrepresents recommendation,f Represents a slide.a Represents special recommendation.s Represents scrolling.pRepresents an image.jRepresents a redirect. When you edit documents in the background, hovering over the recommended attribute options will also display the corresponding detailed explanation.

Q2: I only want to display the marks with properties '头条' and '推荐' on the list page, and I don't want to display other properties (such as '幻灯', '图片'). How can I achieve this in the template?

A2Even if the document has multiple recommended properties, you can selectively display them. In the template, you only need to make conditional judgments for the specific properties 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 %}

So, onlyitem.Flagwill show the corresponding mark when the string contains 'h' or 'c'. Other attributes without explicit judgment will not be displayed.

Q3: I setshowFlag=trueWhyitem.FlagIt returns a string of letters (such as "hc") instead of a Chinese description?

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