In AnQiCMS, building a unified and easy-to-maintain page layout is crucial for the long-term healthy operation of any website.As the facade of the website, the visual consistency of the page directly affects user experience and brand image; while the maintenance efficiency behind it determines the speed of content updates and feature iterations.AnQiCMS powerful template inheritance feature is the core tool to solve this challenge.

The core concept of template inheritance isReusability and layering.It allows us to create a basic "master" template that includes the common structure and elements of all web pages, such as header, footer, main navigation, sidebar, etc.This template is like a design drawing, which specifies the overall framework of the website.

To achieve this "master" effect, AnQiCMS utilizes syntax similar to Django's template engine, where the key tags areextendsandblock.

Firstly, we usually create a name ofbase.htmlThe template file of (or similar name), which serves as the skeleton of the entire website.In this file, we will define the HTML structure that all pages will share.{% block block_name %}{% endblock %}This label is used to mark the 'replaceable area'. TheseblockThe label not only specifies the name of the area but can also include default content to display when the sub-template does not override it.

For example, ourbase.htmlmay be arranged 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 page_title %}<title>我的网站</title>{% endblock %}
    {% block head_css %}<link rel="stylesheet" href="/static/css/base.css">{% endblock %}
</head>
<body>
    <header>{% include "partial/header.html" %}</header>
    <nav>{% include "partial/nav.html" %}</nav>
    <main>
        {% block main_content %}
            <!-- 这里是默认的主内容区域 -->
        {% endblock %}
    </main>
    <footer>{% include "partial/footer.html" %</footer>
    {% block footer_js %}<script src="/static/js/base.js"></script>{% endblock %}
</body>
</html>

Next, when we create a specific page, such as an article detail pagearticle_detail.htmlall we need to do is use the first line of the file{% extends 'base.html' %}to declare that it inherits frombase.htmlThis template. Then, we just need to overridebase.htmlis defined inblockthe area.

For example,article_detail.htmlIt may look like this:

{% extends 'base.html' %}

{% block page_title %}<title>{{ archive.Title }} - 我的网站</title>{% endblock %}

{% block main_content %}
    <article>
        <h1>{{ archive.Title }}</h1>
        <div class="meta">
            <span>发布日期: {{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
            <span>分类: <a href="{{ category.Link }}">{{ category.Title }}</a></span>
        </div>
        <div class="content">
            {{ archive.Content|safe }}
        </div>
    </article>
{% endblock %}

{% block footer_js %}
    {{ super() }} <!-- 继承并保留父模板的JS -->
    <script src="/static/js/article_detail.js"></script>
{% endblock %}

As you can see,article_detail.htmlWe do not need to rewrite the header, footer, and navigation, etc., of common code, just focus on the unique title and content.base.htmlThe page header needs to be modified, and all pages inheriting it will be automatically synchronized for updates, greatly enhancing maintenance efficiency.

In addition to template inheritance, AnQiCMS also provides{% include %}and{% macro %}Tags for auxiliary, further enhancing the modularization and reusability of the template.includeTags can insert reusable code snippets (such as sidebar components, comment boxes, ad slots, etc.) into any template.This means we can separate the UI components that appear repeatedly on the page and 'include' them as needed. Modify one place, and it will take effect globally.macroLabels are more like functions in templates, which can define reusable HTML snippets or logic with parameters, further reducing code redundancy.

With this layered and modular design, developers can build websites with clearer logic.The unified page layout ensures that users have a consistent visual experience when browsing different pages, enhancing the professionalism and brand awareness of the website.At the same time, when the website needs to be redesigned, style adjustments, or feature additions, we only need to modify a few core template files or code snippets, without having to check and modify each page one by one, greatly reducing the cost of development and maintenance, improving work efficiency, and reducing the likelihood of errors.This strategy makes the operation of the website more flexible and efficient, able to respond quickly to market changes and user needs.

Frequently Asked Questions (FAQ):

  1. How can a child template not inherit all the content of the parent template but only modify part of the area?Answer: In the AnQiCMS template system, the child template goes through{% extends '父模板文件名' %}Inherit from the parent template. The areas in the parent template that need to be overridden or replaced by the child template, need to be{% block 区域名称 %}{% endblock %}defined by tags. The child template only needs to rewriteblockthe same-named areas, the areas in the parent template that are not rewritten.blockThe area or notblockThe content within the tags will be automatically inherited and displayed. If you want to retain some content of the parent templateblockwhile adding your own content, you can use{{ super() }}Label to reference parentblockThe content.

  2. How should I do if I want to reuse the same widget on multiple pages, such as the sidebar navigation?Answer: You can use{% include "组件文件名.html" %}Label these reusable components. Store the sidebar navigation, advertisement areas, copyright information, and other content in separate HTML files (for examplepartial/sidebar.html），Then use it in any template file that needs to display it{% include "partial/sidebar.html" %}. This way, any modification of the component only needs to be made in one place, and all pages that reference it will be automatically updated.

  3. Will template inheritance and modular design affect the website's loading speed or SEO?答：In most cases, template inheritance and modular design will not have a negative impact on the loading speed of the website, but may indirectly optimize performance by reducing redundant code and improving code organization.AnQiCMS based on Go language development, its template engine parsing efficiency is high.SEO aspects, due to the template inheritance, ensure the unified management and accurate output of key information such as TDK (title, description, keywords), as well as the clear and consistent page structure, which is very friendly to search engine spiders for crawling and indexing, and helps to improve the SEO performance of the website.