In website operation and content management, maintaining a clear, unified, and easy-to-maintain website structure is an important challenge.Especially when there are many web pages, repeated page elements (such as headers, footers, navigation bars) would undoubtedly require a lot of time and effort to be modified one by one.extendsThe application of labels helps us efficiently solve this difficult problem.

Imagine if each page of a website were compared to a painting, then the template inheritance mechanism would be like providing a set of standardized frames and background canvases for these paintings.It allows us to define a basic 'parent template' that includes the common structure and elements of all web pages.The specific 'sub-template' only needs to inherit this parent template, and then fill in or modify those content areas that are exclusively its own.This way, the overall structure of the website is as flexible and stable as building with blocks.

The template inheritance syntax of AnQiCMS is similar to Django template engine, its core beingextendsandblockThese tags.

Firstly, we need to create a basic templatewhich is usually namedbase.htmlwhich includes the general layout of the web page. In this basic template, we can use{% block block_name %}{% endblock %}This syntax defines several content areas that can be "filled" or "overridden" by sub-templates. For example, a typicalbase.htmlIt may look like this:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
    <link rel="stylesheet" href="/public/static/css/base.css">
    {% block head_extra %}{% endblock %} {# 预留额外头部资源位置 #}
</head>
<body>
    <header>
        <div class="logo">AnQiCMS</div>
        <nav>{% include "partial/main_nav.html" %}</nav>
    </header>

    <main>
        {% block main_content %}
            <p>这里是基础模板的默认内容，子模板可以覆盖。</p>
        {% endblock %}
    </main>

    <footer>
        <p>&copy; {% now "2006" %} 我的AnQiCMS网站. All rights reserved.</p>
        {% include "partial/footer_links.html" %}
    </footer>

    <script src="/public/static/js/main.js"></script>
    {% block body_extra %}{% endblock %} {# 预留额外底部脚本位置 #}
</body>
</html>

As you can see,base.htmlis defined intitle/head_extra/main_contentandbody_extramultipleblockRegion. These regions provide custom entry points for sub-templates.

Next, when we create specific page templatesFor example, an article detail pagearticle_detail.htmlAll we need to do is use it at the beginning of the file{% extends 'base.html' %}to declare that it inherits frombase.htmlThen, use the same-namedblocktag to cover or add the content of the corresponding area.

{% extends 'base.html' %}

{% block title %}<title>{% archiveDetail with name="Title" %} - 我的AnQiCMS网站</title>{% endblock %}

{% block head_extra %}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}

{% block main_content %}
    <article class="article-detail">
        <h1>{% archiveDetail with name="Title" %}</h1>
        <div class="meta">
            <span>发布日期：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
            <span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
        </div>
        <div class="content">
            {%- archiveDetail articleContent with name="Content" %}
            {{ articleContent|safe }}
        </div>
    </article>
    <div class="related-articles">
        <h3>相关推荐</h3>
        {% archiveList archives with type="related" limit="5" %}
        <ul>
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
        {% endarchiveList %}
    </div>
{% endblock %}

{% block body_extra %}
    <script src="/public/static/js/article_comments.js"></script>
{% endblock %}

In this way,article_detail.htmlNo longer need to rewrite general code for headers, footers, navigation, etc., just focus on unique parts such as article titles, content, metadata, etc.

The simplified maintenance effect brought by template inheritance is evident:

  • Reduce code redundancy:The core layout code only exists inbase.htmla single copy, avoiding a lot of repeated pasting.
  • Unified website style:The visual style and basic structure of the websitebase.htmlare managed uniformly to ensure consistency across all pages.
  • Increase maintenance efficiency:If you need to modify the website header logo, footer copyright information, or navigation structure, just changebase.htmlAn file, all its child templates will be automatically updated, which greatly saves maintenance time.
  • Accelerate the development process:When adding a new page, developers can quickly create based on existing skeletons without starting from scratch, greatly improving development efficiency.
  • Reduce error rate:The centralized modification reduces omissions and errors caused by manual copy and paste.

When usingextendsWhen labeling, there are several minor details to pay attention to. The most important point is,{% extends %}The label must be the first label in the template file, and there should be no HTML code or other template tags before it, otherwise it will not work properly. In addition, to better organize the template, we can split some small, reusable code snippets (such as navigation menus, sidebar widgets) into separate files, and then through{% include "partial/filename.html" %}Tags inblock区域内引入，这使得模板结构更加模块化和清晰。

AnQiCMS's template inheritance mechanism is a very practical feature, which helps us manage the website's page layout in a structured and efficient way, thus allowing us to devote more energy to high-quality content creation and website operation strategy.

Common Questions (FAQ)

  1. If the child template does not override the parent template'sblockarea, what will be displayed?Answer: If the child template does not explicitly override the parent template'sblockArea, if the area is, it will default display the parent templateblockThe content defined inside the label. This allows the parent template to provide default placeholder content, ensuring that the page can still display normally even if the child template does not fully override it.

  2. extendsandincludeWhat are the differences between labels? When should they be used?Answer:extendsUsed to establish inheritance relationships between templates, defining a parent template as the 'skeleton' or 'blueprint' of a page. Sub-templates fill in content or override structures based on this.includeIt is used to insert an independent, reusable code snippet (such as a navigation menu, footer copyright information) into a specified position of any template. In simple terms,extendsIt is 'I build based on you', andincludeIt is 'I put this component in you'. When you want to define a basic layout for the entire page, use it.extendsWhen you want to reuse a small module in a page, useinclude.

  3. Does AnQiCMS support multi-level template inheritance, such asbase.html-layout.html-page.html?答：是的，AnQiCMS supports multi-layer template inheritance. You can let a template inherit frombase.html[for example]layout.html），and thislayout.htmlcan also be used as another template (for example)page.html）of the parent template. This allows for the construction of more complex, more refined template structure levels, flexibly dealing with different page layout requirements, and further improving the reusability and maintainability of the template.