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, repetitive page elements (such as headers, footers, navigation bars) need to be modified one by one, which undoubtedly consumes a lot of time and effort.AnQiCMS (AnQi CMS) is exactly through its powerful template inheritance mechanism, especiallyextendsThe use of tags helps us efficiently solve this problem.

Imagine if each page of a website were compared to a painting, then the template inheritance mechanism is like providing a standardized frame and background canvas for these paintings.It allows us to define a basic "parent template" that includes the common structure and elements of all web pages.And the specific "child template" only needs to inherit this parent template, then fill in or modify those content areas that are unique to itself.This way, the overall structure of the website is like building blocks, flexible and stable.

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

First, we need to create a basic templateWe usually name itbase.htmlIt includes the common layout of the website 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 might 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_extraand many moreblockAreas. These areas provide customized entries for sub-templates.

Then, when we create specific page templatesfor example, an article detail pagearticle_detail.htmlwe only need to use at the beginning of the file.{% extends 'base.html' %}To declare it inherits frombase.html. Then, use the same-namedblocktag to override or add content to 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 %}

By this means,article_detail.htmlYou no longer need to repeatedly write common code for headers, footers, navigation, etc., just focus on the unique parts such as article titles, content, and metadata.

The simplified maintenance effect brought by template inheritance is evident:

  • Reduce code redundancy:The core layout code only exists inbase.htmlone piece, avoiding a lot of repetitive pasting.
  • Unified website style:The visual style and basic structure of the website are managed bybase.htmlUnified management ensures consistency across all pages.
  • Improve maintenance efficiency:If you need to modify the website header logo, footer copyright information, or navigation structure, just changebase.htmlA file, all child templates inheriting it will be automatically updated, greatly saving maintenance time.
  • Accelerate the development process:When adding a new page, developers can quickly create based on an existing skeleton without starting from scratch, greatly improving development efficiency.
  • Reduce error rate:The centralized modification reduces omissions and errors caused by manual copying and pasting.

While usingextendsWhen labeling, there are several small details to pay attention to. The most important point is,{% extends %}The tag must be the first tag 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" %}The tag is inblockIntroducing within the area, which makes the template structure more modular and clear.

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

Frequently Asked Questions (FAQ)

  1. If the child template does not cover a certain area of the parent templateblockwhat will be displayed?Answer: If the child template does not explicitly override a certain area defined in the parent templateblockThe area will default display the parent template in itblockThe content defined within the tag allows the parent template to provide default placeholder content, ensuring that the page can still display normally if the child template does not fully override it.

  2. extendsandincludeWhat are the differences between tags? 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, while child templates fill in content or overlay structures on it.includeIt is used to insert a standalone, reusable code snippet (such as a navigation menu, footer copyright information) at a specified location in 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-u003elayout.html-u003epage.html?Answer: Yes, AnQiCMS supports multi-level template inheritance. You can make a template inherit frombase.htmlfor examplelayout.html), while thislayout.htmlcan also be used as another template (for examplepage.htmlThe parent template. This allows for the construction of more complex and refined template structure levels, flexible in meeting different page layout requirements, and further improving the reusability and maintainability of the template.