【en】How to include public header, footer, or sidebar template files?

The core concept lies in the reusability and structuring of the code.By modularizing content that appears repeatedly, we can ensure the consistency of the website style, reduce redundant code, and greatly simplify future content update work.includeTags andextendsLabel.

1. UseincludeTag inclusion code snippet

include

Use cases:

  • Sidebar:Most pages may share the same sidebar, which includes navigation, popular articles, advertisements, and more.
  • Some header/footer content:For example, the copyright information area, the list of friend links.
  • Independent functional modules:For example, a page's comment form, share button group.

How to operate:

Firstly, save your public code snippet as an independent.htmlFile. Typically, to better organize template files, we would place these fragments in the current theme template directory underpartial/the folder. For example, you cantemplate/你的主题名/partial/directory createsidebar.htmlorfooter_links.html.

assume that we have created apartial/sidebar.htmlfile with the following content:

<aside class="sidebar">
    <h3>最新文章</h3>
    <ul>
        {% archiveList archives with type="list" limit="5" %}
            {% for item in archives %}
                <li><a href="{{item.Link}}">{{item.Title}}</a></li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
    <h3>联系我们</h3>
    <p>电话：{% contact with name="Cellphone" %}</p>
    <p>邮箱：{% contact with name="Email" %}</p>
</aside>

Then in the page template where you need to display this sidebar, use{% include %}tag to include it:

<!-- index.html 或 detail.html 等页面中 -->
<div class="main-content">
    <!-- 页面主体内容 -->
</div>
<div class="right-sidebar">
    {% include "partial/sidebar.html" %}
</div>

More flexible usage:

  • Optional inclusion:If a segment may exist or not, you can useif_existsTo avoid errors:
    
{% include "partial/ad_banner.html" if_exists %}
  • To pass data:You can even passincludea specific variable to the template, making it display different content:
    
{% include "partial/hero_section.html" with title="欢迎访问安企CMS" subtitle="高效易用的内容管理系统" %}
    Inhero_section.htmlcan be used after that{{ title }}and{{ subtitle }}.

2. UseextendsBuild the page skeleton with tags

extendsTags are used to define a general page skeleton or layout, and child pages can inherit this skeleton and only modify specific content blocks.This is like an architectural blueprint, where you define the basic structure of the house (walls, roof), and then you can freely decorate (fill content) in each room (sub-page).This approach is very suitable for managing the overall layout of a website, including the global header, footer, and main area divisions.

Use cases:

  • The overall layout of the website:Define a container including<head>Area, main navigation, main content area, footer copyright information, etc., included inbase.html.
  • Different types of page layouts:For example, the article detail page and product list page may share most of the layout, but the structure of the main content area will be different.

How to operate:

First, create a basic layout file, usually namedbase.htmlAnd place it in the root directory of your theme template. In thisbase.htmluse{% block 块名称 %}{% endblock %}to define content areas that can be overridden by child templates.

Anbase.htmlexample might look something like this:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% tdk with name="Title" siteName=true %}{% endblock %}</title>
    <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/main.css">
    {% block head_extra %}{% endblock %} {# 留给子模板添加额外CSS/JS #}
</head>
<body>
    <header class="header">
        <a href="{% system with name="BaseUrl" %}"><img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}"></a>
        <nav class="main-nav">
            {% navList navs %}
                <ul>
                    {% for item in navs %}
                        <li><a href="{{ item.Link }}">{{item.Title}}</a></li>
                    {% endfor %}
                </ul>
            {% endnavList %}
        </nav>
    </header>

    <main class="container">
        <div class="content-wrapper">
            {% block content %}{% endblock %} {# 这是主内容区域，子模板会在这里填充 #}
        </div>
        {% include "partial/sidebar.html" %} {# 这里可以再次使用include引入侧边栏 #}
    </main>

    <footer class="footer">
        <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
        <p>{% system with name="SiteCopyright" %}</p>
        {% block footer_extra %}{% endblock %} {# 留给子模板添加额外JS #}
    </footer>
</body>
</html>

Then, on your specific page (such asindex.htmlorarchive/detail.html), you can{% extends %}inheritbase.htmland is used{% block %}inherit the tag to cover or fill the corresponding area:

{% extends 'base.html' %} {# 声明继承自base.html，这必须是模板文件的第一行 #}

{% block title %}首页 - {% tdk with name="SiteName" %}{% endblock %} {# 覆盖title块 #}

{% block head_extra %}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/index.css">
{% endblock %}

{% block content %} {# 填充主内容区域 #}
    <section class="hero-section">
        <h1>欢迎来到我们的网站！</h1>
        <p>探索我们的最新内容。</p>
    </section>
    <!-- 其他首页特有的内容 -->
{% endblock %}

{% block footer_extra %}
    <script src="{% system with name="TemplateUrl" %}/js/index_analytics.js"></script>
{% endblock %}

This is,index.htmlautomatically gainbase.htmlDefined in the header, navigation, and footer, while you only need to pay attention to the unique content part.

includevs.extendsWhen to choose?

In simple terms:

  • extendsUsed to define the overall page.Layout StructureIf you need a general page template that includes large blocks such as header, main content area, and footer, and most pages follow this structure, thenextendsIt is the preferred choice. It manages the "skeleton" of the page.
  • includeUsed to introduce components within the page.Independent componentsorCode snippetsWhen you need a piece of content (like a sidebar, advertisement, user comment section) to repeat in multiple places on a page that already has a structured skeleton,includeIt will be more efficient. It manages the 'furniture' or 'decoration' on the page.

A page usually starts withextendsa basic layout, then in theextendsWithin the basic layout coming in, or inside the sub-template.blockIn the area, and then use.includeTo introduce smaller common components.

macroTag (brief description of advanced usage)

ExceptincludeandextendsThe template engine of Anq CMS also supportsmacroA label, similar to a function in programming languages.