在网站开发和运营中,页头(Header)和页脚(Footer)几乎是每个页面都不可或缺的部分。它们承载着导航、品牌标识、版权信息、联系方式等重要内容。然而,如果每个页面都独立编写这些代码,不仅会造成大量重复工作,还会让后续的修改和维护变得异常复杂。想象一下,如果网站有上百个页面,每次要修改导航菜单或者底部版权信息,都需要手动逐一调整,那将是多么低效和容易出错。
幸运的是,AnQiCMS 提供了强大而灵活的模板机制,能够帮助我们优雅地解决这个问题。它允许我们将公共的页头和页脚代码片段抽取出来,集中管理和复用,从而大幅提升网站的开发效率和维护便利性。
为什么模块化管理页头和页脚至关重要?
将页头和页脚代码片段化并集中管理,带来的好处是显而易见的:
- 提升维护效率:所有页头或页脚的修改,只需在一个文件中进行,即可影响全站。这极大地减少了重复劳动,降低了出错的风险。
- 确保全站一致性:无论是品牌视觉、导航结构还是法律声明,模块化管理能确保它们在所有页面上保持统一,提升用户体验和品牌专业度。
- 优化团队协作:在多开发人员参与的项目中,不同成员可以专注于各自模块的开发,减少代码冲突,提高协作效率。
- 改善代码可读性:页面模板只包含核心内容代码,结构更加清晰,易于阅读和理解。
- 有利于 SEO:避免大量重复的冗余代码,使搜索引擎爬虫能更高效地抓取和理解页面内容。
AnQiCMS 采用了类似 Django 模板引擎的语法,这使得内容运营者和开发者都能非常容易上手。它主要通过两种核心机制来实现模板的模块化管理:include 标签和 extends 标签。
方法一:使用 include 标签,灵活组合代码片段
include 标签的作用,就像搭积木一样,将常用的小部件预先制作好,然后在需要的地方“嵌入”进来。对于那些不构成页面整体骨架,但在多个地方重复出现的小块代码,比如侧边栏、面包屑、独立的广告位,甚至是简单的页头和页脚,include 都是一个非常便捷的选择。
基本用法:
假设你已经将页头代码保存在 partial/header.html 文件中,页脚代码保存在 partial/footer.html 文件中(partial 目录是 AnQiCMS 推荐存放代码片段的地方),那么你可以在任何页面模板中,通过以下方式引入它们:
{# 引入公共页头 #}
{% include "partial/header.html" %}
{# 页面核心内容 #}
<main>
<h1>这是页面的主要内容</h1>
<p>这里是页面的详细信息...</p>
</main>
{# 引入公共页脚 #}
{% include "partial/footer.html" %}
传递变量:
有时,被引入的页头或页脚可能需要一些当前页面的特定信息。例如,页头可能需要显示当前页面的标题。你可以使用 with 关键字向 include 的模板传递变量:
{% include "partial/header.html" with pageTitle="当前文章详情" %}
然后在 partial/header.html 中,就可以像普通变量一样使用 {{ pageTitle }}。
只传递指定变量:
如果你希望被引入的模板只使用你明确传递的变量,而不继承当前模板的所有变量,可以加上 only 关键字:
{% include "partial/header.html" with pageTitle="当前文章详情" only %}
条件引入:
如果某个代码片段并非所有页面都必须有,或者你希望它只有在文件存在时才被引入,可以使用 if_exists:
{# 如果 partial/sidebar.html 存在,则引入,否则忽略 #}
{% include "partial/sidebar.html" if_exists %}
include 标签的优点是轻量和灵活,它适合那些相对独立、可以在不同页面或不同布局中随意组合使用的代码片段。
方法二:利用 extends 标签构建模板骨架
如果说 include 是搭积木,那么 extends 更像是在设计一份报纸的版面骨架。它允许你定义一个“母版”模板(通常命名为 base.html),其中包含网站的通用结构,如整个 HTML 文件的框架、页头、页脚、侧边栏等,并用 {% block %} 标签标记出可供子模板重写或填充的区域。
定义母版 base.html:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% tdk with name="Title" siteName=true %}{% endblock %}</title>
<meta name="keywords" content="{% tdk with name='Keywords' %}">
<meta name="description" content="{% tdk with name='Description' %}">
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
{% block head_extra %}{% endblock %} {# 预留给子模板添加额外的head内容 #}
</head>
<body>
<header>
{% include "partial/top_nav.html" %} {# 顶部导航,可以是include进来的 #}
<h1>{% block page_header %}默认页面标题{% endblock %}</h1>
</header>
<div class="container">
{% block content %}
{# 这里是页面的主要内容区域,由子模板填充 #}
<p>欢迎来到 AnQiCMS 网站!</p>
{% endblock %}
</div>
<footer>
{% include "partial/footer.html" %} {# 页脚,也可以是include进来的 #}
<p>© {% now "2006" %} {% system with name="SiteName" %} All Rights Reserved.</p>
</footer>
<script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
{% block body_extra %}{% endblock %} {# 预留给子模板添加额外的body底部内容 #}
</body>
</html>
在 base.html 中,我们用 {% block title %}、{% block head_extra %}、{% block page_header %}、{% block content %} 和 {% block body_extra %} 定义了可替换或扩展的区域。
子模板 article_detail.html 继承并重写:
{% extends 'base.html' %} {# 必须是模板文件的第一行 #}
{# 重写页面标题,显示文章标题 #}
{% block title %}{{ archive.Title }} - {% system with name="SiteName" %}{% endblock %}
{# 为当前页面添加特定的CSS或JS #}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/article.css">
{% endblock %}
{# 重写页面大标题 #}
{% block page_header %}
<h1>{{ archive.Title }}</h1>
<p>发布时间:{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</p>
{% endblock %}
{# 填充文章内容区域 #}
{% block content %}
<article>
<div>{{ archive.Content|safe }}</div>
</article>
<aside>
{# 这里可以放相关文章、评论区等 #}
</aside>
{% endblock %}
{# 为当前页面添加特定的JS脚本 #}
{% block body_extra %}
<script src="{% system with name='TemplateUrl' %}/js/article_detail.js"></script>
{% endblock %}
通过 extends 标签,子模板清晰地继承了 base.html 的结构,并只关注自身独特的内容和样式,极大地简化了页面开发。请务必记住,`{%