In website operation, building an efficient and easy-to-maintain website is the key to success.AutoCMS (AutoCMS) knows this well, it provides a flexible template mechanism, allowing us to easily embed reusable display components in pages, such as sidebars and breadcrumb navigation.This modular approach not only improves development efficiency, but also ensures the consistency of the overall style of the website and future maintainability.
This article will delve into how to effectively create and embed these important reusable components using the template system in AnQiCMS.
Understand the template component modular concept of AnQiCMS
AnQiCMS's template system adopts syntax similar to Django template engine, which is very friendly for developers familiar with MVC or front-end frameworks.One of its core concepts is the use of 'code snippets' (partial), which allows us to extract independent, reusable parts from the page and manage them separately.
Core Mechanism:partial/Directories andincludetags
According to the template conventions of AnQiCMS, all reusable code snippets are recommended to be stored in the template root directory.partial/The catalog. For example, a sidebar file can be namedpartial/sidebar.html, a footer file can be namedpartial/footer.html.
When we need to include these code snippets in the page, we can useincludeLabel. This label can embed the content of the specified template file into the current template, greatly reducing code redundancy.
Create your first reusable component: Take the sidebar as an example
The sidebar is a common reusable component in a website, usually used to display the latest articles, popular categories, contact information, and other information.We take the sidebar that includes "latest articles" and "website contact information" as an example.
1. Plan sidebar content
A typical sidebar may need:
- List of latest published articles.
- Contact information of the website, such as phone, email.
- (Optional) List of popular categories.
2. Create Sidebar File
Create a file in your template directorypartialfolder (if it does not exist), and then create a new file, for example namedsidebar.html.
3. Write Sidebar Code
Insidebar.htmlIn it, we can use various template tags provided by AnQiCMS to obtain the required data and display it:
<aside class="sidebar">
<div class="widget recent-posts">
<h3>最新文章</h3>
<ul>
{% archiveList archives with type="list" moduleId="1" limit="5" %}
{% for item in archives %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% empty %}
<li>暂无最新文章</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
<div class="widget contact-info">
<h3>联系我们</h3>
<p>电话：{% contact with name="Cellphone" %}</p>
<p>邮箱：{% contact with name="Email" %}</p>
<p>地址：{% contact with name="Address" %}</p>
</div>
{# 更多组件，例如热门分类 #}
<div class="widget categories">
<h3>热门分类</h3>
<ul>
{% categoryList categories with moduleId="1" parentId="0" limit="5" %}
{% for item in categories %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% empty %}
<li>暂无分类</li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
</aside>
In this code:
archiveListtags are used to obtain the article model (moduleId="1"）下最新的5篇文章。contact标签用于直接获取后台设置的联系方式信息。categoryListtags are used to obtain the article model (moduleId="1"）下的顶级分类列表。
4. 在页面中嵌入侧边栏
Now, you can display this sidebar in any page template where it is needed (for exampleindex/index.html/archive/detail.html, or more commonly in your global layout filebase.html), by using theincludetag to embed it:
{# 假设这是你的基础布局文件 base.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
{# ... 头部内容 ... #}
</head>
<body>
<header>{# ... 网站头部 ... #}</header>
<div class="main-content">
<div class="left-column">
{# 这里嵌入侧边栏 #}
{% include "partial/sidebar.html" %}
</div>
<div class="right-column">
{% block content %}
{# 页面主要内容将在这里显示 #}
{% endblock %}
</div>
</div>
<footer>{# ... 网站底部 ... #}</footer>
</body>
</html>
By this method, the sidebar component has been successfully embedded and can be reused across multiple pages, any modifications tosidebar.htmlwill be immediately reflected on all pages that reference it.
Easily add breadcrumb navigation
Breadcrumbs navigation (Breadcrumb) is another important reusable component in the website, which can clearly show the current position of the user, enhancing the usability of the website. AnQiCMS provides a specialbreadcrumbLabel to simplify this process.
1. Usebreadcrumbtags
breadcrumbThe usage of labels is very intuitive, usually it will automatically generate navigation paths based on the URL structure and content of the current page (such as categories, article titles).
<nav class="breadcrumb-nav">
{% breadcrumb crumbs with index="首页" title=true %}
<ul>
{% for item in crumbs %}
<li><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
2. Parameter description
index="首页"：Used to set the starting point name of the breadcrumb navigation, the default is also 'Home'.title=trueWhen on the article detail page, it determines whether to use the article title as the last item in the breadcrumb. Set totrueThe article title will be displayed, set tofalseauto. If set to other specific values (such astitle="文章详情"), it will display the value.
3. Embedding location
Breadcrumbs navigation is usually placed below the header of the website and above the main content area, so that users can see their location at a glance. For example, in yourbase.htmllayout file, you can<header>after,{% block content %}之前嵌入：
{# 假设这是你的基础布局文件 base.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
{# ... 头部内容 ... #}
</head>
<body>
<header>{# ... 网站头部 ... #}</header>
<div class="main-content">
{# 面包屑导航通常放在这里 #}
<nav class="breadcrumb-nav">
{% breadcrumb crumbs with index="首页" title=true %}
<ul>
{% for item in crumbs %}
<li><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
<div class="page-content">
{% block content %}
{# 页面主要内容 #}
{% endblock %}
</div>
</div>
<footer>{# ... 网站底部 ... #}</footer>
</body>
</html>
Advanced Usage and Precautions
1. 传递上下文数据给组件
有时，你希望一个可重用组件能够根据它被嵌入的页面，显示不同的内容。这时，可以通过includeTagswithParameters