In the daily operation of AnQiCMS, efficient content management not only reflects in the background data processing, but also relies on flexible front-end template design.For website operators, separating the common parts (such as navigation bars, footers, sidebars, etc.) into independent management and introducing them uniformly into each page is the key to improving work efficiency, maintaining website consistency, and simplifying maintenance.AnQiCMS provides a powerful and intuitive template introduction mechanism, making this process effortless.
AnQiCMS's template system is based on Go language, and it draws on the syntax of Django template engine, which is very friendly to template developers and operators. All template files use.htmlas suffixes, and stored uniformly in/templateThe directory. The style, JavaScript script, images, and other static resources required by the template are collected independently./public/static/Directory, clear separation helps with content organization and management.
Template structure and common part conventions
AnQiCMS Encourages modular design of templates.Under the root directory of the template, each template must have its own independent folder.
- Common code files (
bash.html)：Page header (header), page footer (footer) and other common parts that almost every page needs to inherit or reference, which are usually placed in a file namedbash.htmlThis file can be used as the basic skeleton of the website, and other pages can be expanded based on this. - directory of code snippets
partial/)：some smaller, reusable code snippets, such as sidebar content, breadcrumb navigation, ad spaces, etc., can be stored centrally,partial/The directory. Simply import when needed.
This structure ensures the clarity and maintainability of the template, making it simple and efficient to adjust common elements in large websites or multi-site management.
Core mechanism: Introduction and reuse of templates
AnQiCMS provides various tags to implement the introduction, inheritance, and code reuse of template files, the most commonly used includinginclude/extendsandmacro.
UseincludeIntroduce public code fragments with tags
includeTags are the most direct way of code snippet reuse.It allows you to insert the content of an HTML file into a specified location in another HTML file.This is very effective for introducing the common parts of the page, such as header navigation, footer copyright information, etc.
The basic usage is to place the path of the target template file within double quotes:
{% include "partial/header.html" %}
{% include "partial/footer.html" %}
Assuming yourpartialThere is one under the directory:header.htmlThe file, which includes the website's top navigation and Logo elements, can be included in any page template using the above method.
To enhance the robustness of the template, you can useif_existsparameters. When the template file introduced may not exist, usingif_existsit can prevent the page from reporting errors, and the system will directly ignore the introduction:
{% include "partial/header.html" if_exists %}
includethe label also supportswithParameters are passed to the template being included. This allows the included fragment to display different content based on the calling page context:
{% include "partial/header.html" with title="这是声明给header使用的title" keywords="这是声明给header使用的keywords" %}
Inheader.htmlIn the template, you can use{{title}}and{{keywords}}Get these values.
If you want the template to be able to access only the valueswithExplicitly passed variables, and not inherit all the variables of the current template, you can useonlyParameters:
{% include "partial/header.html" with title="这是声明给header使用的title" keywords="这是声明给header使用的keywords" only %}
UtilizeextendsTag Implementation of Template Inheritance
extendsTags are used to build a parent-child template structure, which is more suitable for defining the overall layout or "skeleton" of a page. A basic layout template (usually calledbase.html），You can define the general structure of the page, and use labels to mark the areas that can change. The sub-template inherits this basic template and selectively overrides theseblocktags to mark the areas that can change. The sub-template inherits this basic template and selectively overrides theseblockarea.
a typicalbase.html可能包含以下结构：
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
{% block title %}<title>{% tdk with name='Title' %}</title>{% endblock %}
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
{# 可以在这里引入公共的header片段 #}
{% include "partial/top_header.html" %}
</head>
<body>
<div id="wrapper">
<header>
{% block header_content %}
{# 默认的头部内容，子模板可以覆盖 #}
{% endblock %}
</header>
<nav>
{% block nav_content %}
{# 导航条内容 #}
{% endblock %}
</nav>
<main id="main-content">
{% block main_body_content %}
{# 页面主体内容 #}
<p>这里是默认的主体内容。</p>
{% endblock %}
</main>
<footer>
{% block footer_content %}
{# 可以在这里引入公共的footer片段 #}
{% include "partial/bottom_footer.html" %}
{% endblock %}
</footer>
</div>
</body>
</html>
在任何需要使用这个布局的页面（如)index.htmlorarchive/detail.html）中，您只需通过{% extends 'base.html' %}声明继承关系，然后重写相应的blockas follows:
{% extends 'base.html' %}
{% block title %}
<title>我的首页 - AnQiCMS</title>
{% endblock %}
{% block main_body_content %}
<h2>欢迎来到我的网站！</h2>
<p>这是首页的独有内容。</p>
{# 可以在这里引入其他片段 #}
{% include "partial/latest_articles.html" %}
{% endblock %}
It is worth noting that,extendsThe label must be the first label in the template file, otherwise template inheritance will not work properly.
macroThe label defines a reusable code block.
macro
For example, you can define a function to display list items of articles.macro:
{% macro archive_item(archive) %}
<li class="article-list-item">
<a href="{{ archive.Link }}" class="item-link">
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" class="item-thumbnail">
<h3 class="item-title">{{ archive.Title }}</h3>
<p class="item-description">{{ archive.Description }}</p>
</a>
</li>
{% endmacro %}
Then, in your page template, you can use it like this.macro:
{% import "macros/archive.macro" archive_item %} {# 假设宏定义在 macros/archive.macro 文件中 #}
<ul>
{% for item in archives %}
{{ archive_item(item) }}
{% endfor %}
</ul>
PassimportStatement, you can import one or more from an external file.macroMultiple macros can be separated by commas, or they can be usedasThe keyword is used to set an alias for macros.
Template organization and **practice
AnQiCMS provides two ways to organize template files: "folder organization mode" and "flattened file organization mode". Regardless of which mode is chosen, common elements such as headers, footers, sidebars, and so on are extracted and stored separately inpartial/The directory, all are good practices.
- Page header (
partial/header.htmlorbash.html): Includes<head>common in the<meta>tags,<link>area style references,<script>Script reference, as well as the navigation bar, Logo at the top of the page, etc. - Footer (
partial/footer.htmlorbash.html): Contains copyright information, filing number, friend links, statistical code, etc. - Sidebar (
partial/sidebar.html)Contains popular articles, latest comments, advertisements, and other dynamic content.
Through these mechanisms, website operators can easily maintain the public part of the website, ensuring consistency of brand image and user experience, while also greatly reducing the workload of template modification and update.
Summary
In AnQiCMS, the modular design and reuse mechanism of templates are powerful tools to enhance website operation efficiency. Through flexible application ofincludeintroducing code snippets,extendsBuild page layout, as well asmacroCreate reusable components, you can build websites with clear structure, easy maintenance, and rich features.This not only simplifies content publishing and page optimization work, but also provides a solid foundation for quickly responding to reader needs and website iteration.
Common Questions (FAQ)
Q1: I have modifiedheader.htmlthe file, but the website page has not been updated, what's wrong?
A1:AnQiCMS To improve performance, it will cache the template files.If you do not see the changes take effect immediately after modifying the template file, it is usually necessary to clear the system cache.You can manually clear the cache in the "Update Cache" feature of the AnQiCMS admin panel.Additionally, browser caching may also cause this issue, try to force refresh the page (Ctrl+F5 or Cmd+Shift+R) or clear the browser cache.
Q2: I want to introduce the same on different pagespartialFile, but I hope it shows different content, what should I do?
A2:You can useincludeTagswithparameter to pass to the includedpartialfile different variables. For example, if you have apartial/ads.htmlUsed to display ads, you can pass them when introducing.ad_typeVariable:{% include "partial/ads.html" with ad_type="homepage_banner" %}Inpartial/ads.htmlin, you can use them through.{% if ad_type == "homepage_banner" %}etc. to display the corresponding content.
Q3:extendsandincludeWhat is the difference, when should I use them?
A3: extends主要用于建立模板的继承关系，定义页面的整体“骨架”或“母版”。一个页面通常只能extends一个父模板，并在父模板定义的blockFill in your own content within the area. It is suitable for defining the overall layout, navigation, footer, and other common structures of the page.includeThen it is more focused on inserting small, independent, reusable code snippets into any position of any template. A template canincludeMultiple files, and no inheritance relationship. It is suitable for introducing local modules such as sidebar, comment section, advertisement, copyright information, etc. In short,extendsDefine the page structure,includeFill the page content blocks.