如何使用`categoryList`标签在首页或侧边栏展示文章/产品分类列表?

📅 👁️ 73

在构建和优化网站时,清晰的导航结构对于用户体验和搜索引擎优化都至关重要。安企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进行判断。不过,对于大多数网站而言,两到三级分类就已经足够提供清晰的导航了。

相关文章

`breadcrumb`标签如何自动生成面包屑导航,并自定义首页显示文字?

网站的用户体验,很大程度上取决于导航的便捷性与清晰度。当访问者深入网站内容时,一个友好的“面包屑导航”(Breadcrumb Navigation)能清晰地指示当前位置,并提供返回上级页面的快速路径。安企CMS(AnQiCMS)深谙此道,提供了功能强大且易于使用的`breadcrumb`标签,让网站管理者无需复杂编码,即可自动生成路径,甚至能灵活定制首页的显示文字。 ### 自动生成面包屑导航

2025-11-08

如何利用`navList`标签构建支持二级下拉的网站导航菜单?

构建一个清晰、易用的网站导航菜单,是提升用户体验和网站专业度的重要一环。在安企CMS中,我们可以借助强大的`navList`标签,轻松实现支持二级下拉的导航菜单,让网站内容层级分明,方便访客浏览。 接下来,我们将一起探索如何利用`navList`标签,从后台配置到前端模板渲染,一步步打造一个功能完善的二级下拉导航。 ### 一、后台设置

2025-11-08

如何动态生成页面的Title、Keywords和Description(TDK)以优化SEO显示?

在网站运营中,Title(标题)、Keywords(关键词)和Description(描述)——简称TDK,是搜索引擎优化(SEO)的核心要素。它们直接影响网站在搜索引擎结果页(SERP)上的展现,进而决定了网站的点击率和流量。对于内容丰富的网站而言,手动为每一个页面设置TDK既不现实也不高效。AnQiCMS作为一个功能强大的内容管理系统,提供了灵活的机制

2025-11-08

`contact`标签如何便捷地显示公司联系电话和地址?

在网站运营中,清晰、便捷地展示公司联系方式,是提升用户信任和促进业务沟通的关键环节。无论是寻求合作、提供客户支持,还是仅仅为了让访客了解企业所在,联系信息都扮演着至关重要的角色。AnQiCMS 深知这一点,并通过其强大的模板标签系统,为我们提供了极其便捷的方式来管理和展示这些信息。 今天,我们就来深入探讨 AnQiCMS 中 `contact` 标签的巧妙之处

2025-11-08

如何获取并显示某个具体分类的名称、描述和缩略图?

在网站运营中,清晰有效地展示分类信息对于用户体验和搜索引擎优化都至关重要。一个具体分类的名称能帮助用户快速理解内容主题,简洁的描述能提供更多背景信息,而直观的缩略图则能吸引用户点击。安企CMS(AnQiCMS)提供了强大且灵活的模板标签功能,让您能够轻松获取并呈现这些关键的分类信息,无论是构建导航菜单、设计分类列表页,还是优化搜索引擎结果。 ###

2025-11-08

`pageList`和`pageDetail`标签如何用于展示“关于我们”等单页面内容?

在网站运营中,像“关于我们”、“联系方式”或“服务介绍”这类内容,通常以独立页面的形式存在,我们称之为“单页面”。它们不像博客文章那样频繁更新,但却是网站不可或缺的核心信息。安企CMS提供了`pageList`和`pageDetail`这两个标签,让您能够非常灵活且高效地管理和展示这些单页面内容。 ### 后台管理中的“单页面”内容 在深入了解标签用法之前

2025-11-08

`archiveList`标签如何根据分类、推荐属性或自定义排序显示文章列表?

在安企CMS的模板系统中,`archiveList` 标签是您构建动态内容列表的核心工具。无论是博客的文章列表、产品展示页面,还是新闻资讯模块,`archiveList` 都能帮助您根据多样化的需求,精确地筛选、排序并呈现内容,让您的网站内容区域焕发生机。 ### `archiveList` 的基础:理解它的工作方式 使用 `archiveList` 标签时

2025-11-08

文档详情页如何通过`archiveDetail`标签显示文章标题、内容、图片等信息?

在安企CMS中管理网站内容,文档详情页无疑是用户获取信息最核心的阵地。如何将每一篇精心撰写的文章,其标题、内容、图片以及各种附加信息,准确而生动地呈现在用户眼前,这就要巧妙运用我们的`archiveDetail`标签了。这个标签是专门为展示单篇文档详情而设计的,它的灵活运用将帮助您轻松构建出功能丰富、体验流畅的详情页面。 首先,让我们来认识一下`archiveDetail`标签的核心作用

2025-11-08