yii框架中的布局是网站页面共用部分的模板,通常包含头部、底部、侧边栏等全局结构;2. 布局文件默认存放在 views/layouts/ 目录下,如 main.php,并通过 $content 变量嵌入具体视图内容;3. 可在 config/web.php 中配置全局 layout,或在控制器中设置 public $layout 属性指定特定布局;4. 在动作方法中可通过 $this->layout = 'layout_name' 临时更改布局,或设为 false 禁用布局;5. 推荐使用资产包(asset bundle)机制在布局中引入css和js,通过 appasset::register($this) 注册资源,并配合 $this->head() 和 $this->endbody() 输出资源链接;6. 资产包支持依赖管理、版本控制、文件合并压缩及cdn加载,提升性能和维护性。该机制实现了页面结构统一和代码复用,使前端资源管理更加高效和规范。

YII框架中的布局,简单来说,就是你网站页面共用部分的“外壳”或者“模板”。它决定了你的网页内容(比如一个新闻详情页、一个产品列表页)在显示时,会被包裹在一个什么样的整体框架里。这个框架通常包含头部导航、底部版权信息、侧边栏,以及一些全局性的CSS和JavaScript引用。定义布局,就是告诉Yii你的内容应该被哪个“外壳”包裹,从而实现网站风格的统一和代码的复用。
在YII框架中定义和使用布局,核心在于理解其约定和配置。
最常见的方式是创建一个布局文件,通常命名为
main.php
views/layouts/
$content
$content
site/index.php
例如,一个基本的
views/layouts/main.php
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use app\assets\AppAsset;
use yii\bootstrap4\Html;
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" class="h-100">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body class="d-flex flex-column h-100">
<?php $this->beginBody() ?>
<header>
<?php
NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar navbar-expand-md navbar-dark bg-dark fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
],
]);
NavBar::end();
?>
</header>
<main role="main" class="flex-shrink-0">
<div class="container">
<!-- 这里就是 $content 的位置,具体视图的内容会在这里显示 -->
<?= $content ?>
</div>
</main>
<footer class="mt-auto py-3 bg-dark">
<div class="container">
<p class="float-left">© My Company <?= date('Y') ?></p>
<p class="float-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>定义好布局文件后,你需要告诉Yii你的应用或控制器应该使用哪个布局。
全局应用配置: 在你的
config/web.php
layout
'components' => [
// ...
],
'layout' => 'main', // 对应 views/layouts/main.php
// 或者如果你想指定路径
// 'layoutPath' => '@app/views/layouts',
// 'layout' => 'main',这里
main
views/layouts/main.php
layoutPath
@app/views/layouts
main
控制器级别配置: 如果你希望某个控制器下的所有动作都使用特定的布局,可以在控制器类中设置
layout
namespace app\controllers;
use yii\web\Controller;
class ProductController extends Controller
{
public $layout = 'product_layout'; // 对应 views/layouts/product_layout.php
public function actionIndex()
{
return $this->render('index');
}
}动作级别配置: 甚至你可以在某个具体的动作方法中,临时改变布局:
public function actionView($id)
{
$this->layout = 'empty'; // 对应 views/layouts/empty.php,可能是一个没有导航和页脚的简单布局
return $this->render('view', [
'model' => $this->findModel($id),
]);
}通过这些方式,Yii 就能知道在渲染你的视图内容时,应该把它放到哪个布局里。这套机制用起来挺顺手的,尤其是在需要保持页面结构一致性的时候,避免了大量重复的HTML代码。
Yii 框架对于布局文件的存放位置是有约定俗成的,这极大地帮助了我们组织项目结构。通常情况下,布局文件会被放置在应用程序的
views/layouts/
basic
basic/views/layouts/
这个约定并非强制,但强烈推荐遵循。原因很简单:Yii 默认就会去这个位置寻找布局文件。当你配置
layout
main
@app/views/layouts/main.php
当然,如果你有特殊需求,比如你的项目非常庞大,或者你正在开发一个模块化的应用,你也可以自定义布局文件的存放路径。这可以通过在应用程序配置中设置
layoutPath
layoutPath
比如,在一个模块
blog
modules/blog/views/blog_layouts/
modules/blog/Module.php
namespace app\modules\blog;
class Module extends \yii\base\Module
{
public $controllerNamespace = 'app\modules\blog\controllers';
public function init()
{
parent::init();
// 自定义模块的布局路径
$this->layoutPath = '@app/modules/blog/views/blog_layouts';
// 默认使用 'blog_main' 布局
$this->layout = 'blog_main';
}
}这样一来,该模块下的控制器如果没有明确指定布局,就会默认使用
modules/blog/views/blog_layouts/blog_main.php
views/layouts/
layouts
在Yii中,控制布局的粒度可以非常细致,从全局应用到单个控制器,再到具体的动作方法。如果你想让某个控制器下的所有动作都使用一个特定的布局,或者干脆禁用布局,这在控制器类中设置一个属性就能搞定。
在控制器类中,你可以声明一个公共属性
$layout
.php
layoutPath
例如,我们有一个
UserController
user_panel
main
namespace app\controllers;
use yii\web\Controller;
class UserController extends Controller
{
public $layout = 'user_panel'; // 这会使用 views/layouts/user_panel.php
public function actionProfile()
{
return $this->render('profile');
}
public function actionSettings()
{
return $this->render('settings');
}
}这样,
actionProfile
actionSettings
user_panel.php
那么,如果某个页面我们不希望有任何布局,比如一个Ajax请求返回的纯JSON数据,或者一个需要全屏展示的特殊页面,我们可以直接禁用布局。做法也很简单,将
$layout
false
namespace app\controllers;
use yii\web\Controller;
class ApiController extends Controller
{
// 这个控制器下的所有动作默认都没有布局
public $layout = false;
public function actionGetData()
{
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return ['status' => 'success', 'data' => ['item1', 'item2']];
}
}或者,你也可以在某个具体的动作方法中临时禁用布局,这会覆盖控制器级别的设置:
namespace app\controllers;
use yii\web\Controller;
class SiteController extends Controller
{
// ...其他动作和属性
public function actionPrintablePage()
{
// 针对这个动作,禁用布局
$this->layout = false;
return $this->render('printable-view');
}
}这种灵活的控制方式,让我能够根据不同页面的需求,精准地选择或禁用布局,避免了不必要的HTML结构,也方便了特定功能的实现,比如打印预览页面或者纯API接口。
在Yii布局中引入CSS和JavaScript资源,最佳实践是使用Yii的资产包(Asset Bundles)机制。这套系统非常强大,它不仅能帮你管理资源的路径,还能处理依赖关系、版本控制、压缩合并,甚至CDN发布,极大优化了前端性能。
通常,每个Yii应用都会有一个默认的
AppAsset
assets/AppAsset.php
assets/AppAsset.php
<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css', // 你的自定义CSS文件
// 也可以是外部链接的CSS
// 'https://fonts.googleapis.com/css?family=Roboto',
];
public $js = [
// 'js/main.js', // 你的自定义JS文件
];
public $depends = [
'yii\web\YiiAsset', // Yii核心JS
'yii\bootstrap4\BootstrapAsset', // Bootstrap CSS
'yii\bootstrap4\BootstrapPluginAsset', // Bootstrap JS (需要依赖JQuery)
];
}在你的布局文件(比如
views/layouts/main.php
<?php
use app\assets\AppAsset;
AppAsset::register($this); // 注册AppAsset
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" class="h-100">
<head>
<!-- ... 其他head内容 ... -->
<?php $this->head() ?> // 必须有这一行,用于输出CSS
</head>
<body>
<!-- ... 页面内容 ... -->
<?php $this->endBody() ?> // 必须有这一行,用于输出JS
</body>
</html>$this->head()
<head>
$this->endBody()
</body>
为什么推荐资产包?
AppAsset
YiiAsset
BootstrapAsset
当然,如果你只是偶尔需要引入一个非常小的、不依赖任何东西的CSS或JS片段,也可以使用
Html::cssFile()
Html::jsFile()
<style>
<script>
以上就是YII框架的布局是什么?YII框架如何定义布局?的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号