Manage front-end page code in AnQi CMS, especially for code snippets that need to be repeated on multiple pages, such as headers and footers, which is the key to improving development efficiency and website maintainability.Strong and flexible template engine provided by Anqi CMS, allowing us to organize and reference these common codes in an elegant manner.

Understanding the importance of template reuse

Imagine if your website has dozens, even hundreds of pages, each containing complete header, navigation, and footer code independently.When the website's logo needs to be changed, or the footer copyright information needs to be updated, you will have to modify all the pages one by one, which is undoubtedly a tedious and error-prone task.The core value of template reuse lies in:

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

The Anqi CMS template engine supports tags similar to Django syntax, which provides a solid foundation for efficient code reuse.

Anqi CMS template file organization overview

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

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

  • Public code files:such asbash.htmlThis document specifically points out that this is used to store the 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 a page, used by other pages through inheritance.
  • Code snippet directory:It is usuallypartial/Directory, used to store sidebar, breadcrumb, common form components, etc., small, pluggable code snippets.

Understood these conventions, we can start organizing and referencing code efficiently.

Core strategy one: Use template inheritance to simplify the page skeleton.

For the outermost structure of a website page, for example, including<!DOCTYPE html>/<head>/<body>as well as the main header and footer areas, we should use template inheritance (extends) to manage.

First, create a namedbash.html(or your preferred)base.html) basic template file, located in the root directory of your theme (for example)/template/default/bash.html). This file will contain the common HTML structure for all pages, and it will be used by{% block ... %}The tag defines a replaceable area.

A typicalbash.htmlIt may include the following structure:

<!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 example:index.htmlorarticle/detail.htmlJust use{% extends 'bash.html' %}Use the tag to inherit this basic skeleton and use{% block ... %}Use the tag to fill or overwrite the corresponding area content

"`html {# /template/default/index/index.html #} {% extends ‘bash.html’ %}"

{% 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' %