How to display the category name and category link of the article in the AnQiCMS document detail page?

Manage content in AnQiCMS, we often hope that visitors can clearly see the category name of this article when browsing the document details, and can conveniently click the category link to explore more content under the same category.This not only optimizes the user experience, makes the website structure more intuitive, but also helps search engines better understand the content hierarchy of the website, enhancing SEO effects.

To implement this feature on the document detail page of AnQiCMS, we need to make some simple modifications to the template file.AnQiCMS uses a template engine syntax similar to Django, which makes content calls and display very flexible.

Locate the template file

Firstly, you need to find the corresponding document detail page template file.通常情况下，AnQiCMS 的文档详情页模板会位于您当前使用的模板主题文件夹内的对应模型目录下。/template/{您的模板名称}/article/detail.htmlFind it.

核心思路：利用内置变量获取分类信息

In the document detail page, AnQiCMS will automatically provide the detailed information of the current document, which is usually accessible through a global variable namedarchive.archiveThe variable not only contains document title, content, publish time, etc., but also includes related data of its category.

To display the category name and category link, we can directly access fromarchiveExtracting from the variableCategoryattribute.CategoryThe attribute itself is an object that includes categoriesTitle(Category Name) andLink(Category links).

The following are specific operation steps and code examples:

1. Open the document detail template fileUse your preferred code editor to open the document detail page template corresponding to your website, for exampledetail.html.

2. Add the code for category names and linksIn the position where you want to display the category name and link, insert the following code snippet:

   {%- if archive.Category %}
   <div class="article-category">
       所属分类：<a href="{{ archive.Category.Link }}" title="查看更多关于 {{ archive.Category.Title }} 的文章">
           {{ archive.Category.Title }}
       </a>
   </div>
   {%- endif %}
   

   Let's decode this piece of code:

   • {%- if archive.Category %}This is a conditional judgment used to check if the current document has successfully associated with a category.archive.CategoryExists, i.e., if the document has categories, then executeifThe code within the block. Here,-The symbol is used to remove extra blank lines generated by tag lines, making the generated HTML more concise.
   • <div class="article-category">...</div>：This is an HTML structure, you can adjust the class names or tags according to your website style.
   • 所属分类：：This part is static text, you can modify it as needed.
   • <a href="{{ archive.Category.Link }}" title="...">...</a>：This is the core of generating category links.
     • {{ archive.Category.Link }}：It outputs the URL address of the category, ensuring that the user can click and jump to the list page of the category after clicking.
     • title="查看更多关于 {{ archive.Category.Title }} 的文章"：Added tooltip text for links to improve user experience and SEO friendliness.
     • {{ archive.Category.Title }}：It will output the name of the category, which is the text of the category that users see on the page.

3. Save and refresh the pageSave the template file and refresh your document details page.If everything is set correctly, you should be able to see the category name of the article, and it is a clickable link.

Expand Usage: UsecategoryDetailtags

Although through directlyarchive.CategoryObject retrieval by category is the simplest method, but in some specific scenarios, such as when you only know the category ID, or when you need to retrieve more custom fields of the category, you can also usecategoryDetailLabel.

For example, if you want to get the details of the document throughCategoryIdto independently obtain the details of the category, you can operate as follows:

{% archiveDetail currentCategoryId with name="CategoryId" %} {# 获取当前文档的分类ID #}
{% if currentCategoryId %}
    {% categoryDetail currentCategory with id=currentCategoryId %} {# 通过分类ID获取分类详情对象 #}
    {% if currentCategory %}
    <div class="article-category">
        所属分类（另一种方式）：<a href="{{ currentCategory.Link }}" title="更多 {{ currentCategory.Title }}">
            {{ currentCategory.Title }}
        </a>
    </div>
    {% endif %}
{% endif %}

This code first usesarchiveDetailtag to get the current article'sCategoryIdand then use this ID as a parameter to pass tocategoryDetailLabels, thus obtaining the complete classification object, and then extracting itLinkandTitle.

Summary

In AnQiCMS, displaying the category name and link of the article is a very straightforward process. By utilizing the automatically provided details page document.archiveVariable, you can easily access itCategoryAttribute, and extract the required category name and link from it, quickly realize this function, thus enhancing the usability of the website and the clarity of content organization.

---

Common Questions (FAQ)

Q1: Why didn't the category name or link show up when I added code to the document detail page?A1: There may be several reasons.Firstly, please make sure that your document is indeed associated with a category.You can check the 'Category' option while editing documents in the background.detail.html）中。Additionally, ensure that the template file is saved, and if AnQiCMS has cache enabled, you may need to clear the website cache (usually there is a "Update Cache" function in the background) to see the effect of the changes.

Q2: Can I directly display the category name and link of each article in the article list?A2: Of course you can. In the article list template (for examplearticle/list.html), you will usearchiveListLabel loops through each article. The data of each article is usually bound to a variable within the loop (for exampleitem). You can do this just like in the detail page,{{ item.Category.Title }}and{{ item.Category.Link }}Get and display the category name and link for each article.

Q3: How to display the category name as part of the breadcrumb navigation?A3: AnQiCMS 内置了专门的 Englishbreadcrumb标签来生成面包屑导航。您只需在模板的头部（通常是 English）使用bash.htmlorheader.htmland then throughextendsorinclude引入）使用 English{% breadcrumb crumbs %}标签，并遍历 Englishcrumbs变量即可。AnQiCMS 会根据当前页面的URL结构，自动判断并生成包含分类名称在内的完整面包屑路径，无需您手动从Englisharchive.CategoryExtracted from it.