In website construction and maintenance, how to efficiently manage code and avoid redundant work is the key to improving development efficiency and ensuring website consistency.For users who build websites with AnQiCMS, its flexible template engine provides a powerful code reuse mechanism, allowing us to easily refer to other template files, such as the common header (header) and footer (footer), thus achieving modular development.

includeLabel: Flexible Embed Code Snippet

The most direct and most commonly used method of code reuse in AnQiCMS templates is to useincludeLabel.The function of this tag is to embed the content of a template file directly into the specified position of another template file.header.html), and the bottom information area (footer.html）、sidebar（sidebar.html），even to a standalone component that appears repeatedly on a page (such as article list items, product cards, etc.).

UseincludeThe label is very intuitive, you just need to specify the path of the template file to be included in the main template file. For example, suppose there is apartialfolder, which containsheader.htmlandfooter.html:

<!-- template/your_template_name/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的 AnQiCMS 网站</title>
</head>
<body>
    {% include "partial/header.html" %}

    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是网站的主体内容。</p>
    </main>

    {% include "partial/footer.html" %}
</body>
</html>

Here,{% include "partial/header.html" %}and{% include "partial/footer.html" %}It willpartial/header.htmlandpartial/footer.htmlInsert all content as isindex.htmlat the corresponding position.

includeThe tag also provides more flexible usage. If you are not sure whether a file is definitely existing, you can useif_existsParameters, so even if the file does not exist, the page will not report an error, but will silently ignore the reference: English

{% include "partial/optional_ad.html" if_exists %}

Sometimes, you may want to pass some specific data to the template file being included. At this time, you can usewithkeywords to specify variables:

<!-- partial/header.html 中可以接收 title 和 keywords 变量 -->
<header>
    <nav>
        <h1>{{ title }}</h1>
        <p>关键词：{{ keywords }}</p>
        <!-- 其他导航内容 -->
    </nav>
</header>

<!-- 在主模板中这样引用并传递变量 -->
{% include "partial/header.html" with title="AnQiCMS 官方网站" keywords="AnQiCMS, 建站, CMS" %}

If you only want the template files included to use the variables you explicitly pass, and not inherit all the context variables of the current main template, you can useonlyKeyword:

{% include "partial/header.html" with title="AnQiCMS 官方网站" only %}

This is,partial/header.htmlcan only access totitleVariable, while it is unable to access other variables in the main template.

extendsandblock: Build the skeleton of the website.

When we need to define the overall layout of the website, for example, all pages share the same <head>Area, top navigation, bottom copyright information, but the main content (articles, product details, lists, etc.) is different.extendsandblockThe combination of tags is particularly powerful.This is a mechanism of template inheritance, which allows you to create a 'skeleton' template, and then other page templates can 'inherit' this skeleton and only fill in or modify the specific areas reserved in the skeleton.

Firstly, you need to create a basic layout template, usually namedbase.htmlorlayout.html. In this template, define the common structure of the website and useblockLabel marks the areas that may be overridden in sub-templates:

<!-- template/your_template_name/base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}AnQiCMS 网站{% endblock %}</title>
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
    <!-- 其他公共样式和脚本 -->
</head>
<body>
    {% include "partial/header.html" %} {# 顶部导航，可以继续使用 include #}

    <div id="wrapper">
        {% block content %}
            <!-- 子模板将在这里填充具体内容 -->
        {% endblock %}
    </div>

    {% include "partial/footer.html" %} {# 底部信息，也可以继续使用 include #}
    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
</body>
</html>

Inbase.htmlIn it, we defined twoblockarea:titleandcontent。Now, any other page template that wants to use this layout only needs to use it at the beginning of the fileextendstag to inherit it, and then through the same namedblocktag to fill or overridebase.htmlThe content corresponding to the area:

<!-- template/your_template_name/index.html (或其他页面，如 detail.html, list.html) -->
{% extends "base.html" %} {# 声明继承 base.html，这必须是模板文件的第一行 #}

{% block title %}网站首页 - {% system with name='SiteName' %}{% endblock %}

{% block content %}
    <section class="hero">
        <h2>欢迎使用 AnQiCMS 构建您的网站</h2>
        <p>轻松管理内容，高效展示信息。</p>
    </section>

    <section class="features">
        <h3>核心功能</h3>
        <ul>
            <li>多站点管理</li>
            <li>灵活内容模型</li>
            <li>高级 SEO 工具</li>
        </ul>
    </section>
{% endblock %}

This is,index.htmlNo need to rewrite it.<head>/<body>/header/footerAnd other common code, just pay attention totitleandcontentThe specific content of the area. The overall structure of the page isbase.htmlUnified control, while the specific content of each page is handled by the sub-template.

Template file organization:partial/The convention of the catalog

In order to better organize and manage these reusable template files, the AnQiCMS template guide suggests that small, reusable code snippets (such as sidebars, breadcrumb navigation, footers, etc.) can be stored inpartial/The directory. For example:

/template
  /your_template_name
    /partial
      header.html
      footer.html
      sidebar.html
      breadcrumb.html
    base.html
    index.html
    article_detail.html
    ...

This structure clearly divides the responsibilities of the template:base.htmlDefines the overall layout of the website,index.htmlorarticle_detail.htmletc. are specific page templates, andpartial/The files in the directory are various widgets and common areas.

Through the above two main code reuse mechanisms -includeTags are used to embed independent fragments,extendsandblockTags are used to build and fill the page skeleton——AnQiCMS makes website template development efficient and easy to maintain.You can say goodbye to tedious copy and paste, focusing on the creativity and design of website content, letting the technical tools truly serve the goal of content operation.

Common Questions (FAQ)

1. When should I useincludeWhen to useextendsandblock?In general,extendsandblockApplicable for constructing the overall structure and layout of a page (such as the header, footer, and sidebar framework of a website), because they define a parent-child relationship, where child templates inherit the overall structure of the parent template and modify specific areas.includeLabel is more suitable for embedding those relatively independent, small code snippets that can be reused on different pages or different areas, such as a specific menu item of a navigation bar, an ad slot, an article summary card, or a general form