When using AnQiCMS to build a website, we often encounter such situations: each page of the website has common header navigation, footer information, or a module (such as a sidebar, article recommendation list) that needs to be displayed in multiple places, but the content or style may be slightly different.If you copy and paste this code every time, it is not only inefficient, but also once it needs to be modified, it has to be adjusted one by one on all related pages, which is very easy to make mistakes and difficult to maintain.

AnQiCMS fully considers this requirement, it built-in strong template inheritance and reference features, allowing us to build websites as efficiently and flexibly as stacking building blocks, ensuring the reusability of the code and the maintainability of the website.Master these features, and you can easily handle 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. Improve efficiency：Avoid rewriting the same HTML structure or functional code, which greatly shortens development time.
  2. Maintain consistencyThrough centralized management of public modules, it can ensure the unity of style and function of the website's various parts, improving user experience.
  3. Simplify maintenanceWhen the website design or function needs adjustment, only one core module needs to be modified, and all the places referencing the module will be updated synchronously, avoiding cumbersome manual modifications and reducing the risk of errors.
  4. Easy to expandCan easily insert new feature modules or replace old modules in the existing structure, enabling the website to quickly adapt to business changes.

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

Second, template inheritance: building the skeleton of a website

Template inheritance is the core function for building the overall layout of a website, which allows you to define a basic “master” template that includes common website structures (such as headers, footers, and sidebars), and then let other page templates inherit this master template.

  1. core concept: Template inheritance is like making a "universal draft" for your website. You can draw all the common parts on this draft and leave some "blank areas" (namelyblockLabel), let the child template inherit it to fill in the blank areas, or choose to use the default content preset in the template.This way, all sub-pages will have the same skeleton, but the specific content can be different.

  2. How to useextendsandblockTag:

    • Define a master template (base.html): Typically, we would create one in the template directorybase.htmlThe file, as the master of the website. In this file, you can define the HTML structure of the entire page, include CSS and JavaScript files, and use{% block 块名称 %}{% endblock %}Label to define an area that can be overlaid 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 template (index.htmlor other pages): The first thing you need to do in the child template is to use{% extends '母版文件路径' %}Use the tag to declare which master it inherits.Please note,extendsThe tag must be the first tag in the sub-template.Then, you can use the same named{% block 块名称 %}tag to fill or override the reserved areas in the master.

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

      By this means,index.htmlNo need to repeat writing anymore<head>/<footer>Common code, just pay attention to the unique content area.

Third, template reference: insert independent code snippets

Template references are applicable to those independent code snippets that need to be reused in multiple pages or different positions on the same page, such as navigation menus, ad spaces, social sharing buttons, and so on.They are usually complete, self-contained modules.

  1. core concept: Template references are like the 'Legos' of a website. Each block is a complete, functional module that you can insert anywhere as needed, and even if the same block is inserted in multiple places, they are independent and do not affect each other.

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

    • Define a code snippet (partial/header.html):partial/header.htmlAssuming
      
<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>
    • Refer to the code snippet: Inbase.htmlOr any other place where navigation needs to be displayed, use it directlyinclude:
      
<header>
    {% include "partial/header.html" %}
</header>
    • Handle optional reference (if_exists): If you are unsure