AnQiCMS的模板公共部分(如页头、页脚)如何实现复用?

在AnQiCMS中,高效地管理网站内容,离不开一套灵活且易于维护的模板系统。您在制作模板时,很可能遇到这样的需求:页头、页脚、导航栏等公共元素需要在网站的每一个页面都出现。如果为每个页面都重复编写这些代码,不仅耗时耗力,日后修改起来更是牵一发而动全身。幸运的是,AnQiCMS凭借其借鉴Django模板引擎的强大功能,提供了优雅的解决方案,让这些公共部分能够轻松实现复用。

核心基石:构建您的网站“骨架”——{% extends %}

想象一下,您网站的每一个页面都共享着一个基础的框架,就像一栋房子的基本骨架,包括地基、承重墙和屋顶。在AnQiCMS的模板体系中,这就是通过{% extends %}标签实现的。您通常会创建一个名为base.html(或者您也可以按需命名为main.htmllayout.html等)的“母版”文件。这个文件会定义网站最基础的HTML结构,包含所有页面共有的元素,比如<html><head><body>标签,以及页头、页脚等。

base.html中,您需要使用{% block 区域名称 %}{% endblock %}标签来定义可供子模板重写或填充的区域。比如,您可以定义一个title区块来放置页面的标题,一个header区块来放置导航和Logo,以及一个content区块来承载每个页面独有的内容,还有一个footer区块用于页脚信息。

一个简洁的base.html可能会是这样:

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<body>
    <header>{% block header %}{% endblock %}</header>

    <main>{% block content %}{% endblock %}</main>

    <footer>{% block footer %}{% endblock %}</footer>

    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
    {% block body_extra %}{% endblock %}
</body>
</html>

接下来,当您创建具体的页面模板时(比如index.html用于首页,article_detail.html用于文章详情页),只需要在这些文件的第一行使用{% extends 'base.html' %},就能够继承base.html定义的骨架。然后,您可以通过重写base.html中定义的{% block %}区域来填充对应的内容。

例如,您的index.html可能这样使用:

{% extends 'base.html' %}

{% block title %}首页 - {% tdk with name="Title" %}{% endblock %}

{% block header %}
    {# 首页的头部内容,可能会引入一个单独的导航文件 #}
    {% include 'partial/header_nav.html' %}
{% endblock %}

{% block content %}
    <h1>欢迎来到我们的网站</h1>
    <p>这里是网站的最新内容...</p>
    {# 其他首页特有的内容 #}
{% endblock %}

{% block footer %}
    {# 首页的页脚,也可能引入公共页脚 #}
    {% include 'partial/footer_info.html' %}
{% endblock %}

通过{% extends %},您只需维护一个基础的布局文件,所有页面的结构更新都可以在此一处完成,极大提升了开发和维护效率。

精细拆分:嵌入可复用代码片段——{% include %}

除了网站的整体骨架,很多时候您还需要复用更小的代码片段,比如特定的导航菜单、侧边栏、评论表单、联系信息模块等。AnQiCMS通过{% include %}标签让这一过程变得异常简单。

按照AnQiCMS的模板制作约定,这些可复复用的代码片段通常存放在/template目录下您所创建模板文件夹中的partial/子目录里。例如,您可以有一个partial/header_nav.html文件来专门定义网站的顶部导航,或者partial/footer_info.html来包含版权和联系方式。

当您需要在某个模板中嵌入这些片段时,只需简单地使用:

{# 引入顶部导航 #}
{% include 'partial/header_nav.html' %}

{# 引入页脚信息 #}
{% include 'partial/footer_info.html' %}

{% include %}的强大之处还在于它能够灵活地传递数据。如果您希望某个被包含的文件显示特定信息,可以通过with关键字传入变量:

{# 假设header_nav.html需要一个当前页面名称变量 #}
{% include 'partial/header_nav.html' with current_page_name="关于我们" %}

partial/header_nav.html中,您就可以使用{{ current_page_name }}来获取并显示这个值。如果被包含的文件可能不存在,您还可以加上if_exists,避免因文件缺失导致页面报错:

{% include 'partial/ad_banner.html' if_exists %}

这样,如果ad_banner.html存在,它会被引入;如果不存在,则会被优雅地忽略,而不会中断页面渲染。

进阶封装:模板中的函数——{% macro %}

对于更复杂的、带有逻辑处理的重复性UI组件,AnQiCMS还提供了{% macro %}标签,它允许您在模板中定义类似函数的代码块。宏可以接受参数,并根据参数生成不同的HTML内容。这在处理列表项、卡片组件等需要根据不同数据渲染出相似结构的场景时特别有用。

例如,您可以定义一个宏来渲染文章列表中的每一项:

{# 定义在 partial/archive_macros.html #}
{% macro render_archive_item(archive) %}
    <li class="archive-item">
        <a href="{{ archive.Link }}">
            <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
            <h3>{{ archive.Title }}</h3>
            <p>{{ archive.Description|truncatechars:100 }}</p>
            <span>发布日期:{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        </a>
    </li>
{% endmacro %}

然后在您的文章列表页模板中,您可以先导入这个宏,再进行调用:

”`html {% extends ‘base.html’ %} {% import ‘partial/archive_macros.