How to display the name, link, and hierarchy of the article category on the article detail page?

AnQi CMS is a flexible and efficient content management system that provides great freedom in content display.For a website, the article detail page not only needs to display the content of the article itself, but also the name, link, and even the hierarchy of the category it belongs to, which are all important components for improving user experience, optimizing website structure, and promoting SEO.Clear categorization information helps users quickly understand the positioning of the article, making it convenient for them to further browse related content and also allows search engines to better crawl and understand the structure of the website.

Next, we will discuss how to elegantly implement the display of the name, link, and hierarchical relationship of the article category belonging to the article detail page in AnQi CMS.

1. Directly obtain classification information from the article details

In AnQi CMS, when you visit the detail page of an article, the system will automatically load various data associated with the article, including information about the category to which the article belongs. By usingarchiveDetailThe tag, we can directly obtain the category object of the current article, and then extract the name and link of the category.

archiveDetailThe tag is used to obtain detailed data of the document. It can not only obtain the title, content, etc. of the article, but also obtain theCategoryobject. thisCategoryobject contains the ID, name, link, and other key information of the category.

Here is the template code snippet to implement this function:

{% archiveDetail currentArchive with name="Id" %} {# 获取当前文章ID，用于确保在文章详情页上下文 #}
<div class="article-category">
    {# 使用archiveDetail标签，并指定name="Category"来获取分类对象 #}
    {% archiveDetail archiveCategory with name="Category" %}
    所属分类：<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a>
    {% endarchiveDetail %}
</div>

In this code block:

• We first pass through{% archiveDetail currentArchive with name="Id" %}Get the current article ID (this step is mainly to clarify that we are on the article detail page context, you can directly skip obtaining the category in fact becausearchiveDetailThe article details page defaults to the current article).
• Then,{% archiveDetail archiveCategory with name="Category" %}Assign the current article's category information to a namedarchiveCategory.
• Then, we can go througharchiveCategory.LinkGet the category link, as well as througharchiveCategory.TitleGet the category name and display it on the page.

This method is very concise and efficient, suitable for scenarios where you only need to display the name and link of the direct category of the current article.

2. By category ID, obtain category details independently

Sometimes, we may need to obtain information about a category more flexibly, or when the context on the current page is not clear enough. In this case, we can first obtain the category ID from the article details, and then usecategoryDetailTag to independently query the details of this category.

categoryDetailThe tag allows you to obtain detailed data of the category based on the category ID or URL alias, including its name, link, description, and even the ID of the parent category.

Here is the template code example:

{% archiveDetail currentArchive with name="CategoryId" %} {# 获取当前文章所属分类的ID #}

<div class="article-category-detailed">
    {# 使用categoryDetail标签，通过CategoryId来获取分类信息 #}
    {% categoryDetail categoryInfo with id=currentArchive %}
    分类名称：<a href="{{ categoryInfo.Link }}">{{ categoryInfo.Title }}</a>
    {% endcategoryDetail %}
</div>

In this example:

• We first use{% archiveDetail currentArchive with name="CategoryId" %}To get the ID of the current article's category and assign it tocurrentArchivethe variable (herecurrentArchivewhich actually stores the category ID).
• Later,{% categoryDetail categoryInfo with id=currentArchive %}Then use thiscurrentArchive(i.e., category ID) to query and retrieve complete information of the category, and assign it tocategoryInfoVariable.
• Finally, throughcategoryInfo.LinkandcategoryInfo.Titlewe can display the category link and name.

This method provides greater flexibility, especially when you need to perform further operations based on the category ID.

3. Skillfully use breadcrumb navigation to display the hierarchical relationship (recommended)

For displaying the hierarchical relationship of the article category, Anqi CMS provides a special and very powerful tag -breadcrumb.Breadcrumbs are designed to display the hierarchical structure of page paths, and they can automatically parse the position of the current page and generate a complete navigation path from the homepage to the current page (including all intermediate categories), with each level containing a name and a clickable link.This is the most recommended method for displaying hierarchical relationships.

breadcrumbThe tag is very easy to use, usually just place it in the position on the page where you want to display the breadcrumb navigation.

<div class="breadcrumb-nav">
    {% breadcrumb crumbs with index="首页" title=true %}
    <ol>
        {% for item in crumbs %}
            <li>
                {% if not forloop.Last %} {# 如果不是最后一个元素，则显示链接 #}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% else %} {# 否则只显示名称（当前页面） #}
                    {{ item.Name }}
                {% endif %}
            </li>
            {% if not forloop.Last %} / {% endif %} {# 添加分隔符，除了最后一个元素 #}
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</div>

This code:

• {% breadcrumb crumbs with index="首页" title=true %}It will generate an array namedcrumbsAn array that includes all hierarchical information from the 'Home' page to the current article.index="首页"The parameter defines the starting point as the 'Home' page,title=trueThis indicates that the last element of the breadcrumb will display the title of the current article.
• ByforLoop throughcrumbsarray, eachitemincludesName(link name) andLink(Link address).
• forloop.LastIs a built-in variable used to determine whether it is the last element in the loop, commonly used to control the display of links or the addition of separators.

UsebreadcrumbTags are the most convenient and semantic way to display classification levels, as they eliminate the complex logic of manually tracking parent categories and are automatically completed by the system.

Summary

AnQi CMS excels in the flexibility of content display, whether it is to directly obtain the current category name and link from the article details, independently query category information through category ID, or use the powerful breadcrumb navigation tags to display the complete hierarchy, all of which provide intuitive and efficient implementation methods.You can choose the most suitable way based on the specific requirements and complexity of the page design.Recommend using in most casesbreadcrumbTags are used to handle classification level display, as they provide complete information while also greatly simplifying the writing of templates.

Frequently Asked Questions (FAQ)

Q1: Why can't I click or display an error on my category link?

A1:This is usually due to incorrect configuration of pseudo-static rules or the category not setting URL aliases.The AnQi CMS relies on URL rewriting rules to generate friendly URLs, please make sure that your website is correctly configured for URL rewriting, and the category of the article is set in the background (Content Management -> Document Category -> Edit Category -> Other Parameters), and the "Custom URL" field is filled in or automatically generated.If the category ID is removed in the static rule, the link may also be incorrect.

Q2: How can I display only the parent category name of the current category on the article detail page without showing the full breadcrumb and the name of the current category?

A2:You can use it toarchiveDetailGet the current article'sCategoryIdand then usecategoryDetailCombineParentIdattribute to get the information of the parent category. The specific steps are:

1. First, get the current article'sCategoryId.
2. Then, usecategoryDetailtag, passed from the previous stepCategoryIdto get the category ofParentId.
3. IfParentIdis not 0, which means there is a parent category. Then usecategoryDetailthe tag to pass thisParentIdto get the name and link of the parent category. Example code may look like this:

{% archiveDetail currentCatId with name="CategoryId" %}
{% categoryDetail currentCategory with id=currentCatId %}
    {% if currentCategory.ParentId > 0 %}
        {% categoryDetail parentCategory with id=currentCategory.ParentId %}
            父级分类：<a href="{{ parentCategory.Link }}">{{ parentCategory.Title }}</a>
        {% endcategoryDetail %}
    {% else %}
        无父级分类
    {% endif %}
{% endcategoryDetail %}

Q3: How to make the displayed category name link open in a new window?

A3:You just need to add the attribute in the template code to generate the category link,<a>tagstarget="_blank"and it is done.