如何在AnQiCMS模板中通过`include`标签复用公共头部或底部显示模块的代码?

在AnQiCMS的模板设计中,高效的代码复用是提升开发效率和维护便利性的关键。面对网站中普遍存在的公共元素,如页眉、页脚、导航栏、侧边栏等,如果每个页面都重复编写,不仅耗时费力,后期一旦需要修改,更是牵一发而动全身。AnQiCMS深谙此道,为用户提供了强大的模板机制,其中include标签便是实现这一目标的利器。

AnQiCMS的模板系统采用了类似Django模板引擎的语法,这使得模板文件的组织和编写都具备了良好的结构性与可读性。通常,模板文件以.html作为后缀,统一存放在 /template 目录下。为了更好地管理和复用那些在多个页面中出现的代码片段,一种普遍且推荐的做法是将其归类存放于模板目录下的 partial/ 子目录中。例如,网站的公共头部(header)、底部(footer)、侧边栏(sidebar)或独立的小组件(如广告位、联系信息块)等,都是非常适合抽离并复用的部分。

巧妙运用 include 标签,实现代码模块化

include 标签的核心作用在于,它能够将一个模板文件的内容嵌入到另一个模板文件中,从而避免了重复的代码编写。这就像积木一样,将网站拆解成一个个独立的、可拼装的模块。

基础使用:引入公共代码片段

最简单的include用法直观明了,只需指定要引入的模板文件路径即可。例如,要在每个页面的顶部引入网站的公共头部,您可以在主模板文件(如index.htmldetail.html等)中这样使用:

{% include "partial/header.html" %}

同样地,网站底部通常包含版权信息、友情链接等,也可以用同样的方式引入:

{% include "partial/footer.html" %}

通过这种方式,一旦需要调整网站头部或底部的内容,只需修改 partial/header.htmlpartial/footer.html 这两个文件,所有引用它们的页面都会同步更新,极大简化了维护工作。

带参数的 include:让模块更灵活

在实际应用中,被引入的公共模块可能需要根据当前页面的上下文来显示不同的内容。include标签提供了with参数,允许您向被引入的模板传递局部变量,使其具有更强的适应性。

假设您的header.html需要显示当前页面的标题,或者根据不同页面展示不同的关键词。您可以在引入时这样传递变量:

{% include "partial/header.html" with pageTitle="文章详情" keywords="AnQiCMS, 模板技巧" %}

partial/header.html内部,这些变量就可以像普通变量一样被访问和使用了:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ pageTitle }} - {% system with name="SiteName" %}</title>
    <meta name="keywords" content="{{ keywords }}">
    {# 其他头部内容,例如引入导航列表 #}
    {% navList navs %}
        <ul>
            {% for item in navs %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endnavList %}
</head>
<body>
    {# 网站Logo #}
    <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
    <!-- ... -->
</body>
</html>

限制变量作用域:only 参数

默认情况下,include引入的模板会继承当前主模板的所有上下文变量。但有时,您可能只希望传递少数几个特定变量,以避免不必要的变量污染或提高模板的清晰度。这时,only参数就能派上用场:

{% include "partial/header.html" with pageTitle="文章详情" keywords="AnQiCMS, 模板技巧" only %}

使用only后,partial/header.html将只能访问pageTitlekeywords这两个变量,以及在header.html自身内部定义的任何变量。这有助于保持模板的独立性和可维护性。

优雅的容错处理:if_exists 参数

在某些场景下,您引入的模块可能是可选的,或者您不确定其文件是否存在。如果直接include一个不存在的文件,AnQiCMS会报错。为了避免这种情况,可以使用if_exists参数:

{% include "partial/optional_sidebar.html" if_exists %}

如果 partial/optional_sidebar.html 存在,它会被正常引入;如果不存在,include标签会被忽略,页面也不会因此报错,从而保证了网站的正常运行。

实践出真知:构建模块化网站

通过include标签,网站的模板结构将变得清晰而有条理。

场景一:统一网站头部 (partial/header.html)

partial/header.html 中,您可以定义网站的Logo、主导航、以及SEO相关的TDK(Title, Description, Keywords)信息。利用AnQiCMS内置的systemtdk标签,可以轻松获取这些全局配置。

{# partial/header.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">
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    {# 引入导航 #}
    {% navList mainNav %}
        <nav class="main-navigation">
            <ul>
                {% for navItem in mainNav %}
                    <li {% if navItem.IsCurrent %}class="active"{% endif %}>
                        <a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
                    </li>
                {% endfor %}
            </ul>
        </nav>
    {% endnavList %}
</head>
<body>
    <header class="site-header">
        <a href="{% system with name="BaseUrl" %}" class="logo">
            <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
        </a>
    </header>
    <main>
        {# 页面主要内容会在这里 #}

然后在每个需要这个头部的页面中,简单地引入:

{% include "partial/header.html" %}

场景二:复用网站底部 (partial/footer.html)

网站底部通常包含版权信息、联系方式、友情链接等内容。在 partial/footer.html 中,同样可以结合systemcontactlinkList标签来构建。

{# partial/footer.html 内容示例 #}
    </main>
    <footer class="site-footer">
        <p>{% system with name="SiteCopyright" %}</p>
        <p>联系我们:{% contact with name="Cellphone" %} | {% contact with name="Email" %}</p>
        <div class="friend-links">
            {% linkList friendLinks %}
                <ul>
                    {% for link in friendLinks %}
                        <li><a href="{{ link.Link }}" {% if link.Nofollow == 1 %}rel="nofollow"{% endif %} target="_blank">{{ link.Title }}</a></li>
                    {% endfor %}
                </ul>
            {% endlinkList %}
        </div>
        <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
    </footer>
</body>
</html>

在所有页面中,在页面内容的最后引入它:

{% include "partial/footer.html" %}

include标签带来的价值与与其他复用机制的对比

通过include标签,您能显著:

  • 提高开发效率: 避免重复编写代码,将精力集中于核心业务逻辑。
  • 简化维护: 统一修改公共模块,实现“一处修改,全站生效”的效果。
  • 增强可读性与组织性: 模板结构更加清晰,每个文件职责单一,易于理解和管理。
  • 促进团队协作: 不同的开发人员可以独立地开发和维护各自负责的模块,减少代码冲突。

值得一提的是,AnQiCMS还提供了其他强大的模板复用机制,例如extends(模板继承)和macro(宏函数)。extends标签通常用于定义页面的整体布局或“骨