In Anqi CMS, the article detail page is the core page where users obtain information when managing website content.In addition to the content of the article itself, displaying the category information and related tag list to visitors can greatly enhance the user experience, help visitors quickly understand the context of the article, and effectively strengthen the internal link structure of the website, which is very beneficial for search engine optimization (SEO).Next, we will discuss how to flexibly display these associated information on the article detail page of the Anqi CMS.

The Anqi CMS uses an intuitive and powerful template tag system, making it exceptionally easy to call various data on the frontend page. For the article detail page, we mainly use several core tags: used to obtain the detailed information of the articlearchiveDetailand used to display the category and tag list.categoryDetailandtagList.

Display the category information of the article.

When a visitor reads an article, they usually want to know which major category the article belongs to. This helps them understand the positioning of the article and makes it convenient for them to explore similar content.In AnQi CMS, it is very direct to retrieve and display the category information of articles.

Firstly, in the template of the article detail page (usually,{模型table}/detail.htmlIn it, you can already access the detailed data of the current article. To get the category information of the current article, we can make use ofarchiveDetailThis tag provides an object namedCategory. This field returns an object that includes category ID, name, link, and other complete information about the category.

For example, you can use such code to get the category name and link:

{% archiveDetail archiveCategory with name="Category" %}
<p>分类：<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a></p>

This code first retrieves the latest 5 articles byarchiveDetailThe tag assigns the category information of the current article toarchiveCategoryVariable. Then, you can access it like a regular object property.archiveCategory.Link(category link) andarchiveCategory.Title(category name), and display it on the page.

If you need to display more detailed classification information, such as descriptions or thumbnails, you can also do so byarchiveCategoryaccessing this variable, for examplearchiveCategory.DescriptionorarchiveCategory.ThumbThis way makes the invocation of classification information very convenient.

Display the list of tags of the article

Tags are another important dimension of articles, describing content in a more flexible and granular manner, which helps users discover content with stronger relevance.In AnQi CMS, displaying the tag list of articles is also simple.

The list of tags of the article can betagListTo get tags. This tag is specifically used to list tags associated with the article. When used on the article detail page, it will automatically associate with the current article without the need to specify an additional article ID.

This is an example showing a list of article tags:

<div class="article-tags">
    <span>标签：</span>
    {% tagList tags with limit="10" %}
        {% for item in tags %}
            <a href="{{item.Link}}">{{item.Title}}</a>
        {% endfor %}
    {% else %}
        <span>暂无标签</span>
    {% endtagList %}
</div>

In this code,tagList tags with limit="10"It will get up to 10 tags for the current article and store them intagsthe variable. Next, we useforto iteratetagsList, generate a hyperlink with its title for each tag (item.Title）and link（item.Link).

It is worth noting that we also use the{% else %}statement here. This is a very practical feature, whentagListreturnedtagsWhen the list is empty (i.e., the article has not set any tags), the page will display a prompt 'No tags available' instead of an empty space, which can avoid blank page layout and improve user experience.

Integration and Optimization

Integrating category information and tag lists into the article detail page can construct a richer context and navigation path.An example application scenario is to clearly display this information below the article title or at the end of the content area.

Consider a more comprehensive example, which not only shows categories and tags, but may also include some basic style structures:

<article class="article-detail">
    <h1 class="article-title">{% archiveDetail with name="Title" %}</h1>

    <div class="article-meta">
        {% archiveDetail archiveCategory with name="Category" %}
        <span class="category-info">
            所属分类：<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a>
        </span>
        {% endarchiveDetail %}

        <span class="publish-date">发布日期：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span class="views-count">阅读量：{% archiveDetail with name="Views" %}</span>
    </div>

    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>

    <div class="article-tags">
        <span>相关标签：</span>
        {% tagList tags with limit="5" %}
            {% for item in tags %}
                <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
            {% endfor %}
        {% else %}
            <span>暂无相关标签</span>
        {% endtagList %}
    </div>
</article>

Organizing and presenting these related information reasonably can not only enhance the professionalism and user satisfaction of the website, but also provide more content-related clues for search engines, which is helpful to improve the overall weight and inclusion performance of the website.

Common Questions and Answers (FAQ)

How to display the parent category name of the current category on the article detail page?

You can do this by twicecategoryDetailThe tag call is implemented. First, obtain the parent category ID of the current article, and then use this ID to query the detailed information of the parent category.

{% archiveDetail currentCategory with name="Category" %}
    {% if currentCategory.ParentId %}
        {% categoryDetail parentCategory with name="Title" id=currentCategory.ParentId %}
        <p>父级分类：<a href="{% categoryDetail with name='Link' id=currentCategory.ParentId %}">{{ parentCategory }}</a></p>
        {% endcategoryDetail %}
    {% endif %}
{% endarchiveDetail %}

How to display all categories when an article has multiple categories?

By default, Anqi CMS allows a document to belong to only one category, thereforearchiveDetailTag returnsCategoryObjects are a single category.If you need the article to belong to multiple categories, this needs to be achieved through a custom content model, or by manually linking in the article content.But from the perspective of system design, it encourages single ownership to maintain the clarity of the content structure.

How to add different CSS styles to each label in a label list?

The style of the label list can be changed by assigning a class name to<a>the label (as shown in the example)tag-item）to achieve this. Then, you can define styles in the website's CSS file..tag-itemOr use pseudo-classes to define styles.:nth-child()And so on to apply different styles to tags at different positions. For example:

.article-tags .tag-item {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 8px;
    margin-bottom: 8px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}

.article-tags .tag-item:hover {
    background-color: #e0e0e0;
    color: #007bff;
}

By this means, you can give the category and tag list of the article detail page an aesthetic and practical display effect according to your design requirements.