How to modularize the header, footer, and other common parts in a template and reference them on each page to display uniformly?
In website operation, maintaining the unity and efficient management of website pages is the key to improving user experience and operational efficiency.For AnQiCMS (AnQiCMS) users, modularizing the header, footer, navigation bar, and other common parts not only ensures consistency in the overall visual style of the site but also greatly simplifies the maintenance and update work in the future.Strong and flexible template system provided by AnqiCMS, allowing you to easily achieve this goal.
Understand the template architecture of AnQiCMS
AnQiCMS template files are usually stored in/templatethe directory, and.htmlwith a suffix. The system design emphasizes modularity, encouraging developers and content operators to extract repetitive code snippets and form independent modules.Among the most core concepts are the 'template inheritance' (extends）and "template reference"（include)
Imagine building a house,extendsIt is like defining the basic structure diagram of a house (such as how many floors, where the living room and bedrooms are), andincludeIt is used to fill in the details of the structure diagram (such as the sofa and TV accessories in the living room). By using them properly, we can build a unified and easy-to-maintain website.
Core modular tool:extendswithinclude
extends: The 'skeleton' of building a websiteextendsTags are used to specify a basic template for the current template to inherit its content. This is very suitable for defining the overall layout of a website, such as<head>regions, main,divThe structure, as well as the reference position of the common header and footer. Typically, we would create a namebase.html(or as recommended in the AnQiCMS documentation)bash.htmlThe file serving as the skeleton template of the website. This file contains the common HTML structure and placeholders (viablocktags defined), for example:<html>and<head>Tags including character sets, viewport settings, website titles (TDK), global style sheets, and references to JavaScript files.- Page content
<body>The general structure, such as the top navigation area, content main area, sidebar area, and bottom footer area. blockis a tagextendsThe core mechanism, which defines the areas that child templates can override or extend.
includeFill reusable 'component'includeTags allow you to insert the content of one template file directly into another. This is very suitable for components that appear repeatedly on multiple pages and are relatively independent, such as:- Website Header (Header): Typically includes Logo, main navigation, search box, etc.
- Website Footer (Footer): Usually contains copyright information, filing number, contact information, friendship links, etc.
- Sidebar (Sidebar): May contain hot articles, ad spaces, category lists, etc.
- Breadcrumb navigation (Breadcrumbs): Shows the current page's position in the website structure.
These reusable code snippets are usually stored in one place.
partial/Under the directory, convenient for management and search.
Practice: Modularize your header, footer, and navigation.
Below, we demonstrate how to use AnQiCMS template tags and structure to modularize the common parts of a website with specific code examples.
Step 1: Create the basic layout filebase.html
In your template folder (for example/template/default/), create a file namedbase.html. This file will be the base for all pages.
<!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>
Second step: Create a common component file
Create one under your template directorypartialfolder (for example `/template/