在构建网站时,保持页面结构的一致性、提高开发效率和降低维护成本是网站运营的关键。安企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