在安企CMS中管理网站内容时,你可能会发现很多页面都有相似的结构,比如顶部导航、底部版权信息、侧边栏或者元数据标签等。如果每次都为每个页面重复编写这些代码,不仅效率低下,而且一旦需要修改,就得逐个页面查找并更新,耗时又容易出错。幸运的是,安企CMS提供了一种非常优雅的解决方案——模板片段(Partial),它能帮助我们高效、统一地管理这些公共元素。
什么是模板片段(Partial)?
简单来说,模板片段就是可以被网站中其他模板文件重复引用的一小段代码。它们通常包含网站的公共结构或功能模块,例如一个独立的页头、一个通用的页脚、一个侧边栏模块,或者是一些页面通用的 <head> 区域代码。在安企CMS中,这些模板片段通常存放在当前主题模板目录下的 partial/ 文件夹中,以 .html 为后缀。
为什么使用模板片段?
采用模板片段来管理公共元素,能为你的网站运营带来多方面的好处:
- 保持网站统一性: 确保所有页面的页头、页脚等公共区域都保持一致的风格和内容,提升用户体验和品牌形象。
- 提高开发与维护效率: 将公共代码集中存放,一次编写,多处引用。当需要修改时,只需更新一个模板片段文件,所有引用它的页面都会自动更新,大大节省了时间和精力。
- 代码结构更清晰: 将大型页面分解成逻辑独立的模块,使模板文件更加简洁,易于阅读和理解,降低了后期维护的复杂度。
- 促进团队协作: 不同的开发者可以专注于各自的模块,互不干扰,提高团队的开发效率。
如何在安企CMS中使用模板片段?
在安企CMS中实现模板片段的统一显示非常直观,主要分为创建和引用两个步骤。
第一步:创建你的模板片段文件
首先,你需要将网站的公共元素代码从原来的页面中提取出来,创建独立的 .html 文件,并将其放置在你的主题目录下的 partial/ 文件夹内。
假设你的主题名为 default,那么你的模板片段目录结构可能如下:
your_anqicms_root/template/default/partial/
我们以创建页头(header)和页脚(footer)为例:
1. 创建 header.html:
这个文件可以包含你的网站Logo、主导航、搜索框等。
<!-- template/default/partial/header.html -->
<header class="main-header">
<div class="container">
<div class="site-branding">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</div>
<nav class="main-navigation">
<ul>
{% navList navs %}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{item.Title}}</a>
{% if item.NavList %}
<ul class="sub-menu">
{% for sub_item in item.NavList %}
<li {% if sub_item.IsCurrent %}class="active"{% endif %}><a href="{{ sub_item.Link }}">{{sub_item.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
<div class="contact-info">
联系我们: {% contact with name="Cellphone" %}
</div>
</div>
</header>
在上面的 header.html 片段中,我们使用了安企CMS内置的 system 标签来获取网站Logo和名称,以及 navList 标签来动态生成导航菜单,并用 contact 标签显示联系电话。
2. 创建 footer.html:
这个文件可以包含版权信息、备案号、友情链接等。
<!-- template/default/partial/footer.html -->
<footer class="main-footer">
<div class="container">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
<div class="friend-links">
友情链接:
{% linkList friendLinks %}
{% for link_item in friendLinks %}
<a href="{{link_item.Link}}" {% if link_item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{link_item.Title}}</a>
{% endfor %}
{% endlinkList %}
</div>
</div>
</footer>
在这里,我们同样利用了 system 标签来获取网站的版权和备案信息,以及 linkList 标签来展示友情链接。
第二步:在你的主模板中引用模板片段
创建好模板片段文件后,你就可以在网站的任何主模板文件中(如首页 index/index.html、文章详情页 archive/detail.html、单页面 page/detail.html 等)使用 {% include "partial/your_partial_file.html" %} 标签来引用它们了。
例如,在一个典型的页面结构中,你可以这样组织你的主模板文件:
<!-- template/default/index/index.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">
<!-- 引入页面TDK信息 -->
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<!-- 更多head内容 -->
</head>
<body>
<!-- 引入页头 -->
{% include "partial/header.html" %}
<main class="main-content">
<div class="container">
<!-- 这里是当前页面的具体内容,例如文章列表、产品展示、单页内容等 -->
<h1>欢迎来到安企CMS搭建的网站!</h1>
<p>这是首页的独有内容。</p>
{% archiveList archives with type="list" limit="5" %}
{% for item in archives %}
<article>
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p>{{ item.Description|truncatechars:100 }}</p>
</article>
{% endfor %}
{% endarchiveList %}
</div>
</main>
<!-- 引入页脚 -->
{% include "partial/footer.html" %}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
<!-- 更多脚本 -->
</body>
</html>
这样一来,无论你需要多少个页面,都可以重复使用 `