如何在页面中嵌入侧边栏或面包屑等可重用显示组件？
在网站运营中，构建一个高效、易于维护的网站是成功的关键。安企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 参数