In the world of AnQiCMS, building a website with a unified appearance, easy management, and efficient updates is a common pursuit of every content operator and developer.Imagine if every page of the website needed to be designed with a separate header, footer, and sidebar. Then, when you need to modify the logo, navigation menu, or copyright information, the workload would be enormous.It is fortunate that AnQiCMS cleverly utilizes the template inheritance mechanism, allowing us to easily achieve unified display styles while maintaining flexible content updates.
This is like designing a beautiful 'template' for your website—a skeleton that includes all common elements and basic layout.Then, you simply fill in the unique content for each page on this framework, and you can ensure that the entire website looks coordinated and consistent.extendsandblockTags are the key to this magic.
Build your website's “master template”：extendsas its foundation
First, we need to create a basic master template, which we usually namebase.html, and place it in your template directory (/template/你的模板目录/). Thisbase.htmlThe file will carry the common structure of all web pages, such as the basic skeleton of HTML, imported CSS styles, JavaScript scripts, Logo, main navigation, footer copyright information, and so on.
In this template, you need to define some "slots", which are the areas that child pages can fill or overwrite the content in the future. We useblocktags to define these slots.
For example, a simplifiedbase.htmlmight look something like this:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{# 这里定义页面的标题，子模板可以重写 #}
{% block title %}
<title>{% system with name="SiteName" %} - 您的网站标题</title>
{% endblock %}
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{# 引入全局CSS样式 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{% block head_extra %}{# 预留给子模板添加额外head内容 #}{% endblock %}
</head>
<body>
<header class="main-header">
<div class="logo">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</div>
<nav class="main-nav">
{# 主导航通常放在这里 #}
{% navList navs %}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<dl>
{%- for inner in item.NavList %}
<dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</header>
<div class="main-content-wrapper">
<aside class="sidebar">
{% block sidebar %}{# 侧边栏内容 #}{% endblock %}
</aside>
<main class="page-content">
{# 这是核心内容区域，每个子页面都会重写这里 #}
{% block content %}
<p>这里是母版默认内容，如果子模板不重写，就会显示。</p>
{% endblock %}
</main>
</div>
<footer class="main-footer">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</footer>
{# 引入全局JS脚本 #}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block body_extra %}{# 预留给子模板添加额外body末尾内容 #}{% endblock %}
</body>
</html>
As you can see,base.htmldefines the overall layout of the page, and through{% block title %}/{% block sidebar %}/{% block content %}Tags such as this, have reserved writable positions for different areas. Even if the child template does not overwrite theseblockthey will still be displayed.base.htmlDefault content defined in it.
Child page: referencing master and overwriting content.
Now, we have the 'master template' for the website. Next time when you create specific pages like the homepage, article detail page, and product list page, you don't need to rewrite the header and footer. Just refer to thisbase.htmlThen rewrite what you need to changeblockarea.
Reference Master
In your sub-template file (for exampleindex.html/archive/detail.htmlorcategory/list.html), the first thing you need to do is to useextendstag to declare which master it inherits from.
It is very important to note:){% extends 'base.html' %}It must be the first line of code in the child template file.The template engine needs to first know which master template the file is built on, in order to correctly parse the subsequent content.
Rewrite the content
InextendsAfter declaration, you can use the same as in the master templateblockThe label name can rewrite the content of this area.
For example, for the homepage of the websiteindex.htmlYou may want to have a custom title and unique homepage content, but keep the common header, footer, and sidebar. You can write it like thisindex.html:
{# 必须是文件的第一行 #}
{% extends 'base.html' %}
{# 重写title block，定义首页标题 #}
{% block title %}
<title>首页 - {% system with name="SiteName" %}</title>
{% endblock %}
{# 重写content block，放置首页特有的内容 #}
{% block content %}
<h2>欢迎来到我们的网站首页！</h2>
<p>这里是首页独有的内容，包括精选文章、推荐产品等。</p>
{# 可以在这里引入其他模板片段，例如最新的文章列表 #}
{% include 'partial/latest_articles.html' %}
{% endblock %}
{# 如果首页需要额外的脚本，可以重写body_extra block #}
{% block body_extra %}
<script src="{% system with name="TemplateUrl" %}/js/index_specific.js"></script>
{% endblock %}
in thisindex.htmlin it, we only rewrittentitleandcontentthese twoblock. Forhead_extra/sidebarandmain-header/main-footerareas, due to the lack of rewriting the corresponding.block, the template engine will automatically use.base.htmldefined in. In this way, we have achieved a unified style of the page, while ensuring the flexibility of the content.
Practice: Unification of Style and Local Innovation
The power of template inheritance lies in its layered concept. You can create different 'secondary master pages' for different types of content (such as article details, product lists), and these secondary master pages inherit frombase.htmlFor example, you can have aarticle_base.htmlto define the common layout for all article pages (such as fixed sidebar, comment section structure, etc.), and then the specific article detail page inheritsarticle_base.html.
When using inheritance, there are some little tricks that can help us organize templates better:
- Place the common header and footer in
base.html.This is the most basic unity, ensuring that all pages have the same navigation and brand information. - Define the areas that may change
block.Even if it doesn't seem to change now, reserveblockIt is also a good habit for future expansion. - For small, reusable components, use
includeLabel.For example, a module for "Latest Comments" can be placed insidebarblockin{% include 'partial/latest_comments.html' %}Introduce it. This makes the code more modular and easier to maintain. - Do not over nest.Although AnQiCMS supports multi-level inheritance, a deep inheritance hierarchy may increase