How to display the category information of articles on the front page of Anqi CMS, including the category name and link?

In the Anqi CMS, the display of article category information 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 a crucial role.The AnQi CMS, with its flexible template engine, makes this task intuitive and efficient.

Understand the classification system of AnQi CMS

Before delving into the presentation methods, we first need to know that the content management system of Anqi CMS attaches great importance to the concept of 'classification'.Each document (whether an article, product, or other custom content model entry) must select a category when published.This category is not only the organization of 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 the category information of the article on the article detail page

When accessing 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 Auto CMS provides several simple ways to achieve this goal.

The most direct way is to usearchiveDetail

Suppose we are editing a template file for an article detail page (for examplearticle/detail.html), we can display the category name and link like this:

<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" %}This article's category information is assigned toarticleCategorythis variable. Then, we can{{ articleCategory.Link }}get the category link,{{ articleCategory.Title }}get the category name.archiveDetailTagsname="Category"Parameters are key, they clearly tell the system what classification object we need to retrieve from the article.

Of course, if you are accustomed to usingarchiveThis global variable (which is usually automatically injected with the complete object of the current article on the article detail page) can also be accessed more succinctly directly:

<article>
    <!-- 其他文章内容展示 -->
    <div class="article-meta">
        发布于:
        <a href="{{ archive.Category.Link }}" class="category-link">
            {{ archive.Category.Title }}
        </a>
        <!-- 其他元数据,如发布时间、浏览量等 -->
    </div>
    <!-- 文章内容 -->
</article>

These two methods can achieve the same effect, you can choose according to your coding habits.

Display the category information of the article list page.

When we loop through multiple articles on a list page of articles (such as the recommended area on the homepage, the document list on a specific tag page, or the search results page), we also need to display the category to which each article belongs.

In this scenario, we usually usearchiveListtags to get the list of articles. InarchiveListthe loop body, each article object (for example, named asitem) will contain aCategoryIdField, but by default does not directly contain the full category name and link. At this time, we need to assistcategoryDetailtags, based onCategoryIdDynamically query and display category information.

Below 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 go throughid=item.CategoryIdPass the current article's category ID tocategoryDetailLabel. To avoid repeated calls, we first use{% categoryDetail currentCategory with name="Title" id=item.CategoryId %}Get the category name and assign it tocurrentCategorythe variable, and then directly get the link in the link.

It is worth mentioning that the template syntax of Anqi CMS follows the conventions of the Django template engine, with variables used{{ 变量名 }}in the form of, logic control tags (such asif/forand functional tags (such asarchiveList/categoryDetailauto{% 标签名 参数 %}auto

Some tips and注意事项 for template creation.

  • Naming conventions:In the template, choosing meaningful names for variables and tag parameters can greatly improve the readability and maintainability of the code. For example, usingarticleCategoryorcurrentCategoryas simple ascatclearer.
  • Static URL (URL alias):Anqi CMS supports the static URL feature, the link of the category (LinkThe field (auto) will be automatically generated according to the backend's pseudo-static rules, and you do not need to manually concatenate the URL, which greatly simplifies the development work and is conducive to SEO.
  • Default Value Handling:Although the Anqi CMS强制 requires articles to have categories, on other possible empty fields (such as image URLs), you can consider using Pongo2'sdefaultA filter to provide fallback content, such as{{ item.Thumb|default:"/static/images/default_thumb.jpg" }}To enhance the robustness of the template.
  • Performance considerations:Called frequently within the loopcategoryDetailLabels may have a slight impact on performance, especially when dealing with large amounts of data.But for most small and medium-sized enterprise websites, the high-performance architecture of the Anqi CMS is enough to cope.If a performance bottleneck is indeed 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 category information of the articles on the front page of the Anqi CMS, including the category name and link, thus providing users with a better browsing experience and laying a solid foundation for the website's SEO.


Common 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 "URL Rewrite Rule" setting under "Feature Management" in the AnQin CMS backend.The Auto CMS provides various pseudo-static modes (such as number mode, model naming mode, category naming mode, etc.), and allows setting a "custom URL" for categories.about-us),and the corresponding pseudo-static rules have been enabled, then the link will display as/{catname}.html[for example]/about-us.htmlThe form of ). If a custom URL or pseudo-static rule is not 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 (instead of the article detail page)?in the template of the category list page or category detail page (for examplearticle/list.html),你可以直接使用 EnglishcategoryDetail标签来获取当前页面的分类信息,而无需传入 EnglishidortokenFor 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 %}

categoryDetail标签会智能地识别当前页面的分类,并返回其详细信息,包括 EnglishTitle(Name),Description(description),Images(Banner group) fields.

3. What if the article does not select a category? Does AQCMS allow this to happen?The Auto CMS is designed strictly,Every document must select a category at the time of publication