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 and makes the website structure more intuitive, but also helps search engines better understand the hierarchy of website content, improving SEO effectiveness.

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

Locate the template file

First, you need to find the corresponding document detail page template file.In most cases, the document detail page template of AnQiCMS is located in the corresponding model directory within the template theme folder you are currently using.For example, if it is an article model, you might be in/template/{您的模板名称}/article/detail.htmlFind it.

Core idea: use built-in variables to obtain classification information

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.archiveVariables not only contain document titles, content, publishing time, etc., but also include related data of their categories.

To display the category name and category link, we can directly fromarchiveExtract it from the variableCategorythis attribute.CategoryThe attribute itself is an object that includes the categorization ofTitleCategory name andLink(Category link).

The following are the specific 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 code for category name and linkInsert the following code snippet at the location where you want to display the category name and link:

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

    Let's interpret 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. Ifarchive.CategoryExists, that is, if the document has categories, then executeifThe code within the block. Here is-The symbol is to remove the extra blank lines generated by the tag line, making the generated HTML more concise.
    • <div class="article-category">...</div>This is an HTML structure, you can adjust the class name or tag 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 will output the URL address of the category, ensuring that users can click and jump to the list page of the category.
      • title="查看更多关于 {{ archive.Category.Title }} 的文章": Added tooltip text to the link, enhancing user experience and SEO friendliness.
      • {{ archive.Category.Title }}: Outputs the name of the category, which is the text displayed on the page by the user.

  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 should be a clickable link.

Expand usage: usecategoryDetailTag

Although directly througharchive.CategoryThe object retrieval of category information is the simplest way, but in certain specific scenarios, such as when you only know the category ID, or need to retrieve more custom fields of the category, you can also usecategoryDetail.

For example, if you want to get the details of the category through the document'sCategoryIdYou can operate independently to get the details of the category like this:

{% 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'sCategoryId, then use this ID as a parameter to pass tocategoryDetailLabel, thus obtaining the complete classification object, and then extracting itsLinkandTitle.

Summary

In AnQiCMS, displaying the category name and link of the article is a very direct process. By utilizing the automatically provided details page of the document,archiveVariable, you can easily access itsCategoryproperties, and extract the required category names and links, quickly implement this function, thus enhancing the usability and clarity of the website's content organization.

Frequently Asked Questions (FAQ)

Q1: Why is the category name or link not displayed when I add code on the document detail page?A1: There may be several reasons. First, make sure your document is indeed associated with a category.You can check the 'Category' option while editing documents in the background.Next, check if you have correctly added the code to the correct template file (such asdetail.htmlIn addition, make sure that after saving the template file, if AnQiCMS has enabled caching, you may need to clear the website cache (usually there is a "Update Cache" function in the background) to see the modified effect.

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 usearchiveListTag loops through each article. Inside the loop, the data of each article is usually bound to a variable (such asitem). You can access it just like on the detail page,{{ item.Category.Title }}and{{ item.Category.Link }}To get and display the category name and link of each article.

Q3: How to display the category name as part of the breadcrumb navigation?A3: AnQiCMS is built-in with a specialbreadcrumbtag to generate breadcrumb navigation. You just need to use it in the template header (usuallybash.htmlorheader.htmlThen proceedextendsorincludeimporting){% breadcrumb crumbs %}tag, and traversecrumbsThe variable can be used. AnQiCMS will automatically judge and generate a complete breadcrumb path including the category name based on the current page URL structure, without the need for you to manually fromarchive.Categoryfrom it.