How can you reference and overwrite the base master template (extends) in a template to unify the display style?
In the world of AnQiCMS, building a website with a unified appearance, easy to manage, and efficient to update is a common pursuit of each content operator and developer.Imagine if each page of the website had to be designed individually for the header, footer, and sidebar, then the workload would be huge when it comes to modifying the logo, navigation menu, or copyright information.Fortunately, AnQiCMS cleverly utilizes the template inheritance mechanism, allowing us to easily achieve a unified display style 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 just need to fill in the unique content for each page on this skeleton, and you can ensure that the entire website looks coordinated and consistent.AnQiCMS uses a syntax similar to the Django template engine, in which theextendsandblockTags are the key to realizing this magic.
Build your website "master template":extendsFoundation
Firstly, we need to create a basic master template, usually we name itbase.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 HTML skeleton, introduced CSS styles, JavaScript scripts, Logo, main navigation, footer copyright information, etc.
In this template, you need to define some "slots", which are the areas that child pages can fill or overwrite 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.htmlDefined the overall layout of the page and through{% block title %}/{% block sidebar %}/{% block content %}Tags, reserved writable positions for different areas. Even if the child template does not rewrite theseblockThey will also be displayedbase.htmlContent defined in it.
Sub-page: Refer to master page and overwrite content.
Now, we have the "master template" for the website. Next, 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 change.blockarea.
Reference the master template.
In your child template file (for exampleindex.html/archive/detail.htmlorcategory/list.html), the first thing you need to do is to useextendstag to declare which master template it inherits from.
It is a very important point:{% extends 'base.html' %}It must be the first line of code in the child template file.The template engine needs to know which master template the file is based on first, in order to correctly parse the content that follows.
Rewrite the content
InextendsAfter declaration, you can use the same as in the master template.blockLabel name to rewrite the content of this area.
For example, for the homepage of the websiteindex.htmlYou may want to have a customized 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 them, we only rewrittentitleandcontentthese twoblock.head_extra/sidebarandmain-header/main-footerAreas such as this, due to not rewriting the correspondingblock, the template engine will automatically usebase.htmlcontent defined within. In this way, we have achieved a unified style of the page while ensuring the flexibility of the content.
Practice: unify style and local innovation
The power of template inheritance lies in its layered thinking. 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 of all article pages (such as fixed sidebar, comment section structure, etc.), then the specific article detail page will inheritarticle_base.html.
When using inheritance, there are some tips that can help us better organize the template:
- Place the common header and footer in
base.html.This is the most basic uniformity, ensuring that all pages have the same navigation and brand information. - Define the area that may change.
block.Even if it looks like it won't change now, reserve.blockIt is also a good habit for future expansion. - Use for small, reusable components,
include.For example, a 'latest comments' module can be used,sidebarblockis used{% include 'partial/latest_comments.html' %}Introducing. This makes the code more modular and easier to maintain. - Do not over-nest.Although AnQiCMS supports multi-level inheritance, a too deep inheritance level may increase.