In AnQi CMS, the template system provides a powerful and flexible mechanism, allowing users to efficiently customize the layout and content display of the website.In which, inheriting the parent template and rewriting specific block content is a key function to achieve personalized design and maintain the consistency of the website's overall style.

Core Concept: Say goodbye to repetition, embrace inheritance

Imagine a website's header, footer, sidebar, and other elements that are fixed and consistent on almost every page.If there is no template inheritance mechanism, we may need to rewrite these common codes on each page template, which not only increases the maintenance difficulty but also tends to lead to code redundancy and inconsistency.

The AnQi CMS template engine has borrowed the syntax from Django, which allows us to define a "skeleton" template (usually referred to as the parent template or base template), which includes the common structure and editable content areas of the website.Based on this skeleton, sub-templates are built, which do not need to repeat the general part, just focus on how to fill in or modify the specific areas defined in the parent template, thus achieving customized content display.

Foundation:extendswithblockTag

The core of realizing this mechanism in Anqi CMS template is two tags:extendsandblock.

  1. extendsTags:This tag is used to declare the parent template inherited by a sub-template. It must be the first non-comment tag in the sub-template. For example,{% extends 'base.html' %}means that the current template will inherittemplateUnder the directorybase.htmlIt serves as the basic layout. Through it, the child template gains all the structures and content defined in the parent template.

  2. blockTags: blockThe tag defines a named, writable content area in the parent template.The parent template will provide default content for these areas (if needed), but the child template can optionally override this content. AblockTags always appear in pairs, formatted as{% block 区域名称 %} ... {% endblock %}For example,{% block title %}默认标题{% endblock %}Defined a namedtitleblock, and provides default content.

Custom display: Rewrite practice in the sub-template

When the sub-template passesextendsAfter inheriting the parent template, it can rewrite the content of this block by definingblocktags with the same name as those in the parent template.

For example, if the parent templatebase.htmlhas a{% block content %}block, the child templateindex.htmlit can be rewritten like this:

{# index.html #}

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

{% block title %}
    <title>安企CMS首页 - 轻松定制你的网站</title> {# 重写父模板的 title 区块 #}
{% endblock %}

{% block content %}
    <div class="main-content">
        <h2>欢迎来到安企CMS！</h2>
        <p>这里是首页的定制内容，我们重写了父模板的 content 区块。</p>
        <p>你可以根据需要在此处添加文章列表、产品展示、轮播图等。</p>
    </div>
{% endblock %}

{# 子模板中未被 block 标签包裹的内容将不会被渲染 #}

in thisindex.htmlIn the sub-template:

  • {% extends 'base.html' %}Explicitly specifies that it inheritsbase.html.
  • {% block title %}Rewrote the parent template in<title>The content of the label makes it display as "Anqi CMS Home - Customize your website easily."
  • {% block content %}It completely replaces the parent template.contentThe default content in the block, inserted the unique HTML structure and text of the homepage.

Ifindex.htmlNot definedblock headerthenbase.htmlinheaderThe default content of the block will be displayed as is. This is the charm of template inheritance - customization as needed without touching the common part.

Actual operation: Customize your Anqi CMS template step by step

Let us demonstrate this process through a simple example:

Step 1: Create the basic template file (template/default/base.html)

Assume your template directory name isdefault.defaultCreate a folder underbase.htmlfile, the content is as follows:

{# template/default/base.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {# 定义一个可重写的 title 区块 #}
    {% block title %}
        <title>我的安企CMS网站</title>
    {% endblock %}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    {# 定义一个可重写的 head 额外内容区块 #}
    {% block extra_head %}{% endblock %}
</head>
<body>
    <header>
        <nav>
            <a href="/">首页</a>
            <a href="/about.html">关于我们</a>
            <a href="/contact.html">联系我们</a>
        </nav>
        <hr>
    </header>

    <div class="container">
        {# 定义一个可重写的内容主体区块 #}
        {% block content %}
            <p>这里是网站的默认内容区域。</p>
            <p>子模板可以在这里填充或重写它们自己的内容。</p>
        {% endblock %}
    </div>

    <footer>
        <hr>
        <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
    </footer>
    <script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
    {# 定义一个可重写的 body 额外内容区块 #}
    {% block extra_body %}{% endblock %}
</body>
</html>

Thisbase.htmlContains the basic structure of the HTML document, CSS/JS references, and definestitle/extra_head/contentandextra_bodyFour writable areas.

Second step: Create a sub-template file (template/default/index.html)

Now, let's create the homepage templateindex.htmlto inheritbase.htmland rewrite the content:

{# template/default/index.html #}
{% extends 'base.html' %}

{% block title %}
    <title>安企CMS官方网站 - 灵活高效的企业级内容管理系统</title> {# 重写 title 区块 #}
{% endblock %}

{% block extra_head %}
    <meta name="description" content="安企CMS是基于Go语言开发的企业级内容管理系统，提供高效、可定制、易扩展的解决方案。">
    <meta name="keywords" content="安企CMS, 内容管理, CMS, Go语言, 企业建站">
{% endblock %}

{% block content %}
    <div class="hero-section">
        <h1>欢迎使用安企CMS！</h1>
        <p>一个专为中小企业、自媒体和多站点管理设计的Go语言内容管理系统。</p>
        <a href="/docs/start.html" class="button">开始使用</a>
    </div>

    <section class="features">
        <h2>核心功能</h2>
        <ul>
            <li>多站点管理</li>
            <li>灵活的内容模型</li>
            <li>高级SEO工具</li>
            <li>防采集与水印管理</li>
        </ul>
    </section>

    {# 可以在这里调用安企CMS的标签来展示动态内容 #}
    <section class="latest-articles">
        <h2>最新文章</h2>
        <ul>
            {% archiveList archives with type="list" moduleId="1" limit="5" %}
                {% for item in archives %}
                    <li>
                        <a href="{{item.Link}}">{{item.Title}}</a>
                        <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    </li>
                {% empty %}
                    <li>暂无最新文章。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </section>
{% endblock %}

{% block extra_body %}
    <script>
        // 只有首页才加载的JS逻辑
        console.log('首页特有的JS已加载。');
    </script>
{% endblock %}

When AnQi CMS rendersindex.htmlWhen it loads, it will first loadbase.htmlThe structure, then useindex.htmlinblock titleContent replacementbase.htmloftitleBlock, usingblock contentContent replacementbase.htmlofcontentBlock, and insertextra_headandextra_bodyAdditional content.

Auxiliary labels and **practice.

  • includewithextendsCollaboration: extendsUsed to establish the hierarchical relationship of the entire page layout, which determines the "skeleton" of the page. AndincludeTags are suitable for reusing smaller, independent components, such as a sidebar module, a comment form, or a product card.They complement each other, improving the reusability and maintainability of the template.
  • extendsThis must be the first label of the sub-template:This is a rigid rule. Any in{% extends %}The HTML code, text, even whitespace characters (except comments) that appeared previously can cause template inheritance to fail.
  • **Make good use of `