In AnqiCMS, the need to accurately call and display detailed information of a specific category on the front page, such as the description of the category and its exclusive Banner image, is a common requirement.This can not only make the structure of the website content clearer, but also improve the user experience and the SEO performance of the website.Benefiting from AnqiCMS's flexible template tag system, achieving this goal is actually very direct.
We will mainly use a core template tag -categoryDetail. This tag is specifically used to retrieve various details of categories.
Retrieve and display category descriptions
First, we know that each category in the AnqiCMS background can be set to a "category introduction", which is usually the category description we want to display on the front page.This introduction not only helps visitors quickly understand the classification content, but is also an important information source for search engine crawling.
You can use to call the category description in the templatecategoryDetailtags, and specifyname="Description". For example, if you want to display the current category description on the category list page or category detail page, you can write the code like this:
<div class="category-description">
{% categoryDetail with name="Description" %}|safe}}
</div>
here,with name="Description"Tell AnqiCMS that we want to get the description information of the current category. If you enter HTML content in the description on the back end, in order to ensure that these HTML codes are parsed correctly by the browser rather than displayed as text, we usually add a variable after it.|safeFilter. If the category description is plain text, it can be omitted.|safe.
Call and display the category Banner image.
The AnqiCMS category function supports uploading one or more Banner images for each category.These images can be used as a slideshow or as a large image at the top of the category page.categoryDetailTags can also help us get these images.
The Banner image information passes by categoryname="Images"Parameters can be used to obtain. It is worth noting that,ImagesAn array of image URLs will be returned because a category may be configured with multiple Banner images.
Assume you want to display all the Banner images of the current category and form them into a simple image list:
<div class="category-banners">
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
<ul>
{% for imageUrl in categoryBanners %}
<li><img src="{{ imageUrl }}" alt="{% categoryDetail with name="Title" %} Banner"/></li>
{% endfor %}
</ul>
{% endif %}
</div>
In this example, we first use{% categoryDetail categoryBanners with name="Images" %}Assign the array of all Banner images in the current category tocategoryBannersthe variable. Then, by{% if categoryBanners %}judging whether there are images, and then using{% for imageUrl in categoryBanners %}Loop through this array, embed the URL of each image into<img>label'ssrcthe attribute. To make it SEO-friendly, we also addedaltan attribute that refers to the category title.
If you only need to display one Banner image, such as the default first one, you can handle it like this:
<div class="category-main-banner">
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
<img src="{{ categoryBanners[0] }}" alt="{% categoryDetail with name="Title" %} 主Banner"/>
{% endif %}
</div>
here,categoryBanners[0]Directly obtained the first element of the image array, which is the URL of the first Banner image.
Call for a specific category
The above examples are all on the category page (for example/category/1or/article/list-1.htmlIn this case, it is the default to retrieve the category information of the current page. But if you want to call the category information with a specific ID on a non-category page, such as the homepage, you can useidSpecify the category ID with the parameter.
For example, on the homepage, you want to display the description and the first Banner of the category with ID 5.
<div class="specific-category-info">
<h3>{% categoryDetail with name="Title" id="5" %}</h3>
<p>{% categoryDetail with name="Description" id="5" %}|safe}}</p>
{% categoryDetail specificCategoryBanners with name="Images" id="5" %}
{% if specificCategoryBanners %}
<img src="{{ specificCategoryBanners[0] }}" alt="{% categoryDetail with name="Title" id="5" %} Banner"/>
{% endif %}
</div>
By adding incategoryDetailthe tag withid="5"We can accurately obtain all the information of the specified category ID 5, regardless of the type of the current page.
In summary, AnqiCMS template tags provide a powerful and flexible way to display detailed category content. Whether it is category description or Banner image, it can be displayed simply by using the followingcategoryDetailLabel配合不同的nameParameters andidParameters, at any location on the website, can be accurately called and displayed. Reasonable use of these functions will help make your website content more rich and interactive.
Frequently Asked Questions (FAQ)
1. How can I call and display the description and Banner image of a specific category on a non-category page (such as the homepage)?You cancategoryDetailthe tag throughidThe parameter specifies the category ID. For example, to display category information with ID 10, you can use it like this:{% categoryDetail with name="Description" id="10" %}The Banner image is similar to this:{% categoryDetail myBanners with name="Images" id="10" %}Then, traverse or directly access the array elements.
2. How to properly display these formats on the front-end page when the category description is entered in the background and contains some HTML tags (such as bold, links)?If your category description contains HTML content, to ensure that these HTML tags are parsed correctly by the browser rather than displayed as plain text, you need to add to the variable after the output description|safea filter. For example:{% categoryDetail with name="Description" %}|safe}}.
3. If a category uploads multiple Banner images, how can I display only one as a fixed Banner on the front end?When you use{% categoryDetail myBanners with name="Images" %}When the Banner image is retrieved,myBannersIt is actually an array containing all the image URLs. If you want to display the first image, you can directly access the first element of the array, that is,myBanners[0]It is usually recommended to add a conditional judgment before use, for example: {% if myBanners %}<img src="{{ myBanners[0] }}" />{% endif %}.