如何将模板中的页头、页脚等公共部分模块化,并在各页面引用以统一显示?

📅 👁️ 74

在网站运营中,保持网站页面的统一性和高效管理是提升用户体验和运营效率的关键。对于安企CMS(AnQiCMS)用户而言,将页头、页脚、导航栏等公共部分进行模块化处理,不仅能确保全站视觉风格的一致性,更能大幅简化后续的维护和更新工作。安企CMS 提供了一套强大而灵活的模板机制,让您轻松实现这一目标。

理解 AnQiCMS 的模板架构

AnQiCMS 的模板文件通常存放在 /template 目录下,并以 .html 为后缀。系统设计注重模块化,鼓励开发者和内容运营者将重复出现的代码片段提取出来,形成独立的模块。其中,最核心的两个概念是“模板继承”(extends)和“模板引用”(include)。

想象一下盖房子,extends 就像是定义了房屋的基本结构图(比如有几层楼,客厅、卧室在哪),而 include 则是用来填充结构图中的细节(比如客厅里的沙发、电视摆件)。通过合理运用它们,我们就能构建出既统一又易于维护的网站。

核心模块化工具:extendsinclude

  1. extends:构建网站的“骨架” extends 标签用于指定一个基础模板,让当前模板继承其内容。这非常适合用来定义网站的整体布局,例如 <head> 区域、主要的 div 结构、以及公共的页头和页脚的引用位置。 通常,我们会创建一个名为 base.html (或 AnQiCMS 文档中建议的 bash.html)的文件作为网站的骨架模板。这个文件包含了所有页面共有的 HTML 结构和占位符(通过 block 标签定义),例如:

    • <html><head> 标签,包括字符集、视口设置、网站标题(TDK)、全局样式表和 JavaScript 文件的引用。
    • 页面主体 <body> 的大致结构,例如顶部导航区、内容主体区、侧边栏区和底部页脚区。
    • block 标签是 extends 机制的核心,它定义了子模板可以覆盖或扩展的区域。
  2. include:填充可复用的“组件” include 标签允许您将一个模板文件的内容直接插入到另一个模板文件中。这非常适合那些在多个页面中重复出现的、相对独立的组件,例如:

    • 网站头部(Header):通常包含 Logo、主导航、搜索框等。
    • 网站底部(Footer):通常包含版权信息、备案号、联系方式、友情链接等。
    • 侧边栏(Sidebar):可能包含热门文章、广告位、分类列表等。
    • 面包屑导航(Breadcrumbs):显示当前页面在网站结构中的位置。 这些可复用的代码片段通常会统一存放在一个 partial/ 目录下,方便管理和查找。

实战:模块化您的页头、页脚与导航

下面,我们通过具体的代码示例,展示如何利用 AnQiCMS 的模板标签和结构,模块化网站的公共部分。

第一步:创建基础布局文件 base.html

