How to get and display the title, description, thumbnail, and associated content of the `categoryDetail` tag?

Manage and display website content in Anqi CMS,categoryDetailThe tag plays a crucial role.It is like the conductor of your website content display, able to accurately obtain and present all the detailed information of a specific category, whether it is the title, description, thumbnail, or deeper related content, it can help you a lot.

categoryDetailThe core role of tags

In simple terms,categoryDetailThe tag's mission is to retrieve detailed data for a single category.On the category page, it will automatically identify the category information of the current page and load it, but on other pages, you can also obtain data of any category by explicitly specifying the category ID or URL alias.This is particularly flexible when building navigation menus, related category recommendations, or multi-level content displays.

Use this tag, you will usually see it in this form:{% categoryDetail 变量名称 with name="字段名称" id="1" %}. Among them,变量名称It is optional, if you define it, you can later refer to the data obtained through this variable; if omitted, the label will output the result directly.idThe parameter is used to specify the numeric ID of the category, andtokenThe parameter allows you to locate the category using its URL alias. For users who have deployed multiple sites,siteIdParameters can help you call classification data across sites.

Get and display basic classification information.

category ofTitle(Title), anddescription(Description) is the most basic and commonly used information. They not only allow visitors to quickly understand the classification topics but are also key elements for Search Engine Optimization (SEO). For example, you can go through{% categoryDetail with name="Title" %}Display the category title directly on the page or assign it to a variable:{% categoryDetail categoryTitle with name="Title" %}{{categoryTitle}}. The way to obtain the category description is similar to the title, usually used to provide a brief overview on the category list page or fill the HTML page.<meta name="description">.

Sometimes, the category page itself may contain a paragraph.Detailed content(ContentThis is very common in some special topic categories or introductory categories.categoryDetailLabels can also retrieve this content. It is worth noting that if the category content is edited in the Markdown editor in the background, you may need to userender=trueParameters to ensure that Markdown syntax can be correctly parsed and rendered as HTML, while combining|safeFilters to prevent HTML code from being escaped:{{categoryContent|render|safe}}.

Flexibly display classification visual elements: thumbnails and banners

Visual content is crucial in attracting users,categoryDetailTags provide multiple ways to display classification image information.

Thumbnail: Categories usually have images for list display.LogoThe field usually represents the 'thumbnail full image' of the category, andThumbA field may represent a cropped or processed "thumbnail". Both directly return the image URL, and you can embed them.<img>label'ssrcthe attribute.

Banner group image: For some categories that require a carousel or multiple image display,Imagesfield comes into play. It returns an array of image URLs. This means you need to use aforLoop to iterate and display these images, for example:

{% categoryDetail categoryImages with name="Images" %}
<ul>
  {% for item in categoryImages %}
  <li>
    <img src="{{item}}" alt="{% categoryDetail with name="Title" %}" />
  </li>
  {% endfor %}
</ul>

If you only need to get the first image as the page background or cover, you can access it through the array index:{% set pageBanner = categoryImages[0] %}.

Custom field display

The flexible content model of AnQi CMS allows you to add various custom fields to categories. These fields may include contact information, specific attribute values, external links, and so on.categoryDetailTags can also access these custom fields.

If you want to iterate and display all custom fields, you can getExtrafields and then iterate over them inside:

{% categoryDetail extras with name="Extra" %}
{% for field in extras %}
  <div>{{field.Name}}：{{field.Value}}</div>
{% endfor %}

If you only want to retrieve a specific custom field, for example, if you have defined a field named in the backgroundcategorySloganyou can directly retrieve it by name:{% categoryDetail with name="categorySlogan" %}.

Retrieve associated content of categories

Category detail pages often show information about the category itself, but the most important is usually to display therelated content, such as article lists or product lists.categoryDetailThe tag does not directly return this content, but it provides the crucialId(Category ID), You can use this ID in conjunction witharchiveListtags to obtain.

archiveListThe tag is used to retrieve a list of documents (articles, products, etc.). On the category detail page, you can use it like this to retrieve all documents under the current category:

{% archiveList archives with categoryId=category.Id type="page" limit="10" %}
  {% for item in archives %}
  <li>
    <a href="{{item.Link}}">
      <h5>{{item.Title}}</h5>
      <p>{{item.Description}}</p>
      <img src="{{item.Thumb}}" alt="{{item.Title}}" />
    </a>
  </li>
  {% empty %}
  <li>此分类下暂无内容。</li>
  {% endfor %}
{% endarchiveList %}

here,categoryId=category.IdThat is the key point, it willcategoryDetailThe current category ID is passed toarchiveListto ensure that only documents under the category are displayed.type="page"means enabling pagination, whilelimit="10"controls the number of articles displayed per page.

Comprehensive example

Suppose you are building a category page for a blog website, you need to display the category name, description, a Banner image, and a list of the latest articles under the category. Your template code might look like this:

{% categoryDetail category %} {# 获取当前分类所有信息，并赋值给category变量 #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ category.Title }} - 我的博客</title>
    <meta name="description" content="{{ category.Description }}">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>{{ category.Title }}</h1>
        <p>{{ category.Description }}</p>
    </header>

    <div class="category-banner">
        {% categoryDetail categoryBanner with name="Images" %}
        {% if categoryBanner %}
            <img src="{{ categoryBanner[0] }}" alt="{{ category.Title }}的封面图">
        {% endif %}
    </div>

    <main class="category-content">
        {% if category.Content %}
            <div class="intro-content">
                {{ category.Content|render|safe }}
            </div>
        {% endif %}

        <h2>{{ category.Title }}下的最新文章</h2>
        <ul class="article-list">
            {% archiveList articles with categoryId=category.Id type="page" limit="10" order="CreatedTime desc" %}
                {% for article in articles %}
                <li>
                    <a href="{{ article.Link }}">
                        <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
                        <h3>{{ article.Title }}</h3>
                        <p>{{ article.Description }}</p>
                        <span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
                {% empty %}
                <li>此分类下暂无文章。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>

        <div class="pagination-area">
            {% pagination pages with show="5" %}
                {% for p in pages.Pages %}
                    <a href="{{ p.Link }}" class="{% if p.IsCurrent %}active{% endif %}">{{ p.Name }}</a>
                {% endfor %}
            {% endpagination %}
        </div>
    </main>

    <footer>
        <p>&copy; 2023 我的博客</p>
    </footer>
</body>
</html>

BycategoryDetailLabel, you can easily build a content-rich, well-structured category page, providing users with a better browsing experience, and also laying a solid foundation for search engine optimization.

Frequently Asked Questions (FAQ)

1. categoryDetailandcategoryListWhat are the differences between tags? categoryDetailTags are used to retrieve and displaya singleAll the details of a category, such as the title, description, exclusive images, etc., of a specific category.categoryListTags are used to retrievemultipleA list composed of categories, commonly used to build navigation menus or sidebar category lists, it usually only returns brief information about categories (such as titles and links), and if detailed information about each list item is needed, it may be necessary tocategoryListnested inside a loopcategoryDetail.

2. **I passedcategoryDetailgot the categorized content ("