When building a website, we often encounter such a scenario: the page header (Header), footer (Footer), sidebar (Sidebar), and navigation menu modules almost appear on every page.These modules are not only similar in content, but their structure and style also need to be maintained highly consistent.If you repeat this code on each page, it is not only inefficient, but also once you need to make modifications, you have to adjust all pages one by one, which is undoubtedly a maintenance nightmare.

It is fortunate that AnQiCMS (AnQiCMS) understands the importance of template reuse and provides a powerful and flexibleincludetags, making everything simple and efficient. ThroughincludeLabels, we can isolate these common modules into separate files and then easily reference them anywhere they are needed, thereby greatly enhancing development efficiency, reducing maintenance costs, and ensuring the consistency of the overall website style.

includeThe core value of the label

includeThe core concept of the label is "Write Once, Use Anywhere".It allows developers to extract a block of standalone template code (such as the HTML structure of the header and footer) and save it as a separate template file.includeThe label points to this file, and the system will 'insert' this part of the code into the specified position when rendering the page.

This reuse pattern brings multiple benefits:

  1. Improve development efficiency:No need to copy code, just one line tag can introduce complex modules.
  2. Reduce maintenance costs:Any modification to the public module only needs to be made in one place, and all pages that reference it will be automatically updated.
  3. Keep the code tidy:The page template only contains core content and necessaryincludestatements, with clear and readable structure.
  4. Ensure visual consistency:Ensures the uniform appearance and function of common elements across different pages of the website.

includeBasic usage of tags

In the template system of AnQi CMS,includeThe label usage is very intuitive. Assuming we have saved the public header content of the website.partial/header.html, the public footer content saved as.partial/footer.htmlThey are usually located in the root directory of the current template theme (for exampletemplate/default/partial/). Then, in any page template (such asindex.html/detail.html), we just need to refer to them like this:

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

<!-- 这里是当前页面的主要内容 -->

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

When the page is accessed, Safe CMS will automatically find and loadpartial/header.htmlandpartial/footer.htmlthe content and then seamlessly present it in the corresponding position on the current page.

More flexible usage: pass variables

It is simply to include files, which is sometimes not enough to meet all needs.For example, the header of the website may need to display the title of the current page, or the copyright information in the footer may need to be dynamically adjusted for different pages.includeTagswithThe keyword comes into play. It allows us to pass specific variables to the imported template.

Suppose ourpartial/header.htmlcontains a{{ pageTitle }}variable used to display the page title:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ pageTitle }} - 你的网站名称</title>
    <!-- 其他头部信息 -->
</head>
<body>
    <header>
        <h1>{{ pageTitle }}</h1>
        <!-- 导航等 -->
    </header>
    <main>

Then, when referencingheader.htmlon the page, we can pass it like thispageTitleVariable:

{% include "partial/header.html" with pageTitle="安企CMS文章详情" %}

<!-- 文章详情内容 -->

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

This is,partial/header.htmlwhen rendering,{{ pageTitle }}will be replaced with 'AnQi CMS article details'. You can also pass multiple variables at the same time, just separate them with spaces:

{% include "partial/header.html" with pageTitle="安企CMS文章详情" keywords="安企CMS, 模板, 详情" %}

Control variable scope:onlyKeyword

Using by defaultincludeThe template introduced by the tag will inherit all variables from the parent template. This is convenient in most cases, but sometimes we may only want the introduced template to use the variables we pass throughwithExplicitly passed variables, without inheriting any other variables from the parent template, to avoid potential variable conflicts or unnecessary complexity. At this point, you can useonlyKeyword to limit the scope of variables:

{% include "partial/header.html" with pageTitle="安企CMS文章详情" only %}

By addingonly,partial/header.htmltoonlyCan accesspageTitleThis variable, and cannot access other variables defined in the current page template. This helps maintain the modularity and predictability of the application.

Robustness considerations: Handling non-existent templates

In some cases, you may be unsure whetherincludethe template file exists, or whether a module is optional. If enforcedincludeAn non-existent file, the system may report an error. To avoid this situation, you can useif_existsKeyword:

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

Ifpartial/sidebar.htmlA file exists, it will be normally imported; if it does not exist, then theincludeThe statement will be ignored, page rendering will not be affected, and no error will be reported. This makes your template more robust when dealing with incomplete or optional modules.

Practice suggestions and **Practice

To make full use ofincludeThe advantages of tags, here are some practical suggestions:

  • Conventional directory structure:Suggest to place all reusable code snippets (such as headers, footers, navigation, sidebars, comment sections, breadcrumbs, etc.) in the current template theme directory.partial/In the subdirectory. This helps keep the organization of template files clear, convenient for search and management.
  • Fine-grained splitting:Do not be afraid to further break down large public modules into smaller, manageable pieces. For example, a complex header can be divided into multiple small modules such as “logo area”, “main navigation”, “user login status”, and so on.header.htmlinincludeThey.
  • Document your module:For complex or with specific parametersincludeModule, it is best to add comments inside the file to explain its functionality and required variables, which is convenient for other developers to understand and use.

includeThe label is an extremely useful and flexible feature in the development of Anqi CMS templates.It encourages modular design, significantly improves the reusability of templates, making the construction and maintenance of websites easier and more efficient.Master and make good use of this tool, your security CMS website template will have better maintainability and scalability.

Common Questions and Answers (FAQ)

  1. includeTags andextendsWhat is the difference between tags? includeTags are used to insert the content of a template file (usually a small piece, such as headers, footers, or navigation) into a specific location in another template, similar to code reuse.includeThe template can access variables from the parent template, and also pass its own variables.with. Andextendstags are used for template inheritance, defining a basic layout (parent template), which includes the use ofblockThe area defined by the label. Subtemplates can overwrite theseblockThe area to fill in specific content, but its overall structure and most of the content are inherited from the parent template.extendsIt must be the first tag within the sub-template, and the structure of the sub-template completely depends on the definition of the parent template.

  2. Can IincludeWhich variables are used in the included template?By default,includeThe template introduced will inherit all variables of the parent template.This means that any variable defined in the parent template can be used directly in the template that is included.withThe keyword explicitly indicates theincludeThe template passes new variables, which can be used directly in the included template. If the keyword is used at the same time, then theonlyusedincludeare only received throughwithThe variable passed, without inheriting any other variables from the parent template.

  3. includeIs the template path in the tag relative or absolute? How to specify? includeThe path in the label is relative to the root directory of the template theme where the current template file is located. For example, if your current template theme directory is/template/default/, and you want to include the file is/template/default/partial/header.htmltheninclude标签中应写为English"partial/header.html"。安企CMS的模板系统会根据你当前启用的模板主题来解析这些相对路径，因此无需指定完整的绝对路径。