When building a website, maintaining the consistency of page style, improving development efficiency, and reducing maintenance costs are the goals pursued by every website operator. AnQiCMS (AnQiCMS) is well-versed in this, and its template system design draws on the excellent ideas of the Django template engine, among whichextendsThe label is one of the core functions to achieve this goal.

The core concept of template inheritance

Imagine that you are designing a series of posters.Each poster has a common brand logo, top title, and bottom contact information, with the middle promotional content being different.If you have to draw all these repetitive elements from scratch for every poster you make, it will take a lot of time and effort.The template inheritance is to solve this problem.

In AnQiCMS, template inheritance allows you to define a basic “parent template” (usually calledbase.htmlIt includes the shared HTML structure, style references, JavaScript references, and fixed page areas (such as headers, footers, sidebars, etc.) of all pages on your website. You can also use the parent template toblockLabel defines some 'fillable' areas.

The child template inherits this parent template and selectively 'overwrites' or 'fills' these based on the specific needs of its own page.blockArea. If the child template does not rewriteblockThen it will automatically use the default content defined in the parent template.This mechanism allows you to centrally manage the overall layout and style of the website, while also giving each page the freedom to customize content flexibly.

extendsThe usage method of tags

In the AnQiCMS template system, usingextendsDeclaring a sub-template inheritance from a parent template is very simple. You just need to write on the first line of the sub-template file:

{% extends 'path/to/your/base.html' %}

For example, if your base layout file is in/template/default/base.html，then on other pages (such as the article detail page)article/detail.htmlat the beginning, you will see:

{% extends 'base.html' %}

Here are thebase.htmlrefers to the current activity template directory underbase.htmlfile.

next, in the parent template (base.html) you will see something like thisblockLabel definition:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
    {% block meta_description %}<meta name="description" content="AnQiCMS官方网站">{% endblock %}
    {% block meta_keywords %}<meta name="keywords" content="AnQiCMS, Go CMS">{% endblock %}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    {# 引入头部脚本，如果存在 #}
    {% include "partial/head_scripts.html" if_exists %}
</head>
<body>
    <header>{% include "partial/header.html" %}</header>
    <nav>{% include "partial/nav.html" %}</nav>
    <div class="main-content">
        {% block content %}
            <!-- 这是父模板中的默认内容，如果子模板不重写，则显示此内容 -->
            <p>欢迎来到我们的网站！</p>
        {% endblock %}
    </div>
    <footer>{% include "partial/footer.html" %}</footer>
    {# 引入底部脚本，如果存在 #}
    {% include "partial/body_scripts.html" if_exists %}
</body>
</html>

We defined in the parent template,title/meta_description/meta_keywordsandcontentmultipleblock. TheseblockThe content inside the tag is the default value, and the child template can optionally overwrite them. At the same time,header/nav/footerThese parts that are consistent on all pages can be written directly in the parent template, or throughincludea smaller code snippet introduced by tags.

rewrittenblockto customize page content

Now, suppose we want to create an article detail page for AnQiCMSarticle/detail.htmlCreate content. We only need to focus on the unique parts of the article itself, and do not need to rewrite the entire HTML structure of the page.

Inarticle/detail.htmlIn the following, we rewrite the parent template'sblock:

{% extends 'base.html' %}

{% block title %}
    {# 使用AnQiCMS的archiveDetail标签获取文章标题，并拼接网站名称 #}
    <title>{% archiveDetail with name="Title" %} - {% system with name="SiteName" %}</title>
{% endblock %}

{% block meta_description %}
    {# 获取文章描述作为页面元描述 #}
    <meta name="description" content="{% archiveDetail with name="Description" %}">
{% endblock %}

{% block meta_keywords %}
    {# 获取文章关键词作为页面元关键词 #}
    <meta name="keywords" content="{% archiveDetail with name="Keywords" %}">
{% endblock %}

{% block content %}
    <article class="article-detail">
        <h1>{% archiveDetail with name="Title" %}</h1>
        <div class="article-meta">
            <span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{% archiveDetail with name="Views" %}</span>
        </div>
        <div class="article-body">
            {# 获取文章内容，并使用safe过滤器防止HTML转义 #}
            {%- archiveDetail articleContent with name="Content" %}
            {{articleContent|safe}}
        </div>
    </article>
{% endblock %}

In this way,article/detail.htmlOnly contains its unique content (article title, metadata, article body), and the overall layout of the page, common header and footer, etc. are automatically inherited frombase.html. You do not need to paste these common elements on each page, which greatly improves the efficiency of development and maintenance.

The secret to unified style and efficient layout

extendsThe core value of tags lies in:

  1. Uniform visual styleAll pages are based on the same parent template structure, ensuring consistency in the overall layout and common elements (such as navigation, footer) across the website, enhancing the brand image.
  2. The leap in development efficiency: Developers can focus on the unique content of specific pages without needing to write a large amount of common HTML code, significantly speeding up development.
  3. Convenient maintenance experienceWhen you need to adjust the global layout or common components of the website, just modifybase.htmlor one of themincludeThe public fragment, all pages inheriting it will be updated automatically, avoiding the麻烦 of repeated modifications in multiple files.
  4. Flexible content customization:blockThe mechanism allows sub-templates to rewrite content as needed, ensuring a unified style while providing sufficient flexibility to handle the special requirements of different pages.

This template inheritance mechanism is a key component of AnQiCMS that is efficient and easy to manage content. It makes the construction and operation of the website more structured