In the daily operation of the website, efficiency and maintainability are one of the key factors determining the success or failure of the project.Especially in content management systems (CMS), how to efficiently manage the public elements of a website, such as header navigation, footer copyright information, etc., is a problem that every website operation expert will think about.Auto CMS (AutoCMS) provides us with an elegant solution with its flexible template engine and modular design concept.
This article will delve into how to efficiently reuse common header and footer codes in the AnQiCMS template through modular strategies, thereby enhancing the development efficiency of the website, reducing maintenance costs, and ensuring consistency of the website content.
AnQiCMS template engine's core advantages
AnQiCMS's template system is based on syntax similar to Django and Blade, which allows developers familiar with these template languages to get started quickly.Its core lies in the design philosophy of 'Everything is modularizable'.In AnQiCMS template conventions, we can clearly see the emphasis on common code and code snippets./templateEach template theme has its own directory underneath. For common headers and footers, the system recommends placing them inbash.htmlSuch files are for global references, while smaller code snippets like sidebars, breadcrumbs, and so on are recommended to be stored inpartial/The. This structured organization is the foundation for implementing template modular reuse.
The main tools for implementing the modular reuse of AnQiCMS templates are two powerful tags:includeandextendsThey each play different roles, work together, and can build a flexible and easy-to-maintain website structure.
include: Flexible insertion of code snippets.
includeThe label's responsibility is to insert an independent, reusable code snippet at any position in the current template.You can imagine it as a small brick in a set of Lego blocks, which can be added to any large structure at will without changing the shape of the entire structure.
In AnQiCMS, if you have a navigation menu, an advertisement slot, or a brief footer contact information module, these modules may appear on multiple pages of the website, but they do not define the overall layout skeleton of the page.includeit comes into play.
How to use:Assuming we have a public header navigation bar, we can create a namedpartial/header_nav.htmlThe file, which includes all the HTML code of the navigation bar and AnQiCMS tags (for example, using thenavListtag to dynamically generate navigation links).
<!-- partial/header_nav.html -->
<header class="main-header">
<div class="container">
<a href="/" class="logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
<nav class="main-nav">
<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-menu">
{% for subItem in item.NavList %}
<li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
</div>
</header>
In any page template that requires this navigation bar, you simply need to useincludeTags:
<!-- index.html 或 detail.html -->
<body>
{% include "partial/header_nav.html" %}
<main>
<!-- 页面主要内容 -->
</main>
<!-- 其他页面部分 -->
</body>
includeTags also support some advanced usages, such as, you can go throughwith关键字向被包含的模板传递局部变量，或者使用Englishif_exists来避免因文件不存在而引发的错误。English
extends：构建页面骨架的利器English
Withincludedifferent,extendsLabels are used to establish inheritance relationships between templates, defining the overall structure or "skeleton" of the page. Typically, we would create a label namedbase.htmlorlayout.htmlThe master template, which includes all the shared HTML structure, CSS, and JavaScript references, as well as some defined replaceable contentblockarea.
How to use:Firstly, we create a basic layout file, for examplebase.html:
<!-- base.html -->
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% tdk with name="Title" siteName=true %}{% endblock %}</title>
<meta name="keywords" content="{% block keywords %}{% tdk with name="Keywords" %}{% endblock %}">
<meta name="description" content="{% block description %}{% tdk with name="Description" %}{% endblock %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/main.css">
{% block head_extra %}{% endblock %} {# 允许子模板插入额外的头部内容 #}
</head>
<body>
{% block header %}
{# 默认头部内容，可以在这里include一个公共头部文件 #}
{% include "partial/header_nav.html" %}
{% endblock %}
<main id="content">
{% block content %}
{# 留给子模板填充主要内容 #}
<p>这里是默认内容。</p>
{% endblock %}
</main>
{% block footer %}
<footer class="main-footer">
<div class="container">
<p>© {% now "2006" %} {% system with name="SiteName" %}. All Rights Reserved.</p>
<p>{% system with name="SiteCopyright"|safe %}</p>
<nav class="footer-nav">
<ul>
{% navList navs with typeId=2 %} {# 假设typeId=2是底部导航 #}
{% for item in navs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
</div>
</footer>
{% endblock %}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block body_extra %}{% endblock %} {# 允许子模板插入额外的JS脚本 #}
</body>
</html>
Next, any other page template, such as the homepageindex.htmlor the article detail pagedetail.htmlcan inherit thisbase.html:
<!-- index.html -->
{% extends "base.html" %}
{% block title %}
安企CMS - 首页 - {% system with name="SiteName" %}
{% endblock %}
{% block content %}
<h1>欢迎来到安企CMS网站</h1>
<p>这里是首页的独有内容。</p>
{# 首页可能包含更多独特的模块，可以继续include其他partial文件 #}
{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/index.css">
{% endblock %}
It is worth noting that,{% extends %}The label must be the first label in the template and there must be no other content before it, including spaces or line breaks.Otherwise, the AnQiCMS template engine will not be able to correctly parse inheritance relationships.
Module-based reuse **Practice
CombineincludeandextendsWe can build a highly modular and maintainable AnQiCMS template:
- **Define the Master Layout**