AnQiCMS fully considers this requirement, it built-in powerful template inheritance and reference features, allowing us to build websites as efficiently and flexibly as stacking blocks, ensuring the reusability of code and the ease of website maintenance.Master these features, and you can easily master the template, making the development and operation of the website smoother.

1. Why do we need reusable display modules?

The importance of reusable modules in website content operation and development is self-evident:

  1. Enhance efficiency：No need to rewrite the same HTML structure or functional code, greatly shortening the development time.
  2. Maintain consistencyThrough centralized management of public modules, it can ensure the consistency of style and function across different parts of the website, enhancing the user experience.
  3. Simplified maintenanceWhen the website design or function needs adjustment, only one core module needs to be modified, and all the references to the module will be synchronized updated, avoiding the繁琐 manual modification and reducing the risk of errors.
  4. Easy to expand: It can be easily inserted into the existing structure or replace the old modules with new ones, allowing the website to quickly adapt to business changes.

AnQiCMS uses a syntax similar to Django template engine, which makes template inheritance and reference very intuitive and powerful. Variables are usually used{{变量}}English double curly braces form, while logical control labels, such as conditional judgments and loops, use{% 标签 %}English single curly braces with the percent sign form, and most logical labels require corresponding end tags, such as{% if ... %} ... {% endif %}.

English, template inheritance: building the "skeleton" of a website

Template inheritance is the core function of building the overall layout of a website, which allows you to define a "master" template that includes the common structure of the website (such as header, footer, sidebar), and then let other page templates inherit this master template.

  1. Core Concept： Template inheritance is like creating a 'universal draft' for your website. You can draw all the common parts on this draft and leave some 'blank areas' (i.e.blockLabel), let the child template that inherits it fill in these blank areas, or choose to use the default content preset in the draft.Thus, all subpages will have the same skeleton, but the specific content can vary.

  2. How to useextendsandblocktags:

    • Define Master (base.html): Generally, we create one under the template directorybase.htmlFiles, as the master of the website. In this file, you can define the entire page's HTML structure, include CSS and JavaScript files, and use{% block 块名称 %}{% endblock %}Tags can be used to define areas that can be overridden by child templates.

      <!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="{% system with name="TemplateUrl" %}/css/style.css">
    {% block head_extra %}{% endblock %} {# 预留给子模板添加额外的head内容 #}
</head>
<body>
    <header>
        {% include "partial/header.html" %} {# 头部导航，通常作为一个独立模块引用 #}
    </header>


    <div class="main-content">
        <aside class="sidebar">
            {% block sidebar %}
                {# 默认侧边栏内容，子模板可覆盖 #}
                <p>这里是默认的侧边栏内容。</p>
                {% include "partial/latest_articles.html" %} {# 推荐文章模块 #}
            {% endblock %}
        </aside>


        <main class="content-area">
            {% block content %}
                {# 页面主要内容区域，子模板必须填充 #}
                <p>欢迎来到我的网站！</p>
            {% endblock %}
        </main>
    </div>


    <footer>
        {% include "partial/footer.html" %} {# 底部信息，通常作为一个独立模块引用 #}
    </footer>
    {% block body_extra %}{% endblock %} {# 预留给子模板添加额外的body内容，例如JS脚本 #}
</body>
</html>

    • Inherit master page (index.html) or other pages) In the child template, the first thing you need to do is to use{% extends '母版文件路径' %}Label it to declare which master page it inherits.Please note,extendsThe tag must be the first tag in the child template.Next, you can use the same named{% block 块名称 %}tag to fill or override the reserved areas in the master page.

      {% extends 'base.html' %} {# 声明继承 base.html #}


{% block title %}
    <title>首页 - 我的网站</title> {# 覆盖母版中的 title 块 #}
{% endblock %}


{% block content %}
    <h2>欢迎阅读我们的最新文章</h2>
    {% archiveList articles with type="list" limit="5" %}
        <ul>
        {% for item in articles %}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a> - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
        {% endfor %}
        </ul>
    {% endarchiveList %}
{% endblock %}


{% block sidebar %}
    {# 完全覆盖母版侧边栏，只显示分类导航 #}
    <h3>文章分类</h3>
    {% categoryList categories with moduleId="1" parentId="0" %}
        <ul>
        {% for category in categories %}
            <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
        {% endfor %}
        </ul>
    {% endcategoryList %}
{% endblock %}

      In this way,index.htmlNo longer need to rewrite<head>/<footer>Public code, just pay attention to the unique content area.

Section 3: Template Reference: Insert independent code snippets

The template reference is suitable for independent code snippets that need to be reused in multiple pages or different positions on the same page, such as navigation menus, ad slots, social sharing buttons, etc.They are usually complete, self-contained modules.

  1. Core Concept： Template references are like the 'Legos' of a website.Each brick is a fully functional module, and you can insert these bricks anywhere as needed. Even if the same brick is inserted in multiple places, they are independent of each other and do not affect each other.

  2. How to useincludetags:{% include "代码片段文件路径" %}The label can directly insert the content of another template file at the current position.

    • Define a code snippet (partial/header.html) Assumption:partial/header.htmlContains the top navigation of the website:
      
<nav class="top-nav">
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
    <a href="/contact">联系方式</a>
    {# 使用navList标签获取动态导航菜单 #}
    {% navList main_navs %}
        {% for item in main_navs %}
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% endfor %}
    {% endnavList %}
</nav>
    • Reference a code snippet: Inbase.htmlOr any other location where navigation needs to be displayed, use it directlyinclude:
      
<header>
    {% include "partial/header.html" %}
</header>
    • Handle optional references (if_exists): If you are unsure