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

The core concept of template inheritance isreusability and layeringIt allows us to create a basic "master" template that includes the common structure and elements of all web pages, such as headers, footers, main navigation, sidebars, etc.This template is like a design blueprint, specifying the overall framework of the website.

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

Firstly, we usually create a namedbase.html(or a similar name) template file, serving as the skeleton of the entire website.In this file, we will define the HTML structure that all pages will share.Parts that change on different pages, such as page titles, main content areas, specific CSS or JavaScript references, etc., we will use{% block block_name %}{% endblock %}Such tags are used to mark as 'replaceable area'. TheseblockTags not only specify the name of the area but can also contain default content so that it is displayed when the sub-template does not override.

For example, ourbase.htmlmay be arranged as follows:

<!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.htmlwe only need to use in the first line of the file{% extends 'base.html' %}To declare it inherits frombase.htmlthis master. Then, we just need to coverbase.htmldefined inblockthe area as needed.

For example,article_detail.htmlIt might 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 code repeatedly, but focus on its unique title and content. Ifbase.htmlThe page header needs to be modified, all pages inheriting it will be automatically synchronized for updates, greatly improving maintenance efficiency.

In addition to template inheritance, AnQiCMS also provides{% include %}and{% macro %}Labels that assist further enhance the modularity and reusability of the template.includeLabels can insert reusable code snippets (such as sidebar components, comment boxes, ad spaces, etc.) into any template.This means we can split out the UI components that appear repeatedly on the page and 'include' them as needed. Modify one place, and it takes effect globally.macroTags are more like functions in templates, which can define reusable HTML fragments or logic, thus reducing code redundancy.

Through this layered and modular design, developers can build websites with clearer logic.The unified page layout ensures a consistent visual experience for users when browsing different pages, enhancing the professionalism and brand sense of the website.At the same time, when a 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, which greatly reduces the cost of development and maintenance, improves work efficiency, and reduces the possibility 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 sub-template not inherit all the content of the parent template and only modify a part of the area?Answer: In the AnQiCMS template system, the sub-template{% extends '父模板文件名' %}Inherit the parent template. The areas that need to be overwritten or replaced in the parent template need to be defined using{% block 区域名称 %}{% endblock %}tags. The child template only needs to rewrite the同名blockareas, and the parent template areas that are not rewritten.blockThe region or notblockThe content within the tags will be automatically inherited and displayed. If you want to retain some of the parent template'sblockoriginal content while adding your own, you can use{{ super() }}Label to reference parentblockThe content.

  2. How should I do if I want to reuse the same component on multiple pages, such as the sidebar navigation?Answer: You can use{% include "组件文件名.html" %}Label to include these reusable components. Place the sidebar navigation, advertisement blocks, copyright information, and other content in a separate HTML file (for examplepartial/sidebar.html), then use it in any template file where it needs to be displayed{% include "partial/sidebar.html" %}This way, the modification of the component only needs to be done in one place, and all the pages that refer to it will be automatically updated.

  3. Does template inheritance and modular design affect website loading speed or SEO?Answer: Generally speaking, template inheritance and modular design do not have a negative impact on website loading speed, and may even indirectly optimize performance by reducing redundant code and improving code organization.AnQiCMS is developed based on the Go language, its template engine has high parsing efficiency.SEO aspects, due to the inheritance of templates, ensure the unified management and accurate output of key information such as TDK (title, description, keywords), as well as the clear and consistent structure of the page, which is very friendly for search engine crawlers to crawl and index, and helps to improve the SEO performance of the website.