How to reuse header, footer, and other common modules in AnQiCMS templates to display content?
During the process of website construction, header, footer, navigation bar, and other common modules are almost indispensable for each page.If writing this code manually every time is not only inefficient but also difficult to ensure the consistency of the overall website style, and the subsequent maintenance work will become particularly繁琐.AnQiCMS as an efficient content management system, its powerful template engine provides a variety of flexible ways to reuse these common modules, thereby greatly enhancing the efficiency of template development and the maintainability of the website.
The way to reuse common modules in AnQiCMS templates
Firstly, understanding the basic structure of AnQiCMS templates is crucial. All template files are usually stored in/templatethe directory, and.htmlAs a file extension. Its template syntax is based on the Django template engine, variables are usually enclosed in double curly braces{{变量}}References, while conditional judgments, loop controls, and other logic tags are used{% 标签 %}and{% end标签 %}The form of. Static resources such as styles, scripts, and images are stored in one place./public/static/In the catalog.
In AnQiCMS, there are mainly three powerful and flexible mechanisms to implement the reuse of common modules: includetags,extendsLabel (template inheritance) andmacro.
1. UseincludeCode snippet embedded in tag
includeTags are the most direct and commonly used module reuse method, allowing you to insert an independent HTML code snippet into any template file where it is needed. Imagine that the header and footer content of a website is almost the same on every page, and you can save them separately aspartial/header.htmlandpartial/footer.htmlSuch an independent file.
For example, create a folder named under your template theme directorypartialfolder, and createheader.htmlandfooter.html:
partial/header.htmlExample:
<header>
<div class="logo">
<a href="/">{% system with name="SiteLogo" %}<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" /></a>
</div>
<nav>
<ul>
{% navList navs %}
{% for item in navs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
</header>
partial/footer.htmlExample:
<footer>
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</footer>
Then in your main page template (such asindex.htmlorarchive/detail.htmlIn them, simply refer to these files:
{% include "partial/header.html" %}
<main>
<!-- 页面主体内容 -->
</main>
{% include "partial/footer.html" %}
The advantage of this method lies in the fact that when you need to modify the header or footer, you only need to edit one file, and all pages that refer to this file will be automatically updated. Moreover,includeThe tag also supports passing throughwithKeyword can pass variables, even usingonlyKeyword limits the scope of variables, making the referenced module more flexible. For example,{% include "partial/sidebar.html" with user_name="访客" only %}You can pass specific user information to the sidebar. You can also use to enhance the robustness of the template.if_existsEnsure that even if the referenced template file does not exist, an error will not be raised, but will be gracefully ignored.
2. UseextendsTags for template inheritance
extendsTags provide a more powerful mechanism for reuse, allowing you to define a basic "skeleton" template (usually namedbase.htmlThis includes the basic structure shared by all pages of the website, such as the HTML document type, the head section, and the main layout container. The skeleton template is through{% block 名称 %}and{% endblock %}Define the areas that can be rewritten or filled by the child template.
base.htmlExample of a skeleton template:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block page_title %}<title>{% tdk with name="Title" siteName=true %}</title>{% endblock %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{% block page_meta %}{% tdk with name="Keywords" %}{% tdk with name="Description" %}{% endblock %}
</head>
<body>
{% include "partial/header.html" %} {# 依然可以include公共部分 #}
<div class="container">
{% block main_content %}
<!-- 默认内容，子模板可重写 -->
{% endblock %}
</div>
{% include "partial/footer.html" %} {# 依然可以include公共部分 #}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block page_scripts %}{% endblock %}
</body>
</html>
Next, your specific page template (such asindex.html) can inherit thisbase.html, and only focus on the unique content of itself.
index.htmlSubtemplate example:
{% extends "base.html" %}
{% block page_title %}<title>首页 - {% system with name="SiteName" %}</title>{% endblock %}
{% block main_content %}
<section class="hero-section">
<h1>欢迎来到AnQiCMS</h1>
<p>您的内容管理专家</p>
</section>
<section class="latest-articles">
<h2>最新文章</h2>
<ul>
{% archiveList archives with type="list" limit="5" %}
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
{% endblock %}
{% block page_scripts %}
<script>
console.log("这是首页特有的脚本。");
</script>
{% endblock %}
UseextendsInheritance time,{% extends ... %}This must be the first tag in the sub-template. This method ensures that all pages of the website follow the same basic layout, while the specific content of each page is in their respectiveblockDefined in, which greatly improves the consistency and development efficiency of design.
3. With the help ofmacroDefine reusable functional components
macroTags provide a function similar to that of a function, which you can use to define a reusable code block with parameters. When you have multiple similar but parameterized HTML components,macroIt will be very useful, for example, to generate buttons of different colors or links, unified style product cards, etc.
You can define macro functions in a separate auxiliary file (such asmacro/components.html) in:
macro/components.htmlExample:
{% macro render_button(text, url, css_class="btn-primary") %}
<a href="{{ url }}" class="btn {{ css_class }}">{{ text }}</a>
{% endmacro %}
{% macro render_product_card(product) %}
<div class="product-card">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}">
<h3><a href="{{ product.Link }}">{{ product.Title }}</a></h3>
<p class="price">¥{{ product.Price }}</p>
{{ render_button("立即购买", product.Link, "btn-success") }}
</div>
{% endmacro %}
Then in your main template, go throughimportTag and use these macros:
{% import "macro/components.html" as comps %}
<section class="call-to-action">
<h2>了解更多我们的服务</h2>
{{ comps.render_button("点击这里", "/services", "btn-info") }}
</section>
<section class="featured-products">
<h2>热门产品</h2>
<div class="product-grid">
{% archiveList products with moduleId="2" limit="3" %}
{% for product in products %}
{{ comps.render_product_card(product) }}
{% endfor %}
{% endarchiveList %}
</div>
</section>
macroThe strength lies in its ability to allow the creation of highly abstract and parameterizable UI components, reducing code repetition, and making templates more concise and logical.
###