In Anqi CMS, the display of article categories on the front page is a key link in content organization and user navigation.Whether it is to help users understand the context of the article or optimize the SEO structure of the website, accurate and easily accessible category names and links play an important role.Anqi CMS with its flexible template engine makes this task intuitive and efficient.
Understand the classification system of Anqi CMS
Before delving into the display methods, we first need to know that the Anqi CMS content management system attaches great importance to the concept of "classification".Each document (whether an article, product, or entry under any custom content model) must select a category when published.This category is not only a summary of the content, but also the basis for the front-end page display and URL generation.Through the "Content Management" -> "Document Category" feature, we can conveniently create, edit, and manage various categories.
Display category information on the article detail page
When visiting a specific article detail page, we usually want to see which category it belongs to, and be able to click on the category name to jump to the list page of that category.The Anqi CMS offers several concise ways to achieve this goal.
The most direct way is to make use ofarchiveDetailTag to get the detailed information of the current article. This tag can not only obtain the title and content of the article, but also directly obtain the complete information of the article's category, including the category ID, name, and link.
Suppose we are editing a template file for an article detail page (for examplearticle/detail.html), we can display the category name and link in this way:
<article>
<!-- 其他文章内容展示 -->
<div class="article-meta">
发布于：
{% archiveDetail articleCategory with name="Category" %}
<a href="{{ articleCategory.Link }}" class="category-link">
{{ articleCategory.Title }}
</a>
{% endarchiveDetail %}
<!-- 其他元数据，如发布时间、浏览量等 -->
</div>
<!-- 文章内容 -->
</article>
In this example,{% archiveDetail articleCategory with name="Category" %}The category information of the current article was assigned toarticleCategorythis variable. Then, we can obtain{{ articleCategory.Link }}the category link,{{ articleCategory.Title }}and the category name.archiveDetaillabel'sname="Category"The parameter is crucial, as it clearly informs the system that we need to retrieve the article's category object.
Of course, if you are accustomed to usingarchiveThis global variable (usually automatically injected with the complete object of the current article on the article detail page), and can also be accessed more simply directly:
<article>
<!-- 其他文章内容展示 -->
<div class="article-meta">
发布于：
<a href="{{ archive.Category.Link }}" class="category-link">
{{ archive.Category.Title }}
</a>
<!-- 其他元数据，如发布时间、浏览量等 -->
</div>
<!-- 文章内容 -->
</article>
Both methods can achieve the same effect, you can choose according to your coding habits.
Display the category information on the article list page.
When we loop through multiple articles on an article list page (such as the article recommendation area on the homepage, a document list on a tag page, or a search results page), we also need to display the category of each article.
In this scenario, we usually usearchiveListtags to retrieve the list of articles. InarchiveListthe loop body, each article object (such as nameditem) will contain aCategoryIdfield does not directly contain the complete category name and link. In this case, we need to rely oncategoryDetailLabel, based onCategoryIddynamic query and display category information.
Here is an example of displaying article categories on the article list page template:
<section class="article-list">
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<div class="article-meta">
分类：
{% categoryDetail currentCategory with name="Title" id=item.CategoryId %}
<a href="{% categoryDetail with name='Link' id=item.CategoryId %}" class="category-link">
{{ currentCategory }}
</a>
{% endcategoryDetail %}
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>阅读量：{{ item.Views }}</span>
</div>
<p>{{ item.Description }}</p>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
</div>
{% empty %}
<p>暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
<!-- 如果是分页列表，这里可以加上分页标签 -->
{% pagination pages with show="5" %}
<!-- 分页链接 -->
{% endpagination %}
</section>
In this example, we first usearchiveListLoop through the articles obtained. In each iteration, we pass theid=item.CategoryIdthe current article's category ID tocategoryDetailLabel. To avoid repeated calls, we first use{% categoryDetail currentCategory with name="Title" id=item.CategoryId %}to get the category name and assign it tocurrentCategorythe variable, and then directly obtain the link in the URL.
It is worth mentioning that Anqi CMS follows the conventions of Django template engine syntax, using variables such as{{ 变量名 }}in the form of, logical control tags such asif/foretc.), and functional tags such asarchiveList/categoryDetailIf so, use{% 标签名 参数 %}in the form. This concise and clear syntax allows front-end developers to build complex content display pages very efficiently.
Some tips and注意事项 for template creation
- Naming conventions:In the template, choose meaningful names for variables and tag parameters, which can greatly improve the readability and maintainability of the code. For example, use
articleCategoryorcurrentCategorymore simplecatmore clear. - Static page (URL alias):AnQi CMS supports static page functionality, category links (
LinkThe field will be automatically generated according to the pseudo-static rules on the backend. You do not need to manually concatenate the URL, which greatly simplifies the development work and is beneficial for SEO. - Default value handling:Although Anqi CMS strictly requires articles to have categories, but on other possible empty fields (such as image URLs), you can consider using Pongo2's
defaultA filter to provide alternative content, for example{{ item.Thumb|default:"/static/images/default_thumb.jpg" }}To enhance the robustness of the template. - Performance consideration: Called frequently within a loop
categoryDetailTags to obtain classification information may have a slight impact on performance, especially when the amount of data is large.But for most small and medium-sized enterprise websites, the high-performance architecture of Anq CMS is enough to cope with.If indeed a performance bottleneck is encountered, consider fetching all category information in one go at the controller layer and passing it to the template, or optimizing the database query.
By using the above method, you can flexibly and efficiently display the classification information of the articles on the front page of AnQi CMS, including the classification name and link, thereby providing users with a better browsing experience and laying a solid foundation for the website's SEO.
Frequently Asked Questions (FAQ)
1. Why is my category link sometimes a numeric ID and sometimes a Chinese pinyin or English word?This usually depends on the pseudo-static rule settings under "Function Management" in the AnQi CMS backend.The Anqi CMS provides various static URL modes (such as numeric mode, model naming mode, category naming mode, etc.), and allows custom URLs to be set for categories.If you set a custom URL alias for categories, such asabout-us），and enabled the corresponding pseudo-static rules, then the link will display as/{catname}.htmlfor example/about-us.htmlThe form of brackets. If no custom URL or pseudo-static rules are set, the system may default to using the category ID to generate links.
2. How to display the detailed description or Banner image of the current category on the category page (not the article detail page)?In the template of the category list page or category detail page (for examplearticle/list.html），you can use it directlycategoryDetailTag to get the current page classification information without passing inidortokenParameters. For example:
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
<img src="{{ bannerImages[0] }}" alt="{% categoryDetail with name='Title' %}" class="banner-image">
{% endif %}
{% endcategoryDetail %}
categoryDetailTag will intelligently identify the current page classification and return its detailed information, includingTitle(Name),Description(Description),Images(Banner image group) and other fields.
What if the article does not select a category? Does AnQi CMS allow this to happen?The AnQi CMS is strict in design,Every document must select a category when publishedIn the background "Content Management" -> "Publish Document" interface, you will find that "Category" is a required field.Therefore, there is no article without a category, which ensures the structuring and manageability of the content and avoids errors on the front-end page when trying to retrieve category information.