在您的模板文件夹(例如 /template/default/)中,创建一个名为 base.html 的文件。这个文件将是所有页面的基础。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {# 通过 tdk 标签获取页面的标题、关键词和描述。siteName=true 会自动在标题后附加网站名称 #}
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    
    {# 引入全局 CSS 文件,TemplateUrl 标签获取模板静态文件地址 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    
    {# 预留一个区域供子页面添加特定的 head 内容,例如页面独有的 CSS 或 JS #}
    {% block head_extra %}{% endblock %}
</head>
<body>
    {# 引入公共的页头部分 #}
    {% include "partial/header.html" %}

    <main class="main-content">
        {# 这是主体内容区域,每个子页面将在此填充自己的独特内容 #}
        {% block content %}{% endblock %}
    </main>

    {# 引入公共的页脚部分 #}
    {% include "partial/footer.html" %}

    {# 预留一个区域供子页面添加页面底部的 JS 脚本 #}
    {% block body_extra %}{% endblock %}
</body>
</html>

第二步:创建公共组件文件

在您的模板目录下,创建一个 partial 文件夹(例如 `/template/

相关文章

AnQiCMS模板支持哪些页面适配模式,如何选择和实现响应式显示?

在多屏时代,用户通过各种设备访问网站已是常态。为了确保网站在任何设备上都能提供流畅且友好的体验,页面适配成为了网站建设不可或缺的一环。AnQiCMS(安企内容管理系统)充分考虑了这一需求,提供了多种灵活的模板适配模式,帮助用户轻松应对不同设备的显示挑战。 ### AnQiCMS 提供的页面适配模式 AnQiCMS 在模板设计上提供了三种主要的页面适配模式

2025-11-08

模板中如何使用Django模板引擎语法来显示变量和逻辑结构?

安企CMS(AnQiCMS)在模板制作上采用了类似于Django的模板引擎语法,这种设计理念旨在为内容运营者和开发者提供一个既强大又易于上手的工具,让大家能够更灵活地控制网站内容的展示方式。通过掌握这套模板语法,您可以轻松地在网站前端页面上显示动态数据,并根据特定条件控制内容的呈现逻辑。 ### 一、模板语法的核心构成:变量与逻辑结构 安企CMS的模板语法主要由两大部分构成

2025-11-08

如何确保AnQiCMS模板文件以UTF-8编码,避免页面显示乱码?

在使用AnQiCMS搭建网站的过程中,偶尔会遇到页面显示内容出现乱码的情况,尤其是中文字符。这不仅影响了网站的美观和用户体验,也可能对搜索引擎优化(SEO)造成负面影响。乱码问题通常与模板文件的编码格式不统一有关,而确保AnQiCMS模板文件以UTF-8编码保存是解决这一问题的关键一步。 ### 为什么UTF-8编码至关重要? UTF-8作为一种变长字符编码,几乎可以涵盖世界上所有字符

2025-11-08

AnQiCMS模板文件应如何命名和组织以实现**显示效果?

在安企CMS中,网站的显示效果与模板文件的命名和组织方式有着密不可分的关系。一个良好规划的模板结构不仅能让网站看起来整洁美观,更能极大提升开发效率、方便后期维护,确保在不同场景下内容都能得到**呈现。 ### 模板文件的基石:`/template` 目录与 `config.json` 安企CMS网站的所有视觉呈现都始于 `/template` 目录。这是所有模板文件的家园。每一套独立的模板

2025-11-08

如何为特定文章、分类或单页面自定义其显示模板,实现个性化布局?

在网站运营中,为特定的内容提供专属的展示方式,能够显著提升用户体验和内容营销效果。安企CMS(AnQiCMS)深谙此道,提供了灵活多样的模板定制功能,让您可以轻松为文章、分类或单页面打造独一无二的个性化布局。 安企CMS实现个性化模板定制主要有两种方式:一是通过遵循特定的**模板文件命名约定**,系统会自动识别并应用;二是在**后台管理界面手动指定**自定义模板文件。 --- ### 一

2025-11-08

如何在模板中实现基于条件(if/else)动态显示内容和布局?

在网站运营和前端开发中,我们常常需要根据不同的情况,灵活地展示内容或调整页面布局。这种动态变化的能力,正是安企CMS(AnQiCMS)模板中条件判断标签(`if/else`)的核心价值所在。安企CMS的模板引擎设计简洁而强大,它允许我们像编写程序代码一样,在页面中设定逻辑,让网站内容呈现出千变万化的可能。 ### 安企CMS模板的动态之美

2025-11-08

如何在模板中循环遍历列表数据并显示(for循环),支持计数和翻转?

在安企CMS模板中,高效地展示列表数据是网站内容运营不可或缺的一部分。无论是展示最新文章、产品列表、分类目录,还是自定义的数据集合,灵活地循环遍历这些数据并进行精细化控制,都能极大地提升网站的表现力和用户体验。安企CMS提供了强大且易于上手的模板引擎,其`for`循环标签功能丰富,不仅支持基本的遍历,还能轻松实现计数、翻转以及更多高级操作。 ### 核心概念:`for`

2025-11-08

如何避免模板逻辑标签(如if、for)在页面渲染时产生多余的空行?

在AnQiCMS进行模板开发时,我们常常会发现,即使模板代码本身看起来很整洁,最终渲染出的HTML页面却可能包含一些意料之外的空行。这些空行虽然不影响页面的功能,但可能会让HTML源代码显得不够清爽,甚至在某些追求极致优化的场景下,会带来微小的文件体积增加。对于追求代码美观和精简输出的用户来说,如何有效地避免这些多余的空行,是一个值得探讨的问题。 这些多余空行多数来源于模板中的逻辑标签

2025-11-08