在构建和优化网站时,清晰的导航结构对于用户体验和搜索引擎优化都至关重要。安企CMS(AnQiCMS)为我们提供了强大的模板标签,其中categoryList标签便是用于在网站首页或侧边栏灵活展示文章或产品分类列表的核心工具。通过它,我们可以轻松地将网站内容组织得井井有条,让访问者一眼就能找到他们感兴趣的信息。

为什么分类列表如此重要?

想象一下,当访问者来到一个内容丰富的网站,如果所有文章或产品都堆积在一起,没有明确的分类,他们可能会感到无从下手,很快便离开。一个结构清晰的分类列表,不仅能帮助用户快速定位信息,提升浏览效率,还能向搜索引擎传达网站内容的组织逻辑,有助于提升网站的抓取效率和排名。无论是展示最新资讯的“新闻中心”,还是罗列商品种类的“产品展示”,categoryList都能派上用场。

掌握 categoryList 标签的基本用法

categoryList标签的核心作用是获取我们后台设置好的分类数据。它的基本结构通常是一个以{% categoryList ... %}开始,以{% endcategoryList %}结束的区块。在这个区块内部,我们可以通过循环来遍历获取到的每一个分类信息。

让我们来看看这个标签的一些关键参数,它们赋予了我们极大的灵活性:

  • moduleId: 这是指定内容模型的关键参数。安企CMS支持多种内容模型,例如文章、产品等。通过设置moduleId,我们可以精确地告诉系统我们想要获取哪种内容类型的分类。例如,如果想要展示文章分类,通常会使用moduleId="1";如果是产品分类,则可能是moduleId="2"(具体的ID可以在后台“内容管理” -> “内容模型”中查看)。
  • parentId: 这个参数用于控制分类的层级关系。
    • 当我们希望只显示网站的顶级分类时,可以设置parentId="0"。这在首页或主导航中非常常见。
    • 如果我们想获取某个特定分类下的子分类,可以将该父分类的ID赋值给parentId
    • 更进一步,如果在一个分类列表页面,我们想显示当前分类的“兄弟”分类,可以设置parentId="parent"
  • all: 顾名思义,当设置为all=true时,它将获取指定模型下的所有分类,无论层级。这在一些特殊的展示需求,比如生成网站地图时可能用到。
  • limit: 这个参数允许我们控制展示分类的数量,比如limit="10"会只显示前10个分类。对于列表页,它还支持偏移量模式,例如limit="2,10"表示从第2条数据开始获取10条。
  • siteId: 对于使用安企CMS多站点管理功能的用户,siteId可以帮助我们调用特定站点下的分类数据。一般情况下,我们无需手动设置。

遍历与显示分类信息

当我们使用categoryList标签获取到分类数据后,通常会结合for循环来遍历这些数据,并将每个分类的详细信息展示出来。在循环中,我们可以通过item变量访问每个分类的属性,比如:

  • {{item.Id}}: 分类的唯一标识ID。
  • {{item.Title}}: 分类的名称,这是最常显示的内容。
  • {{item.Link}}: 分类页面的访问链接,方便用户点击跳转。
  • {{item.Description}}: 分类的简要描述。
  • {{item.Logo}}{{item.Thumb}}: 分类对应的缩略图或Logo图片链接。
  • {{item.HasChildren}}: 一个布尔值,表示该分类是否有下级子分类,这在构建多级导航时非常有用。
  • {{item.IsCurrent}}: 表示当前分类是否是当前页面所处的分类,可以用来给当前分类添加高亮样式。
  • {{item.ArchiveCount}}: 该分类下包含的文章或产品数量。

实际应用:在首页或侧边栏展示分类列表

下面我们通过几个实际的例子,来演示如何运用categoryList标签。

1. 在首页或侧边栏展示顶级文章分类

假设我们希望在首页的侧边栏显示我们所有的顶级文章分类,让用户快速了解网站的主要内容方向。

<div class="sidebar-block">
    <h3>文章分类</h3>
    <ul>
        {% categoryList categories with moduleId="1" parentId="0" %}
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }} ({{ item.ArchiveCount }})</a>
        </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

