AnQi CMS, as a flexible and efficient content management system, 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, all of which are important components for improving user experience, optimizing website structure, and promoting SEO.A clear classification of information helps users quickly understand the position of the article, facilitating their further browsing of related content and also enabling search engines to better crawl and understand the structure of the website.

Next, we will discuss how to elegantly implement the display of the category name, link, and hierarchical relationship of the article's category on the article detail page of the Anqi CMS.

1. Obtain category information directly from the article details

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

archiveDetailTags are used to obtain detailed data of documents. It can not only obtain article titles, content, but also obtain theCategoryobject.CategoryThe object contains key information such as category ID, name, link, etc.

The following is a template code snippet for implementing 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 go through{% archiveDetail currentArchive with name="Id" %}Retrieve the current article's ID (This step is mainly to clarify the context we are in the article detail page, we can directly skip the actual retrieval of the category becausearchiveDetailOn the article detail page, it defaults to the current article.)
  • Then,{% archiveDetail archiveCategory with name="Category" %}Assign the current article's category information to the variablearchiveCategory.
  • Next, we can access througharchiveCategory.LinkTo get the category link, as well as througharchiveCategory.TitleRetrieve the category name and display it on the page.

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

2. Independently obtain category details by category ID

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

categoryDetailTags allow you to retrieve detailed data for categories based on their category ID or URL alias, including their name, link, description, and even the ID of the parent category.

The following is an example of template code:

{% 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 current article's category ID and assign it tocurrentArchivethe variable (herecurrentArchivewhich actually stores the category ID).
  • Then,{% categoryDetail categoryInfo with id=currentArchive %}then use thiscurrentArchive(i.e., category ID) to query and retrieve the complete information of the category, and assign it tocategoryInfoa variable.
  • Finally,categoryInfo.LinkandcategoryInfo.Title, we can display the link and name of the category.

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

3. Cleverly 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 inherently designed to showcase the hierarchical structure of a page path. They can automatically parse the current page's location and generate a complete navigation path from the homepage to the current page (including all intermediate categories), with each level containing a name and an clickable link.This is the most recommended method for displaying hierarchical relationships.

breadcrumbTags are very easy to use, usually just place them at 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 a namedcrumbsThe array includes all levels of 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 current article's title.
  • Passforto iteratecrumbsarray, eachitemcontainsName(link name) andLink(link address).
  • forloop.LastIs an in-built variable used to determine whether it is the last element in a loop, commonly used to control the display of links or the addition of separators.

UsebreadcrumbTags are the most convenient and semantically meaningful way to display classification levels. They eliminate the complex logic of manually tracking parent categories, which is automatically completed by the system.

Summary

The AnQi CMS excels in the flexibility of content display. Whether it's directly obtaining the current category name and link from the article details, independently querying category information through category ID, or using powerful breadcrumb navigation tags to display the complete hierarchy, it provides intuitive and efficient implementation methods.You can choose the most suitable method for you based on the specific needs and complexity of the page design.breadcrumbLabel to handle classification hierarchy display, as it provides complete information while also greatly simplifying the template writing.

Common Questions (FAQ)

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

A1:This is usually caused by incorrect configuration of pseudo-static rules or not setting URL aliases for categories.The AnQi CMS relies on pseudo-static rules to generate friendly URLs. Please make sure that your website is correctly configured for pseudo-static and that 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 pseudo-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 without displaying the name of the current category itself?

A2:You can usearchiveDetailGet the current article'sCategoryId, then usecategoryDetailCombineParentIdattribute to get the information of the parent category. The specific steps are:

  1. First, get the current article'sCategoryId.
  2. Then, usecategoryDetailLabel, pass the value obtained from the previous step.CategoryIdGet the category of this.ParentId.
  3. IfParentIdIs not 0, indicating that there is a parent category. Then usecategoryDetailLabel pass this toParentIdYou can 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 category name link open in a new window?

A3:You just need to add the code in the template to generate category links,<a>Label addtarget="_blank"properties only