如何使用模板继承机制来统一和显示网站页面结构?

在构建网站时,保持页面结构的一致性、提高开发效率和降低维护成本是网站运营的关键。安企CMS(AnQiCMS)凭借其基于Django模板引擎语法的强大功能,为我们提供了一套高效的模板继承机制,能够轻松实现网站页面结构的统一管理与灵活展示。

一、模板继承的核心理念:构建网站骨架

想象一下,您的网站就像一座由不同房间组成的房子。每个房间(页面)都有其独特的功能和内容,但它们共享相同的地基、屋顶和外墙结构。在AnQiCMS的模板机制中,这个共享的结构就是我们所说的“母版”或“基础模板”,通常命名为 base.html

基础模板定义了网站最核心、最通用的布局元素,例如页头(header)、页脚(footer)、主导航(navigation)、侧边栏(sidebar)以及页面内容的通用容器等。在 base.html 中,我们使用 {% block 块名称 %}{% endblock %} 标签来定义可被子模板重写(Override)的区域。这些块就像是房子的预留空间,子模板可以根据自己的需求来填充或修改这些空间。

例如,一个典型的 base.html 可能会包含以下结构:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}默认网站标题 - {% system with name="SiteName" %}{% 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/main.css">
    {% block head_extra %}{% endblock %} {# 允许子模板添加额外的CSS或JS #}
</head>
<body>
    <header>
        {% block header %}
            <!-- 网站通用头部内容,如Logo、顶部菜单 -->
            <div class="logo"><img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}"></div>
            {% navList mainNav with typeId="1" %} <!-- 调用主导航 -->
                <!-- 导航列表循环 -->
            {% endnavList %}
        {% endblock %}
    </header>

    <main class="container">
        {% block main_content %}
            <aside class="sidebar">
                {% block sidebar %}{% endblock %} {# 侧边栏内容 #}
            </aside>
            <article class="content">
                {% block content %}
                    <!-- 默认页面内容区域 -->
                {% endblock %}
            </article>
        {% endblock %}
    </main>

    <footer>
        {% block footer %}
            <!-- 网站通用页脚内容,如版权信息、联系方式 -->
            <p>{% system with name="SiteCopyright" %}</p>
            <p>{% contact with name="Address" %}</p>
        {% endblock %}
    </footer>

    {% block body_end_scripts %}{% endblock %} {# 允许子模板添加页面底部的JS #}
</body>
</html>

在子模板中,例如文章列表页 archive_list.html,我们只需要在文件开头使用 {% extends 'base.html' %} 标签,即可继承 base.html 的所有结构。接着,通过定义同名的 {% block %} 标签,我们可以轻松覆盖或追加父模板中相应区块的内容。

”`html {% extends ‘base.html’ %}

{% block title %}文章列表 - {% categoryDetail with name=“Title” %} - {% system with name=“SiteName” %}{% endblock %}

{% block head_extra %}

<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/archive-list.css">

{% endblock %}

{% block sidebar %}

<!-- 这里放置文章列表页特有的侧边栏内容,例如热门文章、分类导航等 -->
<h3>文章分类</h3>
{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for cat in categories %}
            <li><a href="{{ cat.Link }}">{{ cat.Title }}</a></li>
        {% endfor %}
    </ul>
{% endcategoryList %}

{% endblock %}

{% block content %}

<h1>{% categoryDetail with name="Title" %}</h1>
<div class="archive-list">
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
            <div class="archive-item">
                <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                <p class="description">{{ item.Description }}</p>
                <span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span class="views">{{ item.Views }} 阅读</span>
            </div>
        {% empty %}
            <p>暂无文章内容。</p>
        {% endarchiveList %}
    {% endarchiveList %}
</div>
{% pagination pages with show