How to quickly build a shared sidebar, navigation, or other UI components using the `include` tag?
As an experienced website operations expert, I fully understand the importance of website efficiency and user experience, and these two are often inseparable from a set of excellent, easy-to-maintain template systems.AnQiCMS (AnQiCMS) with its concise and efficient characteristics, provides us with powerful content management capabilities.Today, let's delve deeply into a seemingly simple yet extremely practical feature -includeLabel, see how it helps us quickly build reusable, easy-to-maintain website UI components, thereby improving overall operational efficiency.
Anqi CMS Advanced: How to Use SkillfullyincludeTag builds efficient and reusable UI components
In the development and operation of modern websites, we often encounter such a scenario: the sidebar, top navigation, footer information, and other elements of the website appear on almost every page, but the content may be slightly different.If every page repeats the writing of this code, it is not only inefficient, but also a nightmare for subsequent maintenance.This is, Anqi CMS'sincludeTags are like a wizard, able to transform these repetitive tasks into magical modular management.
includeTags: The foundation for modular website construction
The Anqi CMS template engine syntax is similar to Django, it allows us to go throughincludeLabel, embed an independent code snippet (usually called a "fragment" or "component") into another template file. Imagine your website as a set of Lego blocks,includeLabels are the interfaces that connect these building blocks, allowing you to easily insert pre-made “sidebar blocks”, “navigation bar blocks”, and others into any page “base” you want to place.
The core benefit of doing this is:Efficiency, consistency, and maintainability.
- efficiency: Write once, use many times, saving a lot of time copying and pasting.
- Consistency: All references to the same
includeThe component of the file maintains consistent style and structure, avoiding a scattered visual sense. - maintainabilityWhen you need to modify a shared component, you only need to modify one file, and all the pages that reference it will automatically update, greatly reducing maintenance costs.
Set up your modular component workspace
In AnQi CMS, all template files are stored in/templateUnder the root directory. To better organize and manage these reusable components, we usually create a subdirectory namedpartial. For example, the structure of your template directory may look like this:
/template
└── your_theme_name/
├── config.json
├── index/
│ └── index.html
├── partial/
│ ├── header.html
│ ├── footer.html
│ └── sidebar.html
└── ... 其他模板文件
Here, header.html/footer.htmlandsidebar.htmlIt is what we are preparing to pass throughincludeComponents introduced by tags. Remember that all template files should end.htmlwith a suffix and use UTF-8 encoding to ensure normal display of content.
includeBasic Usage and Advanced Techniques of the Tag
Basic Introduction: Get Components Moving
UseincludeThe tag is very intuitive, you just need to specify the path to the template file you want to include:
{# 假设这是你的页面主体模板文件，如 index/index.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的安企CMS网站</title>
{# 引入 CSS 和 JS 等静态资源，这里使用系统标签 TemplateUrl 获取模板静态文件地址 #}
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
</head>
<body>
{# 引入顶部导航 #}
{% include "partial/header.html" %}
<main class="main-content">
<div class="left-col">
{# 引入侧边栏 #}
{% include "partial/sidebar.html" %}
</div>
<div class="right-col">
<h1>欢迎来到我的网站！</h1>
<p>这里是页面的主要内容区域。</p>
</div>
</main>
{# 引入页脚 #}
{% include "partial/footer.html" %}
</body>
</html>
In the above example,header.html/sidebar.htmlandfooter.htmlThe content will be embedded into the corresponding position of the main page template.
Pass data: Make the component smarter
Most of the time, our shared components need to display content dynamically according to the context of the current page. At this point,includelabel'swithParameters come into play. It allows you to pass custom variables to the template being imported:
{# 在页面主体模板中，向侧边栏传递一个标题 #}
{% include "partial/sidebar.html" with sidebar_title="最新文章推荐" %}
and in thepartial/sidebar.htmlIn it, you can use it like a regular variable:
{# partial/sidebar.html 文件内容 #}
<aside class="sidebar">
<h2>{{ sidebar_title }}</h2> {# 这里会显示“最新文章推荐” #}
<ul>
{% archiveList archives with type="list" limit="5" order="id desc" %}
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
</aside>
You can also pass multiple variables, even throughonlyParameter limitation only passes the specified variables to prevent unnecessary variable pollution from being introduced into the template namespace:
{% include "partial/header.html" with current_page="about" user_name="访客" only %}
Graceful degradation: Avoid page crash
If a certainincludeThe file may not exist, to avoid page errors, you can useif_existsparameter. In this way, if the file is missing, Anqicms will silently ignore it instead of interrupting the page rendering:
{# 如果 special_promo.html 存在则引入，否则忽略 #}
{% include "partial/special_promo.html" if_exists %}
Combine AnQi CMS tags to build rich components
AnQi CMS has built-in rich template tags, which can be combined withincludePerfectly combined to build powerful shared components.
Navigation bar (
partial/header.html): usually usednavListtags to get the website navigation data.`twig {# partial/header.html #}
<div class="logo"> <a href="/"><img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}" /></a> </div> <nav> <ul> {% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #} {% for item in navs %} <li class="{% if item.IsCurrent %}active{% endif %}"> <a href="{{ item.Link }}">{{ item.Title }}</a> {% if item.NavList %} {# 如果有二级导航 #} <ul class="submenu"> {% for sub_item in item.NavList %} <li><a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a></li> {% endfor %} </ul> {% endif %}