在网站运营中，构建一个高效、易于维护的网站是成功的关键。安企CMS（AnQiCMS）深知这一点，它提供了灵活的模板机制，使得我们能够轻松地在页面中嵌入可重用的显示组件，如侧边栏和面包屑导航。这种模块化的方法不仅提高了开发效率，也确保了网站整体风格的一致性和未来的可维护性。

本文将深入探讨在AnQiCMS中如何利用其模板系统，有效地创建和嵌入这些重要的可重用组件。

理解AnQiCMS的模板组件化理念

AnQiCMS的模板系统采用了类似Django模板引擎的语法，这对于熟悉MVC或前端框架的开发者来说非常友好。其核心理念之一就是“代码片段”（partial）的运用，它允许我们将页面中独立、可重复使用的部分抽取出来，单独管理。

核心机制：partial/目录与include标签

根据AnQiCMS的模板约定，所有可重用的代码片段都建议存放在模板根目录下的 partial/ 目录中。例如，一个侧边栏文件可以命名为 partial/sidebar.html，一个页脚文件可以命名为 partial/footer.html。

当我们需要在页面中引入这些代码片段时，就可以使用 include 标签。这个标签能够将指定模板文件的内容嵌入到当前模板中，大大减少了代码冗余。

制作你的第一个可重用组件：以侧边栏为例

侧边栏是网站中常见的可重用组件，通常用于展示最新文章、热门分类、联系方式等信息。我们以创建一个包含“最新文章”和“网站联系方式”的侧边栏为例。

1. 规划侧边栏内容

一个典型的侧边栏可能需要：

  • 最新发布的文章列表。
  • 网站的联系信息，如电话、邮箱。
  • （可选）热门分类列表。

2. 创建侧边栏文件

在你的模板目录下，创建一个 partial 文件夹（如果不存在），然后在其中新建一个文件，例如命名为 sidebar.html。

3. 编写侧边栏代码

在 sidebar.html 中，我们可以使用AnQiCMS提供的各种模板标签来获取所需的数据并展示：

<aside class="sidebar">
    <div class="widget recent-posts">
        <h3>最新文章</h3>
        <ul>
            {% archiveList archives with type="list" moduleId="1" limit="5" %}
                {% for item in archives %}
                    <li><a href="{{item.Link}}">{{item.Title}}</a></li>
                {% empty %}
                    <li>暂无最新文章</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>

    <div class="widget contact-info">
        <h3>联系我们</h3>
        <p>电话：{% contact with name="Cellphone" %}</p>
        <p>邮箱：{% contact with name="Email" %}</p>
        <p>地址：{% contact with name="Address" %}</p>
    </div>

    {# 更多组件，例如热门分类 #}
    <div class="widget categories">
        <h3>热门分类</h3>
        <ul>
            {% categoryList categories with moduleId="1" parentId="0" limit="5" %}
                {% for item in categories %}
                    <li><a href="{{item.Link}}">{{item.Title}}</a></li>
                {% empty %}
                    <li>暂无分类</li>
                {% endfor %}
            {% endcategoryList %}
        </ul>
    </div>
</aside>

这段代码中：

  • archiveList 标签用于获取文章模型（moduleId="1"）下最新的5篇文章。
  • contact 标签用于直接获取后台设置的联系方式信息。
  • categoryList 标签用于获取文章模型（moduleId="1"）下的顶级分类列表。

4. 在页面中嵌入侧边栏

现在，你可以在任何需要显示这个侧边栏的页面模板中（例如 index/index.html、archive/detail.html，或者更常见的是在你的全局布局文件 base.html 中），使用 include 标签将其嵌入：

{# 假设这是你的基础布局文件 base.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {# ... 头部内容 ... #}
</head>
<body>
    <header>{# ... 网站头部 ... #}</header>

    <div class="main-content">
        <div class="left-column">
            {# 这里嵌入侧边栏 #}
            {% include "partial/sidebar.html" %}
        </div>
        <div class="right-column">
            {% block content %}
                {# 页面主要内容将在这里显示 #}
            {% endblock %}
        </div>
    </div>

    <footer>{# ... 网站底部 ... #}</footer>
</body>
</html>

通过这样的方式，侧边栏组件就被成功嵌入，并且可以在多个页面中复用，任何对 sidebar.html 的修改都会即时反映在所有引用它的页面上。

轻松添加面包屑导航

面包屑导航（Breadcrumb）是网站中另一个重要的可重用组件，它能清晰地展示用户当前所处的位置，提高网站的可用性。AnQiCMS提供了专门的 breadcrumb 标签来简化这一过程。

1. 使用breadcrumb标签

breadcrumb 标签的用法非常直观，通常它会根据当前页面的URL结构和内容（如分类、文章标题）自动生成导航路径。

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="首页" title=true %}
        <ul>
            {% for item in crumbs %}
                <li><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endfor %}
        </ul>
    {% endbreadcrumb %}
</nav>

2. 参数说明

  • index="首页"：用于设定面包屑导航的起始点名称，默认也是“首页”。
  • title=true：当在文章详情页时，它会决定是否将文章标题作为面包屑的最后一项。设置为 true 会显示文章标题，设置为 false 则不显示。如果设置为其他具体值（如 title="文章详情"），则会显示该值。

3. 嵌入位置

面包屑导航通常放置在网站头部下方，主内容区域的上方，以便用户一眼就能看到自己的位置。例如，在你的 base.html 布局文件中，可以在 <header> 之后、{% block content %} 之前嵌入：

{# 假设这是你的基础布局文件 base.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {# ... 头部内容 ... #}
</head>
<body>
    <header>{# ... 网站头部 ... #}</header>

    <div class="main-content">
        {# 面包屑导航通常放在这里 #}
        <nav class="breadcrumb-nav">
            {% breadcrumb crumbs with index="首页" title=true %}
                <ul>
                    {% for item in crumbs %}
                        <li><a href="{{item.Link}}">{{item.Name}}</a></li>
                    {% endfor %}
                </ul>
            {% endbreadcrumb %}
        </nav>

        <div class="page-content">
            {% block content %}
                {# 页面主要内容 #}
            {% endblock %}
        </div>
    </div>

    <footer>{# ... 网站底部 ... #}</footer>
</body>
</html>

高级用法与注意事项

1. 传递上下文数据给组件

有时，你希望一个可重用组件能够根据它被嵌入的页面，显示不同的内容。这时，可以通过 include 标签的 with 参数