English CMS template: Make full use ofincludeandextendsTo create efficient and reusable display modules

When you use the safe CMS to build a website, you will quickly find that it is very flexible in organizing content display.尤其是处理模板时，内置的Django模板引擎语法让我们可以像搭积木一样高效地构建页面。includeandextendsThese powerful tags are used to organize and manage reusable display modules in your website, making your templates cleaner and easier to maintain.

Understand the basics of Anqi CMS templates.

Before delving deeper, let's review the basic conventions of the AanQi CMS template. Template files usually start with.htmlFor suffix, and stored uniformly/templateThe directory. The static resources such as styles, JavaScript scripts, and images you need to use will be placed/public/static/directory. In the template, we use double curly braces{{ 变量 }}Come output content, use single curly braces and percent signs{% 标签 %}Come control logic, which is very similar to the syntax of Django template engine, and it is also very natural to get started.

include标签：代码片段的即插即用

Imagine, the header, footer, sidebar, or an advertisement block on your website, these contents almost appear on every page.If each page is copied and pasted one by one, it is not only time-consuming, but it will also be very麻烦 to make modifications in the future.includeTags come into play.

includeThe label allows you to embed an independent HTML fragment (or code fragment) into the current template file.Its syntax is very simple, you just need to specify the path to the template file to be included.include进来的代码片段会放在一个专门的目录下，比如/template/你的模板目录/partial/，这样方便管理。

For example, if the content of your header is relatively independent, you can place it inpartial/header.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ title|default:"默认标题" }}</title>
    <meta name="keywords" content="{{ keywords|default:"默认关键词" }}">
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
    <header class="main-header">
        <h1><a href="{% system with name="BaseUrl" %}">{% system with name="SiteName" %}</a></h1>
        <nav>
            {% navList mainNavs %}
                <ul>
                    {% for item in mainNavs %}
                        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
                    {% endfor %}
                </ul>
            {% endnavList %}
        </nav>
    </header>

Then, simply include it on any page where you need to use the header:

{% include "partial/header.html" %}

Sometimes, you may not be sure whether a fragment file exists, or you want it to be introduced only when it exists, in which case you can addif_exists:

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

Also,includeThe label also allows you to pass specific variables to the imported fragments. For example, we want to pass the aboveheader.htmlPass a customtitleandkeywords:

{% include "partial/header.html" with title="我的首页标题" keywords="SEO优化关键词" %}

If you only want to useincludeThe fragment uses the variables you explicitly pass, not inheriting all variables from the current template, and can bewithafter addingonly:

{% include "partial/header.html" with title="我的首页标题" keywords="SEO优化关键词" only %}

This is,header.htmlonly recognizetitleandkeywordsthese two variables, and other variables will not be inherited.

extendsLabel: Build the overall framework of the website

If we sayincludeIt is used to insert small blocks of building blocks, thenextendsJust like designing an overall blueprint or framework for your website.It allows you to define a basic template (usually called a "master" or "layout template"), which includes the common structure of a website, such as navigation, header, footer, and division of content areas, etc.

extendsLabels are always placed at the top of the template file, declaring which parent template the current template inherits from. For example, we create a parent template file namedbase.htmlwhich defines the basic structure of the page:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {# 这个title块是可被子模板重写的区域 #}
    {% block title %}
        <title>默认网站标题 - {% system with name="SiteName" %}</title>
    {% endblock %}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/global.css">
    {% block head_extra %}{# 预留给子模板添加额外head内容 #}{% endblock %}
</head>
<body>
    <div class="wrapper">
        <header>
            {# 这里通常会include页眉代码片段 #}
            {% include "partial/header.html" %}
        </header>

        <nav class="main-nav">
            {# 导航栏代码，可能也是一个include片段 #}
        </nav>

        <main class="content-area">
            <aside class="sidebar">
                {# 侧边栏内容，也可以是include片段 #}
            </aside>
            <article class="main-content">
                {# 这个content块是页面的主体内容，子模板会在这里填充 #}
                {% block content %}
                    <p>这是母版中定义的默认内容。</p>
                {% endblock %}
            </article>
        </main>

        <footer>
            {# 这里通常会include页脚代码片段 #}
            {% include "partial/footer.html" %}
        </footer>
    </div>
    {% block body_extra %}{# 预留给子模板添加额外body内容 #}{% endblock %}
</body>
</html>

In the master template, you need to useblocktags to define areas that can be overwritten or filled by child templates. When a child template inherits this master, it can optionally overwrite theseblockThe content of the area. If the sub-template does not have a re