How to display the name and link of the current article's category in a frontend template?

In website content operation, the classification information of articles not only helps users quickly understand the content attribution, but is also the key to improving the website navigation experience and search engine optimization (SEO) effect.For friends who use AnQiCMS to build websites, it is a very practical and basic requirement to accurately display the name of the category to which each article belongs and provide a link.AnQiCMS provides powerful and flexible template tags, allowing us to easily implement this feature.

Smart usearchiveDetailTags directly obtain category information

In AnQiCMS template engine, when we are on the article detail page, the system will intelligently identify the article being viewed at the moment.archiveDetailThe tag is the starting point for obtaining all relevant information of the current article. This tag can not only extract the title, content, etc., but also directly access the category information of the article.

To display the category name and link of the current article, we can operate like this:

Firstly, in your article detail template file (usually)archive/detail.htmlor in your custom detail page template, usearchiveDetailLabel to get the complete object of the current article. For easy reference, we can give it a temporary variable name, such ascurrentArchive.

{% archiveDetail currentArchive %}
    <p>所属分类：
        <a href="{{ currentArchive.Category.Link }}">{{ currentArchive.Category.Title }}</a>
    </p>
{% endarchiveDetail %}

In this code block,currentArchiveThe variable holds all the data of the current article. Through.CategoryWe accessed a sub-object containing the article category information. Then, we went through.LinkAttribute can be used to obtain the URL link of the category, and.TitleThe attribute will give the display name of the category. In this way, users can clearly see the category of the article and click the link to jump to the article list page of the category.

Another way: throughcategoryDetailLabel to get category details

Except directly fromarchiveDetailExtract category objects, AnQiCMS also allows us to utilizecategoryDetailTag to get detailed information about the category. This method is suitable when you already have a category ID and want to independently query all properties of the category through this ID.

We can first obtain the category ID of the current article, and then pass this ID as a parameter tocategoryDetailthe tag. Below is the specific implementation method:

{% archiveDetail currentArchive %}
    {# 获取当前文章的分类ID #}
    {% set categoryId = currentArchive.CategoryId %}
    
    {# 使用 categoryDetail 标签，通过ID获取分类详情 #}
    {% categoryDetail currentCategory with id=categoryId %}
        <p>所属分类（另一种方式）：
            <a href="{{ currentCategory.Link }}">{{ currentCategory.Title }}</a>
        </p>
    {% endcategoryDetail %}
{% endarchiveDetail %}

Here, we first go through{% set categoryId = currentArchive.CategoryId %}The statement assigns the category ID of the current article to a variable namedcategoryIdThe variable is followed by.{% categoryDetail currentCategory with id=categoryId %}Use this ID to retrieve the details of the category and assign it to a temporary variablecurrentCategory. The next steps are similar to the first method, throughcurrentCategory.LinkandcurrentCategory.TitleShow the category name and link. Although this method adds a step, it shows the flexible collaboration ability between AnQiCMS tags.

Application and suggestions in practice

In actual website design, category names and links are usually placed below the article title, next to the publication date, or as part of the page breadcrumb navigation. Combined with the provided by AnQiCMSbreadcrumbLabel, you can build a more complete navigation path, further optimizing user experience and website structure.

{# 示例：结合面包屑导航 #}
<nav class="breadcrumb">
    {% breadcrumb crumbs %}
        {% for item in crumbs %}
            {% if not forloop.Last %} {# 不是最后一项（当前文章标题）才显示链接 #}
                <a href="{{ item.Link }}">{{ item.Name }}</a> &gt;
            {% else %}
                <span>{{ item.Name }}</span>
            {% endif %}
        {% endfor %}
    {% endbreadcrumb %}
</nav>

To ensure the robustness of the template, especially when migrating content from other systems or when there may be exceptions in the classification information in some special cases, consider usingifLogical judgment to avoid page errors or incomplete display. For example, before outputting category links, first judgecurrentArchive.CategoryorcurrentArchive.Category.Linkwhether it exists.

By using these flexible and powerful template tags, AnQiCMS allows us to display the names and links of the article categories in a very intuitive and efficient way on the front-end template, which is crucial for improving the user experience and SEO performance of the website.

Frequently Asked Questions (FAQ)

Ask: Does AnQiCMS support multi-category articles? If it does, how can all categories be displayed in the template?

Answer: AnQiCMS defaults to assigning each article to a main category. Therefore,archiveDetailThe tag directly returns the unique category information of the article. If you need to implement a similar "multi-tag" effect, AnQiCMS provides an independent tag feature that can be added multiple tags (Tag) during article editing, and displayed on the front end bytagListTags are displayed. The tags associated with the article can serve as auxiliary classification or keyword index for the content.

Ask: Can I get other information about the category, such as the description or image, in addition to the category name and link?

Yes, of course. Whether it is through `currentArchive.