In AnQi CMS, the template system provides a powerful and flexible mechanism that allows users to efficiently customize the layout and content display of the website.The key function to achieve personalized design and maintain the consistency of the overall website style is to "inherit the parent template and rewrite specific block content".

Core Concept: Say goodbye to repetition, embrace inheritance

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

The template engine of Anqi CMS draws inspiration from Django's syntax, allowing us to define a 'skeleton' template (usually referred to as a parent template or base template), which includes the common structure of the website and rewriteable content areas.The child templates are built based on this skeleton, they do not need to rewrite the common parts, just focus on how to fill in or modify the specific areas defined in the parent template, thus achieving customized content display.

Foundation:extendsWithblocktags

In the Anqi CMS template, the core of this mechanism is two tags:extendsandblock.

  1. extendsTags:This tag is used to declare the parent template that a child template inherits. It must be the first non-comment tag in the child template. For example,{% extends 'base.html' %}means that the current template will inherittemplatethe directory.base.htmlAs its basic layout. Through it, child templates gain all the structures and contents defined in the parent template.

  2. blockTags: blockThe label defines a named, overridable 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.blockTags 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 Subtemplates

When a subtemplate is usedextendsAfter inheriting the parent template, it can rewrite the content of this block by defining tags with the same name as inblockthe parent template.

For example, if the parent templatebase.htmlcontains{% block content %}a block, the child templateindex.htmlcan 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 child template:

  • {% extends 'base.html' %}Explicitly specified that it inheritsbase.html.
  • {% block title %}Rewrote in the parent template<title>The content of the tag is displayed as 'AnQi CMS Home - Customize your website easily'.
  • {% block content %}Completely replaced the parent templatecontentThe default content in the block, which inserts the unique HTML structure and text of the homepage.

Ifindex.htmlNot definedblock headerso thatbase.htmlinheaderThe default content of the block will be displayed as is. This is the charm of template inheritance - customization on demand without touching the common parts.

Actual Operation: Step-by-step customization of your security CMS template

Let's demonstrate this process with a simple example:

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

Assuming your template directory name isdefault.defaultcreate abase.htmlfile with the following content:

{# 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.htmlwhich includes the basic structure of the HTML document, CSS/JS references, and definestitle/extra_head/contentandextra_bodyFour rewriteable areas.

Step 2: Create a sub-template file (template/default/index.html)

Now, let's create the homepage templateindex.htmlso that it inheritsbase.htmland rewrite the content inside it:

{# 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 the AnQi CMS rendersindex.htmlit will first loadbase.htmlthe structure, then replace theindex.htmlinblock titlecontentbase.htmloftitleblock withblock contentcontentbase.htmlofcontentBlock, and insert.extra_headandextra_bodyAdditional content.

Auxiliary tags and **practice.

  • includeWithextendsCollaboration: extendsUsed to establish the hierarchical relationship of the entire page layout, which determines the page's 'skeleton'.includeLabels are used for reusing smaller, independent components, such as a sidebar module, a comment form, or a product card.They complement each other, jointly improving the reusability and maintainability of the template.
  • extendsIt must be the first tag of the sub-template:.This is a strict rule. Any in{% extends %}The HTML code, text, and even whitespace characters (except comments) that appear previously can all lead to template inheritance failure.
  • **Make good use of `