Manage the front-end page code in AnQi CMS, especially the header, footer, and other code snippets that need to be repeated on multiple pages, is the key to improving development efficiency and website maintainability.The template engine provided by Anqi CMS is powerful and flexible, allowing us to organize and reference these common codes in an elegant way.

Understanding the importance of template reuse

  1. Increase maintenance efficiency:Modify only one place, and it will take effect on all pages that reference this code snippet.
  2. Ensure website consistency:Ensure that all common elements on all pages (such as navigation bar styles, footer information) are consistent.
  3. Accelerate the development process:Avoid rewriting the same code and focus on the unique content of the page.
  4. Optimize the code structure:Make the template code more concise, modular, and easy to read and understand.

The template engine of AnQi CMS supports tags similar to Django syntax, providing a solid foundation for efficient code reuse.

An overview of AnQi CMS template file organization

In the Anqi CMS, all template files are stored in/templatedirectory. Each independent template theme will have its own folder, for exampledefaultthe theme will be in/template/default. Template files are usually named with.htmlEnd, while the styles, JavaScript scripts, and static resources such as images used in the template will be stored uniformly/public/static/In the catalog.

To better organize general code, AnQi CMS recommends two main structures:

  • Public code files:For examplebash.htmlThe document specifically points out that this is used to store parts that are inherited by each page, such as headers and footers.This implies that it is very suitable as the basic skeleton file of the page, and can be used by other pages through inheritance.
  • Code snippet directory:It is usuallypartial/Catalog, used to store sidebar, breadcrumbs, common form components, and other small, pluggable code snippets.

Understood these conventions, we can start to organize and reference code efficiently.

Core Strategy One: Simplify the page skeleton using template inheritance.

For the outermost structure of a web page, such as the<!DOCTYPE html>/<head>/<body>as well as the main header and footer areas, we should useextendsto manage.

Firstly, create a file namedbash.html（or the one you are accustomed to)base.htmlThe basic template file, located in the root directory of your theme (for example)/template/default/bash.htmlThis file will contain the common HTML structure of all pages, and through{% block ... %}Label defines the replaceable area.

a typicalbash.html可能包含以下结构：

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    {% tdk seoTitle with name="Title" siteName=true %}
    <title>{{ seoTitle }}</title>
    <meta name="keywords" content="{% tdk with name='Keywords' %}">
    <meta name="description" content="{% tdk with name='Description' %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/main.css">
    {% block head_extra %}{% endblock %} {# 额外头部内容，如特定页面的CSS或JS #}
</head>
<body>
    <header>
        {% include "partial/header.html" %} {# 引用通用的页头片段 #}
    </header>

    <nav>
        {% include "partial/nav.html" %} {# 引用通用的导航片段 #}
    </nav>

    <main>
        {% block content %}{% endblock %} {# 页面主体内容 #}
    </main>

    <footer>
        {% include "partial/footer.html" %} {# 引用通用的页脚片段 #}
    </footer>

    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
    {% block body_extra %}{% endblock %} {# 额外身体底部内容，如特定页面的JS #}
</body>
</html>

Next, for any specific page of the website, for exampleindex.htmlorarticle/detail.html, you just need to use{% extends 'bash.html' %}tag to inherit this basic skeleton and use{% block ... %}Label to fill in or rewrite the content of the corresponding area.

{% block head_extra %}

<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/home.css">

{% endblock %}

{% block content %}

<h1>欢迎来到安企CMS网站！</h1>
<p>这是首页的独特内容。</p>
{% include "partial/latest_articles.html" %} {# 首页特有的文章列表片段 #}

{% endblock %}

{% block body_extra %}

<script src="{% system with name='TemplateUrl' %