As an operator who is deeply familiar with AnQiCMS (AnQiCMS), I know that content quality and website efficiency are the core factors in attracting and retaining users.In daily operations, we must not only pay attention to the content itself, but also ensure the efficiency and maintainability of the website structure.The modular splitting of templates is the key technology to achieve this goal.
AnQi CMS provides a powerful and flexible template mechanism that allows us to easily break down website templates into smaller, more manageable reusable parts, such as headers, footers, sidebars, etc.This method not only greatly improves development efficiency, ensures the consistency of the overall style of the website, but also simplifies the complexity of later maintenance and updates.
Anqi CMS template modularization basis
The AnQi CMS template system is based on a syntax similar to the Django template engine, with.htmlAs a template file suffix, and store it uniformly in/templatein the directory. Each template passes throughconfig.jsonFile defines its properties. This design philosophy encourages us to abstract out commonly used page elements into independent 'code snippets' or 'skeletons' that can be referenced or inherited as needed.
The core idea is to avoid redundant work, and to make common and frequently appearing elements on the website, such as the navigation bar, the footer copyright information of the website, and the article sidebar, independent files.This way, once it is necessary to modify these common elements, we only need to change one file, and all the pages that reference it will be synchronized updated, greatly improving operational efficiency and the unity of the website.
Splitting reusable parts strategy and practice
To implement modularization in Anqi CMS, it mainly depends onextends/includeandmacrothese three tags, as well as following a specific directory structure.
Build the website skeleton: inheritance of header and footer (bash.htmlandextendsLabel)
For the most stable and least variable public part of the website, such as the entire page's HTML structure, the main CSS and JavaScript references, as well as the header and footer, we usually define it in a basic template, and Safe CMS recommends using itbash.htmlThe file serves as this 'skeleton' template.
bash.htmlThe file will include the overall layout of the page and is used to{% block 名称 %}{% endblock %}define areas that can be rewritten or filled by child templates. For example, we can set up ablock titleUsed for page title, oneblock contentUsed for main content, as wellblock scriptsUsed for JS code on specific pages.
{# /template/您的模板目录/bash.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% system with name="SiteName" %}{% endblock %}</title>
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{% block head_scripts %}{% endblock %}
</head>
<body>
<header>
{# 引入页头公共部分 #}
{% include "partial/header.html" %}
</header>
<main>
{% block content %}
{# 默认内容，可被子模板覆盖 #}
{% endblock %}
</main>
<footer>
{# 引入页脚公共部分 #}
{% include "partial/footer.html" %}
</footer>
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block body_scripts %}{% endblock %}
</body>
</html>
Subsequently, all specific page templates on the website (such as the home pageindex/index.html, article detail pagearchive/detail.htmland so on) can be accessed through{% extends 'bash.html' %}Label to inherit this basic skeleton. In the child template, we just need to rewrite the correspondingblockarea, filling the page-specific content. The unmodifiedblockwill be automatically inheritedbash.htmlWith the default content inside.
{# /template/您的模板目录/index/index.html #}
{% extends 'bash.html' %}
{% block title %}首页 - {% system with name="SiteName" %}{% endblock %}
{% block content %}
<section class="hero-section">
<h1>欢迎来到安企CMS</h1>
<p>这是网站的首页内容区域。</p>
</section>
{# 首页特有的内容 #}
{% endblock %}
{% block body_scripts %}
<script>
console.log("这是首页特有的JS代码");
</script>
{% endblock %}
refined component: code snippet reference (partial/Table of contents andincludeLabel)
For some smaller granularity, which may be used in multipleblockor different sub-templates, Anqi CMS recommends storing them inpartial/Under the directory. For example, sidebar navigation, breadcrumb navigation, ad positions, and rendering logic for article list items, etc.
These code snippets can be accessed through{% include "partial/文件名.html" %}tags can be referenced at any required location.includeThe strength of the tag lies in the fact that it can not only simply insert file content, but also pass variables to the included template through parameters, even usingwithparameters to pass variables to the included template, and even useonlyLimit the scope of variables to ensure the independence of code snippets.
For example, a universal page headerpartial/header.htmlCan include the website logo and main navigation:
{# /template/您的模板目录/partial/header.html #}
<div class="site-header">
<div class="logo">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</div>
<nav class="main-nav">
{% include "partial/main_nav.html" %}
</nav>
</div>
The main navigationpartial/main_nav.htmlIt can be like this:
{# /template/您的模板目录/partial/main_nav.html #}
<ul>
{% navList navs %}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="sub-nav">
{%- for sub_item in item.NavList %}
<li class="{% if sub_item.IsCurrent %}active{% endif %}">
<a href="{{ sub_item.Link }}">{{sub_item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
In this way, we can further encapsulate complex navigation logic. If a certainincludefile may not exist, you can useif_existsparameter to avoid errors in template rendering.
Advanced reuse: Define generic rendering logic in macro function (macroLabel)
When we need to reuse a segment of code with specific logic and the code needs to accept parameters to dynamically generate content,macroThe label comes into play. Macro functions are similar to functions in programming languages, where input parameters can be defined and different HTML structures can be rendered based on the parameters.They are very suitable for rendering individual article items, product cards, comment boxes, and other UI components that appear repeatedly in article lists.
We can define a macro function in an independent.htmlfile, for examplepartial/macros.html:
{# /template/您的模板目录/partial/macros.html #}
{% macro render_article_card(article) %}
<div class="article-card">
<a href="{{ article.Link }}">
{% if article.Thumb %}
<img src="{{ article.Thumb }}" alt="{{ article.Title }}">
{% endif %}
<h3>{{ article.Title }}</h3>
<p>{{ article.Description|truncatechars:100 }}</p>
<small>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</small>
</a>
</div>
{% endmacro %}
{% macro render_product_card(product) %}
<div class="product-card">
<a href="{{ product.Link }}">
{% if product.Logo %}
<img src="{{ product.Logo }}" alt="{{ product.Title }}">
{% endif %}
<h4>{{ product.Title }}</h4>
<p class="price">¥ {{ product.Price }}</p>
</a>
</div>
{% endmacro %}
Then, in other templates, throughimporttags to introduce these macro functions and use them as if calling ordinary functions:
{# /template/您的模板目录/index/index.html #}
{% extends 'bash.html' %}
{% import "partial/macros.html" as my_macros %} {# 引入宏文件并设置别名 #}
{% block content %}
<h1>最新文章</h1>
<div class="article-list">
{% archiveList archives with type="list" limit="4" %}
{% for item in archives %}
{{ my_macros.render_article_card(item) }} {# 调用宏函数渲染文章卡片 #}
{% empty %}
<p>暂无文章。</p>
{% endfor %}
{% endarchiveList %}
</div>
<h1>热门产品</h1>
<div class="product-list">
{% archiveList products with moduleId="2" type="list" limit="4" %}
{% for item in products %}
{{ my_macros.render_product_card(item) }} {# 调用宏函数渲染产品卡片 #}
{% empty %}
<p>暂无产品。</p>
{% endfor %}
{% endarchiveList %}
</div>
{% endblock %}
Actual operation and precautions
When splitting templates, there are several points to pay special attention to:
- Consistent syntax: Anqi CMS uses a template syntax similar to Django, and variables are enclosed in double curly braces
{{变量}}Control structures (such as conditional judgments, loops) use single curly braces and percentages{% 标签 %}. - Static Resource ManagementStatic resources such as styles, JS scripts, and images referenced in templates should be stored in one place
/public/static/In the directory and through{% system with name="TemplateUrl" %}Tag dynamically retrieves the static resource path of the template, ensuring correct reference in multi-template environments. - Unified EncodingAll template files must use UTF-8 encoding to avoid Chinese character garbling issues.
- Divide from large to small: Suggest starting from the overall layout(
extends) and gradually refining to the page block(include), finally to the parameterizable independent UI component(macro) - Variable passing and scope managementUnderstanding
includeandmacroThe difference in variable passing and scope between tags, choose the reasonable one to use.includeIt will inherit all variables of the current template, whereasmacroit will only use the explicit parameters passed to it.
By effectively splitting the template, the website operator of Anqi CMS can build a website with clear structure, easy maintenance, and efficient response to changes.This not only improves the development and management experience of the website's front-end, but also indirectly provides a solid technical foundation for the rapid release and optimization of content.
Frequently Asked Questions (FAQ)
1. Why is it so important to modularize template splitting in AnQiCMS?
Template modular splitting is crucial for improving website operation efficiency.It ensures high consistency in both visual and functional aspects of the website, reduces duplicate code, thereby significantly reducing the development and maintenance costs of templates.When you need to modify a public element, you only need to operate on one file, and all pages referencing the element will be automatically updated, avoiding tedious manual modifications and effectively reducing the possibility of errors.
2. How should we decide which parts should be used when splitting templatesinclude, and which should be used?extendsWhat are some suitable usesmacro?
Generally,extendsUsed to define the basic structure and common layout of the entire page (such asbash.html), it defines what can be overridden by child templatesblockarea.includeIt is more suitable to introduce smaller, independent, reusable static or semi-static code snippets (such as headers, footers, sidebar navigation) in the page. Andmacroit is applicable to