如何在Phalcon中实现双层布局（基于Volt模板引擎）

1. 创建最外层全局布局文件 #

在app/views/layouts/目录下新建base.volt，作为最顶层的全局布局，包含所有页面通用的最外层结构（比如全局头部、页脚、通用样式/脚本引入），示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ title|default('默认标题') }}</title>
    <!-- 全局样式、脚本引入 -->
    <link rel="stylesheet" href="/css/global.css">
</head>
<body>
    <!-- 全局头部导航 -->
    <header class="global-header">
        <nav>
            <!-- 导航内容 -->
        </nav>
    </header>

    <!-- 子布局/页面内容填充区域 -->
    <main class="content-wrapper">
        {{ content() }}
    </main>

    <!-- 全局页脚 -->
    <footer class="global-footer">
        <!-- 页脚内容 -->
    </footer>

    <!-- 全局脚本 -->
    <script src="/js/global.js"></script>
</body>
</html>

2. 修改原有default.volt作为中间层布局 #

让default.volt继承base.volt，并定义中间层的专属布局结构（比如侧边栏、页面标题栏等），示例代码：

{% extends 'layouts/base.volt' %}

{% block content %}
    <!-- 中间层布局结构，比如侧边栏+主内容区 -->
    <div class="page-container">
        <aside class="sidebar">
            <!-- 侧边栏内容 -->
        </aside>
        <div class="page-content">
            <!-- 具体页面模板的填充区域 -->
            {{ content() }}
        </div>
    </div>
{% endblock %}

3. 配置控制器使用布局 #

默认情况下，Phalcon会自动使用default.volt作为布局，此时已实现两层嵌套：具体页面模板 → default.volt → base.volt。

如果需要给特定控制器指定不同布局（比如部分页面直接使用base.volt），可在控制器的initialize()方法中设置：

public function initialize()
{
    // 直接使用最外层base布局
    $this->view->setLayout('base');
}

4. 编写具体页面模板 #

页面模板无需编写完整HTML结构，只需填充到对应布局的内容区域即可，比如app/views/index/index.volt：

<h1>首页内容</h1>
<p>这是首页的具体内容</p>

渲染后，页面会先将页面模板内容填充到default.volt的{{ content() }}，再将default.volt的整体内容填充到base.volt的{{ content() }}，最终生成完整的嵌套布局页面。

内容的提问来源于stack exchange，提问作者morteza mortezaie