How to implement the 'Recommended Attribute' feature of AnQiCMS for displaying article categories on the front end (such as headlines, recommendations)?

AnQiCMS provides a rich and flexible set of tools for organizing and displaying website content, among which the 'recommended attribute' feature is a very practical design.It allows us to add special tags to articles for classification display on the website frontend, such as highlighting "headlines" articles or displaying "recommended" content in specific areas.

Understanding 'Recommended Attribute'

AnQiCMS's 'Recommended Attribute' is essentially a metadata tag for articles, used to describe the characteristics or importance of the article.In the background content management interface, when you edit or publish an article, you can find the "Recommended Properties" setting item on the article detail page.Here are various predefined properties, each with a concise code:

  • Headline [h]: This is usually used for the most important and most concerned articles on the website.
  • Recommend [c]: Refers to high-quality content edited or recommended by the system.
  • Slide [f]: Articles suitable for appearing in the home page carousel or other image display areas.
  • Special recommendation [a]: Content with special recommendation value.
  • Scroll [s]: Suitable for displaying articles in scrolling news feeds or bulletin boards.
  • Bold [h]: Emphasize the article title to make it more prominent (note that the code is the same as "top story", usually distinguished by style).
  • Image [p]: Indicates that the article contains important images, suitable for image lists or galleries.
  • Jump [j]: Usually used for external links or jump articles that require special handling.

You can select one or more recommended attributes for an article.By checking these properties, you can tag the article, making it convenient for precise calling and display in the frontend template.

Implementation principle in front-end templates.

To display articles on the front end of the website based on these recommended properties, the core lies in using the AnQiCMS providedarchiveListTemplate tag. This tag is used by AnQiCMS to obtain article lists, and it can meet various article filtering needs through flexible parameter settings.

Among them,flagThe parameter is specifically used to filter articles with specific 'recommended attributes.' When you need to display a certain type of recommended article, just specify the correspondingarchiveListtag.flagcode.

For example, if you want to display all articles marked as "top news" in a region, you will write it in thearchiveListtag like this:flag="h".

It should be noted that in a singlearchiveListThe tag call can only specify oneflagFilter by property. If your website needs to display different recommended article lists at the same time (for example, one area displays "Headline" and another area displays "Recommended"), then you need to use differentarchiveListtags to obtain.

OncearchiveListThe tag retrieves the list of articles, we usually useforLoop through the tag to traverse each article's data, and display its title, link, introduction, thumbnail, and other information one by one on the web page.

Practice: Displaying articles in categories on a webpage

Let's look at some specific examples to see how to implement the classification display of articles in the AnQiCMS template.

Assuming we want to display the 'Headline Articles' list and the 'Recommended Articles' list in different areas of the website homepage.

1. Display the 'Headline Articles' list

We may want to display the latest 5 "top" articles at the top of the page or in a prominent position.

In your template file (for exampleindex.htmlorpartial/main_content.htmlIn the brackets, you can write the code like this:

<section class="headline-articles">
    <h2>头条文章</h2>
    <ul>
        {% archiveList headArticles with type="list" flag="h" limit="5" %}
            {% for item in headArticles %}
            <li>
                <a href="{{item.Link}}">
                    {% if item.Thumb %}
                        <img src="{{item.Thumb}}" alt="{{item.Title}}">
                    {% endif %}
                    <h3>{{item.Title}}</h3>
                    <p>{{item.Description|truncatechars:80}}</p>
                </a>
                <span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </li>
            {% empty %}
            <li>暂无头条文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

This code passesflag="h"The parameter explicitly tellsarchiveListTags only retrieve articles marked as 'Top News'.limit="5"Then it limits the display quantity to 5 articles in.forinside the loop,item.Linkget the article link,item.TitleGet the article title,item.ThumbRetrieve thumbnails,item.DescriptionRetrieve article summaries,stampToDateTags will format the timestamp into a readable date format.

2. Display the 'Recommended Articles' list

Next, we might want to display 10 'recommended' articles in another area.

`twig

<h2>推荐阅读</h2>
<div class="articles-grid">
    {% archiveList recommendArticles with type="list" flag="c" limit="10" %}
        {% for item in recommendArticles %}
        <article class="article-card">
            <a href="{{item.Link}}">
                {% if item.Logo %}
                    <div class="article-cover">
                        <img src="{{item