How does the template inheritance of the flexible customization website AnQiCMS make the master page and child page show their own talents?
In website content management, maintaining consistent page style while being able to flexibly modify local content is the goal pursued by many operators.AnQiCMS uses a syntax similar to the Django template engine, providing us with an elegant solution, that is, the powerful template inheritance feature.Through this feature, we can cleverly design master pages and subpages, making the website structure both unified and highly customizable.
Imagine your website as a brand product line, where each product has common design elements (such as Logo, navigation, footer), but also has its own characteristics.The template inheritance is the key to achieving the coexistence of standardization and personalization.It allows us to define a global 'skeleton' - that is, a master page that includes the common layout and elements of all pages.And each specific page, such as the article detail page, product display page, or contact us page, is considered a "sub-page", which fills or overrides specific content areas without changing the overall framework.
The core of achieving this flexible customization lies in two key tags:extendsandblock.
first, extendsTags are the basis for declaring the inheritance relationship of a page.At the beginning of any sub-page template file, you need to explicitly tell AnQiCMS which master page this page is built on.base.htmlThen on the sub-pageindex.htmlOn the first line, you will write{% extends 'base.html' %}This is crucial,extendsThe tag must be the first tag in the template file, otherwise, template inheritance will not work properly.
Next,blockTags play the role of "content block placeholders". In the master pagebase.htmlIn it, you will useblockTags to wrap those areas that you want the child pages to be able to customize. For example, the page's<title>Label content, main content area, or sidebar, etc. A typicalblockdefinition would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% block title %}
<title>我的网站 - 默认标题</title> {# 这是母版页的默认标题 #}
{% endblock %}
<link rel="stylesheet" href="/public/static/css/style.css">
</head>
<body>
<header>
{% include 'partial/header.html' %} {# 头部可能是一个独立引入的公共片段 #}
</header>
<main class="container">
<aside>
{% block sidebar %}
{# 侧边栏的默认内容或留空 #}
<p>这是通用侧边栏内容。</p>
{% endblock %}
</aside>
<section class="content">
{% block main_content %}
{# 主体内容区的默认内容或留空 #}
<h2>欢迎来到我们的网站！</h2>
<p>这里是默认的主体内容。</p>
{% endblock %}
</section>
</main>
<footer>
{% block footer %}
{# 页脚的默认内容或留空 #}
<p>© {% now "2006" %} 版权所有</p>
{% endblock %}
</footer>
</body>
</html>
When you are in a subpageindex.htmlinheritedbase.htmlafter that, you can optionally select theseblockPerform "expand" or "override". If you do not rewriteblock, then the child page will inherit the corresponding one from the master page.blockThe default content defined. If you decide to rewrite, just use the same name in the sub-page as wellblockLabel, and fill in the content you want to display in it:
{% extends 'base.html' %}
{% block title %}
<title>首页 - 安企CMS</title> {# 覆盖了母版页的标题 #}
{% endblock %}
{% block sidebar %}
{# 首页不需要侧边栏，这里选择留空，或者放入首页特有的侧边栏内容 #}
<nav>
<ul>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
{% endblock %}
{% block main_content %}
<div class="hero-section">
<h1>AnQiCMS 助您轻松建站</h1>
<p>高效、可定制、易扩展的企业级内容管理系统。</p>
<a href="/products" class="btn btn-primary">了解更多产品</a>
</div>
{# 这里可以继续引入一些文章列表、产品展示等动态内容 #}
{% archiveList latest_articles with type="list" limit="5" %}
<h3>最新文章</h3>
<ul>
{% for article in latest_articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
</ul>
{% endarchiveList %}
{% endblock %}
{# 这里没有重写 footer block，所以会沿用母版页的默认页脚内容 #}
In this way, the template inheritance feature of AnQiCMS makes the development and maintenance of the website extremely efficient.You can centrally manage the overall layout, CSS, and JavaScript references on the master page, ensuring that all pages have a consistent brand image and basic functionality.And for each independent content page, you only need to focus on its unique content block, greatly reducing the writing of redundant code.When a website needs to adjust its overall style, it is usually sufficient to modify the master page, and all child pages inheriting it will automatically update, greatly improving operational efficiency and maintenance convenience.This not only makes the website structure clear, but also leaves ample space for future function expansion.
Frequently Asked Questions (FAQ)
1.extendsandincludeWhat are the differences between tags? How should I choose?
extendsTags are used to define the 'skeleton' structure of a template inheriting from another template, usually used between master pages and child pages, child pages throughblockThe label is used to cover or fill a specific area of the master page. It focuses on the overall layout and customizable content blocks.
AndincludeA tag is more like 'inserting' an independent, reusable code snippet into any position in the current template. For example, each news item in a news list (news_item.html）、a general advertising position or a breadcrumb navigation, these are components that can be independently inserted into different pages without changing the overall structure of the page.They do not involve covering the master page structure, but are responsible for providing content.
In simple terms, when you need to define the overall structure of a page and allow for local content overlays, useextends; When you need to insert small, independent components into specific positions on the page, useinclude.
2. Can I use a sub-template again?extendsTags, can they form multi-level inheritance?
Theoretically, you can build a multi-level inheritance chain, for examplepage.htmlInheritancearticle_base.htmlwhilearticle_base.htmlInheritance againbase.html.AnQiCMS template engine supports this nested inheritance.The advantage of doing this is that it can define finer-grained structures at different levels.However, in practice, too many inheritance levels may increase the complexity and cost of understanding the template, so it is recommended to plan the inheritance structure reasonably while maintaining code clarity and maintainability.
3. If the child page does not rewrite a certainblockWhat will happen?
if the child page does not explicitly rewrite by using the sameblocktag to rewrite a certain definition in the master pageblockThen AnQiCMS will default to using the master page of theblockAll content defined internally.This means that the master page can provide default content or layout for all customizable areas, ensuring that even if the sub-pages do not make any special settings, the website can still be displayed normally and have a basic structure.