这段代码首先通过moduleId="1"指定了我们要获取文章分类,然后通过parentId="0"确保只获取顶级分类。在循环中,我们展示了每个分类的名称和它包含的文章数量,并链接到对应的分类页面。

2. 在侧边栏展示产品分类及其子分类

对于产品展示型网站,我们可能需要在侧边栏提供更详细的产品分类导航,包括多级子分类。

<div class="sidebar-block">
    <h3>产品分类</h3>
    <ul>
        {% categoryList productCategories with moduleId="2" parentId="0" %}
        {% for parentItem in productCategories %}
        <li>
            <a href="{{ parentItem.Link }}">{{ parentItem.Title }}</a>
            {% if parentItem.HasChildren %}
            <ul class="sub-categories">
                {% categoryList subCategories with parentId=parentItem.Id %}
                {% for subItem in subCategories %}
                <li>
                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                </li>
                {% endfor %}
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

在这个例子中,我们首先获取顶级产品分类。在遍历每个顶级分类时,我们通过parentItem.HasChildren判断它是否有子分类。如果存在,我们便嵌套调用categoryList,并将parentId设置为当前顶级分类的Id(即parentItem.Id),从而获取并展示其下的子分类。这种嵌套结构能够非常直观地展现多级分类体系。

3. 分类列表结合最新文章展示

有时候,我们不仅想显示分类本身,还希望每个分类下能展示几篇最新的文章,这在首页内容聚合区域非常常见。

<div class="homepage-section">
    {% categoryList categories with moduleId="1" parentId="0" limit="4" %}
    {% for catItem in categories %}
    <div class="category-block">
        <h3><a href="{{ catItem.Link }}">{{ catItem.Title }}</a></h3>
        <ul>
            {% archiveList articles with type="list" categoryId=catItem.Id limit="5" %}
            {% for artItem in articles %}
            <li>
                <a href="{{ artItem.Link }}">{{ artItem.Title }}</a>
                <span class="publish-date">{{ stampToDate(artItem.CreatedTime, "2006-01-02") }}</span>
            </li>
            {% empty %}
            <li>该分类下暂无文章。</li>
            {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>
    {% endfor %}
    {% endcategoryList %}
</div>

这里我们首先获取了4个顶级文章分类。在每个分类的循环内部,我们又使用archiveList标签来获取该分类下最新的5篇文章(通过categoryId=catItem.Idlimit="5")。stampToDate过滤器则帮助我们将文章的发布时间戳格式化为易读的日期。

总结

categoryList标签是安企CMS内容运营的基石之一,它赋予了我们构建清晰、高效网站导航的强大能力。通过灵活运用其参数,并结合其他标签,我们可以实现从简单的分类展示到复杂的列表聚合等多种需求。一个精心设计的分类列表,不仅能提升用户的浏览体验,也能为网站的SEO表现贡献一份力量。


常见问题 (FAQ)

1. 我的分类列表为什么没有显示任何内容?

首先,请检查您的后台是否已经创建了对应的文章或产品分类。其次,确保moduleId参数设置正确,它告诉系统您想获取哪种类型的分类(例如文章通常是moduleId="1",产品是moduleId="2")。如果只想显示顶级分类,也请确认parentId="0"参数已正确添加。

2. 如何为当前访问的分类页面,在侧边栏高亮显示对应的分类?

categoryList循环中,每个item都包含一个IsCurrent属性。您可以利用这个属性来添加CSS类,例如: <li><a href="{{ item.Link }}" class="{% if item.IsCurrent %}active{% endif %}">{{ item.Title }}</a></li> 这样,当用户访问某个分类页面时,侧边栏中的该分类链接就会被高亮显示。

3. 我想显示一个分类下的所有子分类,无论层级有多少,应该怎么做?

categoryList标签本身只支持一层子分类的直接获取(通过指定parentId)。如果需要显示无限层级的子分类,您需要通过递归调用或结合其他逻辑在模板中实现。通常的做法是在循环中再次调用categoryList,将当前item.Id作为parentId传入,并配合item.HasChildren进行判断。不过,对于大多数网站而言,两到三级分类就已经足够提供清晰的导航了。