How to display associated categories and tags lists on the article detail page?

When managing website content in AnQi CMS, the article detail page is the core page for users to obtain information.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 related information on the article detail page of Anqi CMS.

AnQi CMS adopts an intuitive and powerful template tag system, making it exceptionally easy to call various data in the front-end page. For article detail pages, we mainly use several core tags: used to obtain detailed information about articles.archiveDetailand used to display the category and tag listcategoryDetailandtagList.

Display the category information of the article

When a visitor reads an article, they will usually want to know which major category the article belongs to, which helps them understand the positioning of the article and also facilitates their further exploration of similar content.In AnQi CMS, it is very direct to retrieve and display the category information of articles.

First, in the article detail page template (usually{模型table}/detail.htmlIn this case, you can access the detailed data of the current article. To get the classification information of the current article, we can usearchiveDetailTags to directly extract the classification object of the article. This tag provides a namedCategoryfield that returns a classification object containing complete information such as classification ID, name, and link.

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

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

This code first goes througharchiveDetailThe tag assigns the category information of the current article toarchiveCategoryVariable. Then, you can access it as a regular object attributearchiveCategory.Linkand (category link)archiveCategory.Title(category name), and display it on the page.

If you need to display more detailed classification information, such as the description or thumbnail of the classification, you can also access it througharchiveCategorythis variable, for examplearchiveCategory.DescriptionorarchiveCategory.ThumbThis way makes it very convenient to call classification information.

Display the tag list of the article

Tags are another important dimension of articles, describing content in a more flexible and granular way, which helps users discover more relevant content.In Anqi CMS, displaying the tag list of articles is also simple.

The tag list of the article can be accessed throughtagListGet the label. This label 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 article ID.

This is an example of displaying 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 block,tagList tags with limit="10"It will retrieve the maximum of 10 tags from the current article and store them intagsa variable. Next, we useforLoop throughtagsList, generate a hyperlink with its title (item.Title) and the links(item.Link).

It is worth noting that we also use{% else %}statements. 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" instead of an empty area, which can avoid blank layout on the page and improve user experience.

Integration and optimization

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

Consider a more complete 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>

In this example, we first display the article title, followed by the metadata section, including the category, publish date, and reading volume.The article content follows, followed by a carefully arranged list of related tags.Through such a layout, visitors can easily obtain all the key information of the article and can easily click on categories or tags to explore more interesting content when needed.

Reasonably organize and present these related information, not only can it enhance the professionalism and user satisfaction of the website, but also provide more content relevance clues for search engines, which is helpful to improve the overall weight and inclusion performance of the website.

Frequently Asked Questions (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, get the parent ID of the current article category, and then use this ID to query the details of the parent category again.

{% 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 %}

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

Anqicms defaults to a document belonging to only one category, thereforearchiveDetailthe tags returned byCategoryAn object is a single category. If you need an article to belong to multiple categories, this requires a custom content model or to manually link within the article content.But from the perspective of system design, it encourages single ownership to maintain the clarity of the content structure.

3. How to add different CSS styles to each tag in the tag list?

The style of the tag list can be set by adding<a>a class name to the tag (as shown in the example)tag-itemTo implement. Then, you can define styles in the website's CSS file for.tag-itemor use pseudo-classes:nth-child()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;
}

In this way, you can assign beautiful and practical display effects to the category and tag list of the article detail page according to your design requirements.