在AnQiCMS模板中构建灵活的多级分类导航与内容展示

网站内容的有效组织是提供良好用户体验和提升搜索引擎可见性的关键一环。无论是企业官网、产品展示还是自媒体博客，清晰的多级分类导航都能帮助用户快速找到所需信息，同时也有利于搜索引擎理解网站结构。AnQiCMS作为一个高效、可定制的内容管理系统，提供了灵活的模板标签，让我们可以轻松实现复杂的多级分类导航和内容展示。

接下来，我们将一起探讨如何在AnQiCMS模板中创建多级分类导航，并巧妙地显示其子分类或相关文档。

一、后台分类结构的规划与设置

在着手模板开发之前，首先需要确保后台的分类结构是清晰且有逻辑的。AnQiCMS允许您创建无限层级的分类，并将其与不同的内容模型（如文章、产品）关联。

  1. 创建内容模型： 如果您尚未创建，可以在“内容管理”下的“内容模型”中，定义您的内容类型，例如“文章”模型、“产品”模型。每个模型都可以有自己独特的自定义字段。
  2. 构建分类层级：
    • 进入“内容管理”下的“文档分类”，开始创建您的顶级分类。在添加新分类时，选择对应的“文档模型”，并将“上级分类”设置为“顶级分类”。
    • 接着，为这些顶级分类创建子分类。在添加子分类时，同样选择对应的“文档模型”，并将“上级分类”指向您刚创建的顶级分类。您可以重复这个过程，构建出多层级的分类结构。
    • 在分类的“其他参数”中，您可以为每个分类设置自定义URL、分类模板、SEO标题等，这些都将为前端展示提供更多的灵活性和优化空间。

二、在模板中实现多级分类导航

AnQiCMS提供了强大的模板标签，让您在前端轻松调用和展示后台设置的多级分类。最常用的标签是categoryList和navList。

1. 使用 categoryList 构建动态分类导航

categoryList标签是用于获取文章或产品分类列表的核心工具。它能根据您的需求，动态地列出分类，并支持多级嵌套。

要构建一个多级分类导航，我们通常会结合for循环和if判断来递归地显示分类。

首先，我们可以获取所有顶级分类：

{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
    {% for item in categories %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {# 判断当前分类是否有子分类，如果有，则继续嵌套显示 #}
        {% if item.HasChildren %}
            {# 在这里再次调用 categoryList 获取当前分类的子分类 #}
            {% categoryList subCategories with parentId=item.Id %}
            <ul>
                {% for inner1 in subCategories %}
                <li>
                    <a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
                    {# 可以继续嵌套第三级，甚至更多层级 #}
                    {% if inner1.HasChildren %}
                        {% categoryList subCategories2 with parentId=inner1.Id %}
                        <ul>
                            {% 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 %}

在这段代码中：

  • 外层的{% categoryList categories with moduleId="1" parentId="0" %}获取了moduleId为1（假设是文章模型）的所有顶级分类。
  • item.Link和item.Title分别用于输出分类的链接和名称。
  • {% if item.HasChildren %}是一个关键判断，它检查当前分类是否有下级分类。
  • 如果存在子分类，我们会在内部再次使用{% categoryList subCategories with parentId=item.Id %}，将当前分类的Id作为parentId传入，从而获取并显示其子分类。这种方式可以无限层级地嵌套下去，以匹配您在后台设置的分类深度。

2. 利用 navList 实现后台可配置的多级导航

如果您希望导航结构可以在后台“导航设置”中灵活调整，而不仅仅是根据分类自动生成，那么navList标签是更好的选择。navList支持在后台配置两级导航。

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 判断是否有二级导航 #}
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

navList标签直接返回预设好的多级导航结构，item.NavList属性就是它的子导航列表。item.IsCurrent可以帮助您高亮显示当前页面所属的导航项，提升用户体验。

三、在导航中显示子分类或相关文档

无论是使用categoryList还是navList构建的多级导航，我们都可以在其内部的循环中进一步获取并展示子分类下的文档。

假设我们想在二级分类的下方，展示该分类下的部分文章：

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {# 这里我们假定inner.PageId是这个二级导航对应的分类ID #}
                {% if inner.PageId > 0 %}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %}
                    <ul class="nav-menu-child-child">
                        {% for doc in products %}
                        <li><a href="{{doc.Link}}">{{doc.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

在上面的例子中，我们在二级导航的循环{% for inner in item.NavList %}内部，通过archiveList标签获取了与当前二级导航关联的分类下的文档。

  • archiveList的type="list"表示获取普通列表。
  • categoryId=inner.PageId是关键，它将当前循环中的子分类ID传递给文档列表标签，从而只显示该子分类下的文档。
  • limit="8"则限制了显示文档的数量。

四、优化用户体验与SEO

构建多级分类导航不仅仅是展示那么简单，还需要考虑用户体验和搜索引擎优化：

  • 面包屑导航： 在详情页或列表页，通过breadcrumb标签显示当前位置的面包屑导航，能帮助用户了解其在网站结构中的位置，并方便返回上级页面。 
    
{% breadcrumb crumbs with index="首页" title=true %}
<nav class="breadcrumb">
    {% for item in crumbs %}
        {% if not forloop.Last %}
        <a href="{{item.Link}}">{{item.Name}}</a> &gt;
        {% else %}
        <span>{{item.Name}}</span>
        {% endif %}
    {% endfor %}
</nav>
{% endbreadcrumb %}
  • 友好的URL结构： 在后台的“功能管理”->“伪静态规则”中，选择或自定义SEO友好的URL模式，例如包含分类名称或模型名称的模式，这对于搜索引擎抓取和用户记忆都非常有益。
  • TDK（标题、描述、关键词）： 确保每个分类页都有独特的SEO标题、关键词和描述。您可以在后台“文档分类”编辑页面为每个分类单独设置这些信息。在模板中