Anqi CMS: Display category thumbnails and names elegantly in article lists

English CMS with its flexible template mechanism, allows you to easily achieve this requirement.Next, we will introduce in detail how to display the thumbnail and name of the category of each article in the article list, making your website content more attractive.

Why should category information be displayed in the article list?

Before we get our hands dirty, let's think about the benefits of doing so:

  1. Enhance visual appeal:Images are more eye-catching than text. Category thumbnails can make the article list page more lively and reduce visual fatigue.
  2. Enhance the readability and organization of the content:Users can quickly identify the field or topic of the article with a single glance, helping them quickly filter the content they are interested in and improve the efficiency of information acquisition.
  3. Strengthen brand impression:If your category thumbnail design is unique, it helps establish a more vivid website or brand image in the minds of users.
  4. Optimize user experience:Clear category identification can guide users to deeper browsing, such as clicking on the category name or thumbnail to enter the exclusive page of that category.
  5. Indirectly assist SEO:Although it is not a direct SEO factor, a good user experience and longer page dwell time can send positive signals to search engines. At the same time, adding appropriate to imagesaltProperties can also be indexed by search engines.

The core idea of AnQi CMS for displaying classified information is to implement

In the Auto CMS, articles and categories are closely related.Each article belongs to a specific category, and each category can also have its own independent name, description, thumbnail, and other attributes.Our goal is to, when displaying the article list, obtain the thumbnail and name of the corresponding category through the category ID, and display them together.

This mainly depends on the powerful template tags of AnQi CMS, especiallyarchiveList(Article list label) andcategoryDetail(Category details label).

Detailed operation steps

Step 1: Ensure the category information is complete

Before you modify the template, please make sure that your category is configured with a thumbnail and name.

  1. Log in to the Anqi CMS admin backend.
  2. Enter "Content management" -> "Document Category.
  3. Edit or create your categories. On the category edit page, you will see "Category name" and "Thumbnail" fields.
    • Please ensure that the "Category Name" has been filled in.
    • In the "Thumbnail" area, upload a picture that represents the category. The CMS usually supports uploading multiple pictures, where“Category Thumbnail Large Image (Logo)”and“Category Thumbnail (Thumb)”is a commonly used image type. You can choose to upload it according to the actual needs of the template. Generally speaking,ThumbIt will be a smaller thumbnail, more suitable for display on list pages.
  4. Save your category settings. Repeat this operation for all categories that need to display thumbnails in the article list.

第二步：定位文章列表模板文件

The template files of AnQi CMS are usually organized in/template/您的模板目录/The template file path for the article list page will vary depending on your content model (such as article model, product model) and category display mode.

  • Universal article list page:If you are using the default article list page, the file is usually located at:{你的模板目录}/archive/list.htmlOr for product models, it may be at:{你的模板目录}/product/list.html

Please go to the back-end "Template Design"->"Website template management”Find the template you are currently using, and locate the corresponding list page template file for editing.

Step 3: Call the category thumbnail and name in the template

Locate the template file after, and you need to modify the code of the loop article list.

The template syntax of Anqi CMS is similar to the Django template engine, variable usage{{变量名}}，Logical control (such as loops, conditional judgments) is used{% 标签 %}.

  1. Loop through the article list.： Firstly, there will be aarchiveListtag for traversing articles. For example:

    {% archiveList archives with type="page" limit="10" %} {# 假设这是文章列表页，按分页类型显示10篇文章 #}
    {% for item in archives %}
        {# 这里是每篇文章的展示区域 #}
    {% endfor %}
{% endarchiveList %}

    in thisforin the loop,itemvariable represents the current article being traversed.

  2. Get the category ID of the article： Each article objectitemincludes oneCategoryIdfield, which stores the category ID of the article. You canitem.CategoryIdto get it.

  3. Get the category details by category ID： Next, we will usecategoryDetailtags, passed to the article'sCategoryIdto get the detailed information of the category, including its name, thumbnail link, etc.

    {% categoryDetail currentCategory with id=item.CategoryId %}
    {# 在这里，currentCategory变量就包含了当前文章所属分类的所有信息 #}
{% endcategoryDetail %}

    Here we assign the classification details to a variable namedcurrentCategoryYou can name it as needed.

  4. Display the category name and thumbnail: Now,currentCategorythe variable contains the category'sTitle(Name),ThumbThumbnail andLink（Link）。You can directly refer to them:

    • Category name:{{ currentCategory.Title }}
    • Category link: `{