As a senior website operator for AnQiCMS, I know that efficient content organization and presentation are crucial for user experience and SEO.Categorization list, especially multi-level nested categorization lists, can clearly present the hierarchical structure of the website content, guide users to find more interesting content, and also provide clear site structure information for search engines.This article will detailedly explain how to call the article or product category list in the AnQiCMS template and achieve multi-level nested display effects.
Understanding AnQiCMS template basics and classification logic
AnQiCMS uses a syntax similar to the Django template engine, making template development and customization intuitive and easy to learn.In AnQiCMS, content (such as articles, products) is closely associated with the 'content model', and categories further organize these contents.Each category belongs to and only belongs to one content model, which means that article categories and product categories are independent of each other.When calling the category list in the template, we need to specify the content model ID it belongs to, for example, the article model is usually ID 1, and the product model is usually ID 2.
AnQiCMS template files are usually stored in/templatedirectory, through structured tags (with{%and%}Wrap) for logical control, variables use double curly braces{{}}Outputting. This design allows us to flexibly build complex classified navigation structures through nested loops and conditional judgments.
Invoke the basic category list.
To display the most basic classification list on a page, such as the top navigation menu of a website, we can usecategoryListThe tag allows us to filter and retrieve category data based on model ID and parent category ID.
For example, if you want to get the list of all top-level article categories, you can use the following code:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for item in categories %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
In this code block:
categoryListIt is a label for the category list,categoriesIt is the variable name defined for the category data we obtain.moduleId="1"Specified that we need to retrieve the category of the article model (ID 1).parentId="0"Means that we only retrieve top-level categories without parent categories.forLoop throughcategoriesEach category item in the variable.item.Linkanditem.TitleUsed to output the links and titles of categories.
In this way, you can easily build the main navigation menu of a website or the top-level category display of a certain content area.
Implement hierarchical category nesting
Hierarchical category nesting is the key to building complex navigation and content indexing. AnQiCMS'scategoryListTag throughparentIdParameters and categories自带HasChildrenProperties that make it very convenient to implement multi-level nesting. We can call another category loop inside.categoryListTag to get the subcategories of the current category.
Here is a typical code example for implementing a three-level category nesting:
{% categoryList categories with moduleId="1" parentId="0" %}
{# 一级分类开始 #}
<ul>
{% for item in categories %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 判断当前一级分类是否有子分类 #}
{% if item.HasChildren %}
{# 二级分类开始：调用当前一级分类的子分类 #}
<ul>
{% categoryList subCategories with parentId=item.Id %}
{% for inner1 in subCategories %}
<li>
<a href="{{ inner1.Link }}">{{inner1.Title}}</a>
{# 判断当前二级分类是否有子分类 #}
{% if inner1.HasChildren %}
{# 三级分类开始：调用当前二级分类的子分类 #}
<ul>
{% categoryList subCategories2 with parentId=inner1.Id %}
{% for inner2 in subCategories2 %}
<li>
<a href="{{ inner2.Link }}">{{inner2.Title}}</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
{# 三级分类结束 #}
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
{# 二级分类结束 #}
{% endif %}
</li>
{% endfor %}
</ul>
{# 一级分类结束 #}
{% endcategoryList %}
In this example:
- The outermost
categoryListGet the top-level category (parentId="0"). - in the first
forloop, we use{% if item.HasChildren %}to determine if the current category has subcategories. - If there is a subcategory, it will call again
categoryListThis time willparentIdSet to the current loop item'sitem.IdTo get its direct subcategories. We will store these subcategories insubCategoriesthe variable. - This pattern can be followed, by continuously nesting
categoryListandforLoop, cooperateHasChildrenJudge, to achieve classification nesting of any depth
Integration display of classification with article/product content
In addition to simply displaying the classification structure, you may also need to display related articles or product lists directly under the classification, or display content when there are no sub-classifications. This can be achieved by combiningarchiveListthe tag.
For example, in a product category navigation, if a category has subcategories, we want to display its subcategories; if it does not have subcategories, we want to display the product list under the category:
<div>
{% categoryList productCategories with moduleId="2" parentId="0" %}
{% for item in productCategories %}
<a href="{{item.Link}}">{{item.Title}}</a>
<ul class="ind-pro-nav-ul">
{% if item.HasChildren %}
{# 如果有子分类，显示子分类列表 #}
{% categoryList subCategories with parentId=item.Id %}
{% for inner in subCategories %}
<li><a href="{{inner.Link}}" title="">{{inner.Title}}</a></li>
{% endfor %}
{% endcategoryList %}
{% else %}
{# 如果没有子分类，显示当前分类下的产品列表 #}
{% archiveList products with type="list" categoryId=item.Id limit="8" %}
{% for inner in products %}
<li><a href="{{inner.Link}}" title="">{{inner.Title}}</a></li>
{% endfor %}
{% endarchiveList %}
{% endif %}
</ul>
{% endfor %}
{% endcategoryList %}
</div>
This example shows how toHasChildrenThe boolean value of the attribute, dynamically renders subcategories in the category navigation or directly displays the content under the category.This is very useful for building a flexible product catalog or article theme, providing an experience tailored to the actual organization of the content.
optimize and **practice
Consider the following points when building a category list to further optimize the performance and maintainability of the website:
- Style separation: Template code focuses on data logic and structure, while the visual style of lists and navigation should be controlled through external CSS files. This helps to maintain the cleanliness and readability of the template code.
- The precise use of model IDAlways specify clearly
moduleIdTo ensure that you obtain the classification under the required content model (article or product), avoiding confusion or incorrect data calls. - Use public code snippets: For complex, repeatedly used classification list structures, consider encapsulating them as public code snippets (partial), by using
{% include "partial/your_category_list.html" %}Make the call. This improves code reusability and simplifies the template structure. - Control the number of displays.: Use.
limitParameter limits the number of categories or articles called each time, especially on the homepage or other pages with high load. This helps to improve page loading speed and optimize user experience.
By proficiently using AnQiCMS providedcategoryListandarchiveListLabels, combined with its flexible template syntax, you can build a powerful and user-friendly classification navigation system for your website, thereby effectively managing and displaying your content.
Frequently Asked Questions (FAQ)
How can I ensure that I only get the top-level categories and not all categories?You can specify only the top-level categories by using thecategoryListSet in the labelparentId="0"parameter. For example:{% categoryList categories with moduleId="1" parentId="0" %}.
2. Why is my category list not displaying subcategories, even though I have set it in the background?Make sure you use it internally when looping through the parent categories.{% if item.HasChildren %}Make a judgment and call it again if the condition is metcategoryListAnd take itparentIdSet the parameter to the current parent categoryId. For example:{% categoryList subCategories with parentId=item.Id %}. If the amount of child category data is large, it may also be necessary to check whether it is setlimitThe parameter caused the content to not be displayed completely.
3. Can I, in a loop of a category list, judge whether there are subcategories and whether there are articles/products?Yes, you can.forin a loopitem.HasChildrenTo determine if there is a subcategory. Ifitem.HasChildrenWithtruethen the subcategory list can be called; if it isfalse, then