How to display the category thumbnail and name in the article list?

Anqi CMS: Display category thumbnails and names elegantly in the article list

In website operation, the article list page is an important entry point for users to browse content and discover information.A beautifully designed, informative list of articles can not only enhance user experience but also effectively guide users to delve deeper into reading.The traditional article list may only show titles, publication time, abstracts, and other information, making it somewhat monotonous.If a thumbnail and name of the category to which each article belongs can be displayed intuitively next to it, it will undoubtedly add more visual appeal to the website and help users quickly understand the content ownership, thereby improving the overall browsing efficiency and content reach rate.

The Anqi CMS with its flexible template system allows you to easily meet this requirement.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 charming.

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 article list pages more lively and reduce visual fatigue.
2. Improve content readability and organization:Users can quickly identify the field or theme of an article, 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 to establish a clearer website or brand image in the minds of users.
4. Optimizing user experience: Clear category identifiers can guide users to deeper browsing, such as clicking on category names or thumbnails to enter the exclusive page of the 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, add appropriate to imagesaltThe attribute can also be indexed by search engines.

The core idea of AnQi CMS for displaying classified information.

In Anqi 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 properties.Our goal is to display the list of articles by retrieving the thumbnail and name of the corresponding category through the category ID of the article and displaying them together.

This mainly depends on the powerful template tags of AnQi CMS, especiallyarchiveList（Article list tag）andcategoryDetail（Category details tag）.

Detailed operation steps

Step 1: Ensure the category information is complete

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

1. Log in to the Anqi CMS backend.
2. Enter"Content Management" -> "Document Category.
3. Edit or create your category. On the category editing page, you will see"Category NameAndThumbnail"and other fields.
   • Make sure that the "category name" has been filled in.
   • In the "thumbnail" area, upload an image that represents the category. Anqi CMS usually supports uploading multiple images, among which"Category thumbnail large image (Logo)"and“Category thumbnail (Thumb)”It 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 the list page.
4. Save your category settings. Repeat this operation for all categories that need to display thumbnails in the article list.

Step two: Locate the article list template file

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

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

Please go through the backend "template design"->"website template managementFind the template you are currently using and locate to the corresponding list page template file for editing.

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

Locate the template file and then you need to modify the code for the article list loop.

The template syntax of AnQi CMS is similar to the Django template engine, using variables{{变量名}}used for logical control (such as loops, conditional judgments){% 标签 %}.

1. Loop through the article list. Firstly, there will be aarchiveListtag used to iterate over articles. For example:

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

   in thisforthe loop,itemThe variable represents each article being iterated over.

2. Get the category ID of the articleEach 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 to pass the article'sCategoryIdto get the details of the category, including its name, thumbnail link, etc.

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

   Here we will assign the category 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),Thumb(Thumbnail) andLink(Link). You can directly refer to them:

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