In website content operation, maintaining a unified page style, enhancing user experience, and improving maintenance efficiency is crucial.Imagine if your website has hundreds or thousands of pages, and you need to manually modify the header, footer, or sidebar on each page. That would be a huge project.It is fortunate that AnQiCMS provides a powerful and flexible template mechanism, which can help you easily refer to and manage common code snippets, ensuring the consistency of the website display.

AnQiCMS's template system has adopted the syntax of Django template engine, which makes it easy to learn and powerful. It provides.htmlThe template file organizes the page structure and stores static resources such as styles, scripts, and images in a unified manner./public/static/Under the directory, it makes management neat and tidy. In actual operation, you will find that AnQiCMS mainly achieves the reference and unified display of common code segments through two core methods:includeTags andextendsLabel (template inheritance).

PassincludeEmbeddable reusable code snippets

includeThe label is a very practical feature in the AnQiCMS template system, which allows you to extract independent, small code snippets (such as page headers, footers, navigation menus, sidebars, advertising positions, or copyright information) into separate files, and then easily include them on any page where they are needed.The benefits of doing this are obvious: when you need to modify these common elements, you only need to edit the corresponding fragment file once, and all pages that reference it will be updated synchronously, greatly improving maintenance efficiency.

For example, you can create a file namedpartial/header.htmlto store the unified page header for all pages, and then create apartial/footer.htmlStore the footer. Just use it simply in various page templates of your website (such asindex.html/{模型table}/detail.htmletc.) by using{% include "partial/header.html" %}and{% include "partial/footer.html" %}to introduce it.

To further enhance flexibility and robustness,includeThe label also provides several useful parameters:

  • if_exists:This is a very considerate feature. If you are not sure whether a referenced template file is definitely existing,includeLabel added afterif_exists.So, even if the file does not exist, the system will not report an error, but will silently ignore it.This is particularly useful during development or when you refer to some optional, non-core fragments.
  • withandonly:Sometimes, you may want to pass some specific variables to the imported segment.withParameters allow you to define new variables and pass them to the segment when importing. For example,{% include "partial/header.html" with title="我的网站标题" %}It willtitleVariable passed toheader.htmlIf you only want the imported segment to usewiththe variables passed, and not inherit all variables of the current template, you canwithafter addingonlyparameter, such as{% include "partial/header.html" with title="我的网站标题" only %}.

AnQiCMS's template conventions specifically mentionpartial/The catalog is used to store such code snippets, and likebash.htmlsuch files are recommended for storing headers, footers, and other parts that are inherited by each page.

PassextendsLabel builds a unified page skeleton (template inheritance)

In addition to embedding independent code snippets, AnQiCMS also supports a more macroscopic template reuse mechanism - template inheritance, which is mainly throughextendsandblockLabel coordination for implementation. Template inheritance is like designing a "master page" or "skeleton" for your website, where you can define a base template (for examplebase.html），where it includes the overall layout structure of the website (such as<head>parts, header, footer, sidebar, etc.), and usesblocktags to define areas that can be overridden by sub-templates.

For example, you can write it like this in the base.htmlto define a namedcontentofblockarea:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}默认标题{% endblock %}</title>
    <!-- 这里引入公共CSS和JS -->
    {% include "partial/head_css.html" %}
</head>
<body>
    {% include "partial/header.html" %} {# 引入公共页头 #}
    <main>
        <aside>{% include "partial/sidebar.html" %}</aside> {# 引入公共侧边栏 #}
        <section>{% block content %}{% endblock %}</section> {# 定义内容区域 #}
    </main>
    {% include "partial/footer.html" %} {# 引入公共页脚 #}
    {% include "partial/foot_js.html" %}
</body>
</html>

Then, in your specific page template (such asarticle/detail.html) just use{% extends 'base.html' %}inherit this skeleton, and useblocktags to cover the同名 regions defined in the parent template.

{% extends 'base.html' %}

{% block title %}文章详情 - {{archive.Title}}{% endblock %}

{% block content %}
    <h1>{{archive.Title}}</h1>
    <p>{{archive.Content|safe}}</p>
    <!-- 更多文章内容 -->
{% endblock %}

In this way, all inheritedbase.htmlThe pages will all have the same header, footer, and sidebar, while the core content of the page is independently filled by each template. It should be noted that,{% extends %}标签必须是您模板文件中的第一个标签，并且每个block标签都需要成对出现。

灵活的辅助标签

Exceptincludeandextends，AnQiCMS 还提供了macroLabels, it allows you to create small, parameterizable code logic snippets, similar to functions in programming languages.This is very useful for reusing complex HTML structures with specific input parameters, further improving the maintainability and reusability of templates.

In summary, AnQiCMSincludeTags andextendsLabels provide a comprehensive template reuse mechanism.Whether it is embedding small public segments or building the overall layout of the website, these features can help you achieve a highly unified display of the page, enhancing the overall professionalism and operational efficiency of the website.Use these tools flexibly, and your website content will be more consistent, easier to manage, and more likely to provide visitors with a smooth browsing experience.

Common Questions (FAQ)

Q1: Can I make a specific page not use the unified header or footer of the website?

Of course you can. If you have usedextendsLabel for template inheritance, child templates can redefine the page header or footer locations defined in the parent template.blockCover it with an area to display different content, or leave it blank to not display. If the header or footer is throughincludeTags introduced, you can create a different template for this specific page, or modify the template of this page.includeReplace the tag with the desired content.

Q2:includeandextendsWhat are the specific differences between these two template reuse methods, and how should I choose?

In simple terms,includeSuitable for "insert" or "embed" relatively independent, functional code snippets, such as sidebars, advertisement slots, copyright information, etc. These snippets are usually part of the page.extendsIt is used to “inherit” the overall structure and layout of a page, defining the page's major framework, and throughblockLabel the area for content to be filled in. When you want all pages to have a unified overall structure, chooseextendsWhen you want to reuse small, independent UI components across different pages, chooseinclude. Both are often used together, for example inextendsinheritedbase.html中，通过includeintroducing common page headers and footers.

Q3: If the public code snippet file I reference is accidentally deleted, will the website report an error? How can I avoid this situation?

If you are usingincludetags, simply write them as{% include "path/to/fragment.html" %}Then whenfragment.htmlWhen the file does not exist, the system will throw an error, causing the page to fail to display normally. To avoid this situation, you can use{% include "path/to/fragment.html" if_exists %}.if_existsAfter the parameter, even if the file does not exist, the system will silently ignore this import, and the page will continue to render without an error. This is very useful for importing optional fragments that are not core.