How to retrieve and display detailed information of a specified category, including its description, Banner image, and Logo?
In a content management system, categories are not only the form of content organization, but also the core of website structure and user navigation.Flexibly obtain and display detailed information of specific categories, such as their descriptions, unique banner images and logos, which is crucial for creating attractive and informative pages.AnQiCMS provides an intuitive and powerful template tag for this, allowing you to easily meet this requirement.
Core feature tags:categoryDetail
Aq CMS provides powerful template tags for this-categoryDetail. This tag's core function is to accurately retrieve all detailed data of the category specified by the classification ID or URL alias (token).Whether you want to display a selected category on the homepage or reference the detailed information of a specific content category on other pages,categoryDetailThey can all provide the data support needed.
To use it, you usually start with this format:{% categoryDetail myCategory with id="分类ID" %}. Here,myCategoryIs a custom variable name, you can name it according to your own preference, it will carry the detailed classification information obtained.idThe parameter is used to specify the category ID you want to retrieve. If you are not convenient to obtain the ID, you can also usetokenparameter, which corresponds to the URL alias of the category, for example:{% categoryDetail myCategory with token="company-news" %}.
Retrieve category description
The detailed description is an important part of introducing the category content to visitors, it helps users quickly understand the theme and scope of the category. ThroughcategoryDetailAfter obtaining the category data with the label, we can easily access itDescriptionfield.
In the template, you can display the category description in this way:
{% categoryDetail myCategory with id="123" %} {# 假设要获取ID为123的分类信息 #}
{% if myCategory %}
<div class="category-description">
<h3>{{ myCategory.Title }} 的详细描述</h3>
<p>{{ myCategory.Description | safe }}</p>
</div>
{% endif %}
Please note,DescriptionField content may contain HTML tags. To ensure that these HTML codes are rendered correctly by the browser rather than displayed as plain text, we need to use|safeFilter. This ensures that formats such as paragraphs, links, or bold text are displayed correctly.
Display category Banner image and Logo
Visual elements play a crucial role in attracting user attention, as they can convey brand image and content themes intuitively.The AnQi CMS allows you to configure exclusive Banner images and Logos for each category, making your website more visually appealing.
The category logo is usually a small identifying image of the category, which can be obtained directly throughLogothe field. While the banner image is more flexible, it is stored in the form of a group of images.ImagesIn the field. This means you can upload multiple Banner images for the same category and display them in a template in a loop, or just take the first one as the main Banner.
How to display the category Logo and Banner image in the template example:
{% categoryDetail myCategory with id="123" %} {# 假设要获取ID为123的分类信息 #}
{% if myCategory %}
<div class="category-visuals">
<h2>{{ myCategory.Title }}</h2>
{# 显示分类Logo #}
{% if myCategory.Logo %}
<div class="category-logo">
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} Logo" style="max-width: 150px; height: auto;" />
</div>
{% endif %}
{# 显示分类Banner图（图片组） #}
{% if myCategory.Images %}
<div class="category-banners">
{% for banner in myCategory.Images %}
<img src="{{ banner }}" alt="{{ myCategory.Title }} Banner {{ forloop.Counter }}" style="max-width: 100%; height: auto; margin-bottom: 10px;" />
{% endfor %}
</div>
{% elif myCategory.Logo %} {# 如果没有Banner组图，可以考虑将Logo作为备用Banner展示 #}
<div class="category-main-banner">
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} 主Banner" style="max-width: 100%; height: auto;" />
</div>
{% endif %}
</div>
{% endif %}
In this example, we first checkmyCategory.LogoDoes it exist, if it exists then display the Logo image. Next, we checkmyCategory.Images(Banner group), if present, then loop to display all Banner images.We have also added a backup logic, that is, if the category is not configured with a Banner group, but there is a Logo, then the Logo can be displayed as the main Banner, which increases the robustness and flexibility of the template.
Integrated application: Retrieve and display all information
Integrate the above elements, you can display a complete information block for a specified category at any position on the page:
{% categoryDetail featuredCategory with id="456" %} {# 获取ID为456的特色分类信息 #}
{% if featuredCategory %}
<section class="featured-category-block">
<h2 class="category-title">{{ featuredCategory.Title }}</h2>
{% if featuredCategory.Logo %}
<div class="category-header-logo">
<img src="{{ featuredCategory.Logo }}" alt="{{ featuredCategory.Title }} Logo" style="height: 60px; width: auto; float: left; margin-right: 15px;" />
</div>
{% endif %}
<div class="category-description-text">
<p>{{ featuredCategory.Description | safe }}</p>
</div>
<div style="clear: both;"></div> {# 清除浮动 #}
{% if featuredCategory.Images %}
<div class="category-hero-banners" style="margin-top: 20px;">
{% for banner in featuredCategory.Images %}
<img src="{{ banner }}" alt="{{ featuredCategory.Title }} 精选图 {{ forloop.Counter }}" style="width: 100%; height: auto; margin-bottom: 15px; border-radius: 5px;" />
{% endfor %}
</div>
{% endif %}
<a href="{{ featuredCategory.Link }}" class="view-all-button" style="display: block; text-align: center; padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px;">
查看所有 {{ featuredCategory.Title }} 内容
</a>
</section>
{% else %}
<p>抱歉，未能加载特色分类信息。</p>
{% endif %}
In practice, you would want tostyleReplace properties with external CSS styles to keep the code clean and maintainable.Through such a layout, visitors can clearly see the category logo, attractive banner images, and detailed descriptions, and can further explore related content through category links.