It is crucial to maintain consistency in page layout, improve development efficiency, and reduce maintenance costs in website construction and content management.AnQiCMS as an efficient content management system provides a flexible template mechanism, allowing us to easily reuse common code snippets across different pages, such as the website header navigation, footer information, or sidebar.

This article will delve into how to elegantly introduce public header and footer code snippets in AnQiCMS templates, helping you better organize template files and improve the overall maintenance efficiency and user experience of the website.

AnQiCMS template working principle overview

AnQiCMS template engine is similar to the Django framework template syntax, it allows us to use.htmlFile as a template, and use specific tags to control the output and logic. Among them, double curly braces{{变量}}Used to output variable content, while single curly braces and percentage signs{% 标签 %}It is used to define conditional judgments, loop controls, and other operations such as importing template files.

Understood the basics, we can better utilize its powerful features to manage public code.

Organize the directory structure of public code snippets

In order to better manage the common code in the template, AnQiCMS encourages us to adopt a clear directory structure. Usually, you will be able to/templateFind the theme folder you are currently using in the directory (for exampledefault)。Inside this theme folder, we can create some directories and files specifically for storing common code snippets:

  1. Basic layout file (bash.htmlorbase.html):
    • In the root directory of the theme folder, you can create a file namedbash.htmlorbase.htmlThe file. This file will serve as the "master" or "skeleton" of your website, containing the common HTML structure of all pages, such as<html>/<head>/<body>tags, as well as the division of the main content area.
    • The document specifies,bash.htmlwhich can be the inherited part of the header, footer, and other parts of each page.
  2. Code snippet directory (partial/):
    • Create a folder named inside the theme folder,partial/The subdirectory. This directory is used to store some reusable, independent page components, such as:
      • header.html(website header navigation, Logo, etc.)
      • footer.html(Website footer copyright information, friend links, etc.)
      • sidebar.html(Sidebar content)
      • breadcrumb.html(Breadcrumbs navigation) etc.

In this way of organization, our template structure will become clearer and easier to manage.

Introduce the core tag of the public code:includeandextends

AnQiCMS template engine provides two main tags for code reuse:includeandextendsThey each have different application scenarios.

1. UseincludeTag: Insert an independent fragment

includeThe tag is used to insert the content of an external template file into the specified position of the current template.It is suitable for those independent, plug-and-play components, such as when you want to display the same header or footer content on multiple pages, or a standard sidebar.

Basic usage:

Assuming you have alreadypartial/created in the directoryheader.htmlandfooter.html. You can introduce them like this on any page:

{# 引入头部代码片段 #}
{% include "partial/header.html" %}

<main class="page-content">
    {# 页面具体内容 #}
</main>

{# 引入尾部代码片段 #}
{% include "partial/footer.html" %}

Here"partial/header.html"It is a path relative to your theme root directory.

Advanced usage:

  • if_exists: Safe importIf you are not sure if the file to be imported exists, you can useif_existskeywords, so that even if the file does not exist, the template will not report an error, but will simply ignore the import.
    
{% include "partial/header.html" if_exists %}
  • withPass variableSometimes, the segment you introduce may need some specific variables from the parent template. You can usewithkeywords to pass variables to the included template.
    
{% include "partial/header.html" with pageTitle="当前页面标题" %}
    Inheader.htmlin, you can use{{ pageTitle }}To retrieve this variable.
  • only: Limit the scope of the variableIf you only want the template included to access the variables you pass throughwithInstead of inheriting all the variables from the parent template, you can useonlykeywords.
    
{% include "partial/header.html" with pageTitle="当前页面标题" only %}

2. UseextendsLabel: Build the page skeleton

extendsThe label is used to implement template inheritance, it allows you to create a basic layout (usuallybase.html），where the overall structure of the page and some reusable content areas (throughblocktag definition). Other pages can inherit this basic layout and then fill or override theseblockArea. This is very useful for building websites with a unified layout.

Basic usage:

First, create yourbase.htmlfile as the common layout of the website:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block head_meta %}
    {# 页面特有的 meta 标签或 CSS 链接 #}
    {% endblock %}
    <title>{% block title %}默认网站标题{% endblock %}</title>
    {# 引入公共 CSS 文件，通常放置在 /public/static/your_theme/css 目录下 #}
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
    {% include "partial/head_custom.html" if_exists %} {# 可选：引入自定义的头部代码，如统计代码等 #}
</head>
<body>

    {% include "partial/header.html" %} {# 引入头部代码片段 #}

    <div class="container">
        {% block content %}
        {# 这里是每个页面具体内容区域，等待子模板填充 #}
        {% endblock %}
    </div>

    {% include "partial/footer.html" %} {# 引入尾部代码片段 #}

    {# 引入公共 JS 文件 #}
    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
    {% block scripts %}
    {# 页面特有的 JavaScript 代码 #}
    {% endblock %}
</body>
</html>

Then, in your specific page template (such asindex/index.htmlorarchive/detail.htmlIn it, you can inheritbase.htmlAnd fill in the content:

"twig {# Must be the first line of the template file #} {% extends 'base.html' %}

{% block title %}My Home Page - {% endblock %} {# Override the default title, it will be appended before the default title in base.html #}

{% block content %}

<h1>欢迎来到我的网站</h1>
<p>这是首页的专属内容。</p>