如何通过模板片段(partial)统一显示网站的公共元素,如页头页脚?

在安企CMS中管理网站内容时,你可能会发现很多页面都有相似的结构,比如顶部导航、底部版权信息、侧边栏或者元数据标签等。如果每次都为每个页面重复编写这些代码,不仅效率低下,而且一旦需要修改,就得逐个页面查找并更新,耗时又容易出错。幸运的是,安企CMS提供了一种非常优雅的解决方案——模板片段(Partial),它能帮助我们高效、统一地管理这些公共元素。

什么是模板片段(Partial)?

简单来说,模板片段就是可以被网站中其他模板文件重复引用的一小段代码。它们通常包含网站的公共结构或功能模块,例如一个独立的页头、一个通用的页脚、一个侧边栏模块,或者是一些页面通用的 <head> 区域代码。在安企CMS中,这些模板片段通常存放在当前主题模板目录下的 partial/ 文件夹中,以 .html 为后缀。

为什么使用模板片段?

采用模板片段来管理公共元素,能为你的网站运营带来多方面的好处:

  1. 保持网站统一性: 确保所有页面的页头、页脚等公共区域都保持一致的风格和内容,提升用户体验和品牌形象。
  2. 提高开发与维护效率: 将公共代码集中存放,一次编写,多处引用。当需要修改时,只需更新一个模板片段文件,所有引用它的页面都会自动更新,大大节省了时间和精力。
  3. 代码结构更清晰: 将大型页面分解成逻辑独立的模块,使模板文件更加简洁,易于阅读和理解,降低了后期维护的复杂度。
  4. 促进团队协作: 不同的开发者可以专注于各自的模块,互不干扰,提高团队的开发效率。

如何在安企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>

这样一来,无论你需要多少个页面,都可以重复使用 `