In website operation, building an efficient and easy-to-maintain website is the key to success.AnQiCMS (AnQiCMS) is well aware of this, providing a flexible template mechanism that allows us to easily embed reusable display components in the page, 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 the maintainability in the future.
This article will delve into how to effectively create and embed these important reusable components using the template system in AnQiCMS.
Understand the template componentization concept of AnQiCMS
AnQiCMS's template system adopts a syntax similar to the 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/Directory andincludeTag
According to the template conventions of AnQiCMS, all reusable code snippets are recommended to be stored in the root directory of the templatepartial/In the catalog. For example, a sidebar file can be namedpartial/sidebar.html, a footer file can be namedpartial/footer.html.
We can use these code snippets when we need to include them in the pageincludeThe tag 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 on a website, usually used to display the latest articles, popular categories, contact information, and other information.We take the sidebar containing 'Latest Articles' and 'Website Contact Information' as an example.
1. Plan the sidebar content
A typical sidebar may need:
- List of the latest published articles.
- Contact information of the website, such as phone, email.
- (Optional) List of popular categories.
2. Create Sidebar File
Create a folder in your template directory, if it doesn't exist, and then create a new file, for example namedpartialFolder (if not existing), and then create a new file, for example namedsidebar.html.
3. Write sidebar code
Insidebar.htmlIn this section, we can use various template tags provided by AnQiCMS to retrieve and display the required data:
<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 get the article model (moduleId="1"The latest 5 articles under.contactTags are used to directly obtain contact information set in the background.categoryListtags are used to get the article model (moduleId="1"The top-level category list under.
4. Embed the sidebar on the page.
Now, you can display this sidebar in any page template that needs it (for exampleindex/index.html/archive/detail.htmlor more commonly in your global layout filebase.html), use the includetag 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>
In this way, the sidebar component is successfully embedded and can be reused on multiple pages, any modifications made tosidebar.htmlwill be immediately reflected on all pages that refer to it.
Easily add breadcrumb navigation
The Breadcrumb navigation is another important reusable component in the website, which can clearly show the user's current location and improve the usability of the website. AnQiCMS provides specialbreadcrumbLabels to simplify this process.
1. UsebreadcrumbTag
breadcrumbThe usage of labels is very intuitive, usually it automatically generates navigation paths based on the current page's URL structure and content (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, also defaults to 'Home'.title=trueWhen on the article detail page, it determines whether the article title should be the last item in the breadcrumb. Set totrueIt will display the article title, set tofalseIt will not be displayed. If set to other specific values (such astitle="文章详情"), the value will be displayed.
3. Embedding location
Breadcrumb navigation is usually placed below the website header and above the main content area so that users can see their position at a glance. For example, in yourbase.htmllayout file, you can<header>after,{% block content %}Before embedding:
{# 假设这是你的基础布局文件 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. Pass context data to the component
Sometimes, you may want a reusable component to display different content based on the page it is embedded in. In this case, you can useincludelabel'swithParameter