In AnQi CMS template, how to modularly reuse the common header and footer code?
In the daily operation of website, efficiency and maintainability are one of the key factors that determine the success or failure of the project.How to efficiently manage common website elements such as header navigation, footer copyright information, and so on in a content management system (CMS) is a problem that every website operations expert will think about.AnQiCMS (AnQiCMS) 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 (header) and footer (footer) code in the AnQiCMS template through modular strategies, thereby improving the development efficiency of the website, reducing maintenance costs, and ensuring consistency of the website content.
The core advantage of AnQiCMS template engine
AnQiCMS's template system is based on syntax similar to Django and Blade, which allows developers familiar with these template languages to quickly get started.The core lies in the design philosophy that 'everything can be modularized'.In AnQiCMS template conventions, we can clearly see the emphasis on common code and code snippets.The root directory of the template file is/templateEach template theme has an independent directory under it. For common headers and footers, the system recommends placing them inbash.htmlThis file is for global reference, while smaller code snippets like sidebars, breadcrumbs, and so on are recommended to be stored inpartial/In the catalog. This structured organization method is the foundation for the implementation of template modular reuse.
The main tools for implementing the modular reuse of AnQiCMS templates are two powerful tags:includeandextends. They play different roles, work together, and can build a flexible and easy-to-maintain website structure.
include: Flexible insertion of code snippets.
includeThe role of the tag is to insert an independent, reusable code snippet into any position in the current template.You can imagine it as a small brick in a Lego set, which can be freely added to any large structure without changing the shape of the entire structure.
In AnQiCMS, if you have a navigation menu, an advertisement space, or a short footer contact information module, these modules may appear on multiple pages of the website, but they do not define the overall page layout structure. At this point,includeit comes in handy.
How to use:Assuming we have a public header navigation bar, we can create a file namedpartial/header_nav.htmlwhich contains all the HTML code and AnQiCMS tags of the navigation bar (for example, usingnavListLabels 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 needs this navigation bar, you simply useincludeTags:
<!-- index.html 或 detail.html -->
<body>
{% include "partial/header_nav.html" %}
<main>
<!-- 页面主要内容 -->
</main>
<!-- 其他页面部分 -->
</body>
includeThe tag also supports some advanced usage, such as, you can throughwithKeyword to pass local variables to the included template or useif_existsTo avoid errors caused by the file not existing
extends: A tool for building the page skeleton
withincludedifferent,extendsTags are used to establish inheritance relationships between templates, defining the overall structure or 'skeleton' of a page. Usually, we would create a namedbase.htmlorlayout.htmlThe master template that includes all shared HTML structure, CSS, JavaScript references, and some content that can be replacedblockarea.
How to use:First, 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 templates, such as the homepageindex.htmlOr 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 should be noted that,{% extends %}The label must be the first label in the template, and there must be no other content before it, including spaces or new lines.Otherwise, the AnQiCMS template engine will not be able to correctly parse the inheritance relationship.
The practice of modular reuse**
CombineincludeandextendsWe can build a highly modular and maintainable AnQiCMS template:
- **Define the Master Layout (Master Layout)