从头开始学习yii2---4.对于布局文件的理解

来源：互联网发布：矩阵分解 als 编辑：程序博客网时间：2024/05/01 09:45

1.布局文件即frontend/view/layouts/main.php文件
需要重点注意的地方
encodeLabels改成false表示html标签能够被解析，这样就可以加入图片的标签和图标的标签了

 echo Nav::widget([        'options' => ['class' => 'navbar-nav navbar-right'],        'encodeLabels' => false,//这个表示是html标间进行解析        'items' => $rightMenu,    ]);

修改之后展示内容如下。

main.php文件

<?php/* @var $this \yii\web\View *//* @var $content string */use yii\helpers\Html;use yii\bootstrap\Nav;use yii\bootstrap\NavBar;use yii\widgets\Breadcrumbs;use frontend\assets\AppAsset;use common\widgets\Alert;AppAsset::register($this);?><?php $this->beginPage() ?><!DOCTYPE html><html lang="<?= Yii::$app->language ?>"><head>    <meta charset="<?= Yii::$app->charset ?>">    <meta name="viewport" content="width=device-width, initial-scale=1">    <?= Html::csrfMetaTags() ?>    <title><?= Html::encode($this->title) ?></title>    <?php $this->head() ?></head><body><?php $this->beginBody() ?><div class="wrap">    <?php    NavBar::begin([        'brandLabel' => 'My Company',        'brandUrl' => Yii::$app->homeUrl,        'options' => [            'class' => 'navbar-inverse navbar-fixed-top',        ],    ]);    $leftMenu = [        ['label' => '首页', 'url' => ['/site/index']],        ['label' => '文章', 'url' => ['/site/about']],    ];    if (Yii::$app->user->isGuest) {        $rightMenu[] = ['label' => '注册', 'url' => ['/site/signup']];        $rightMenu[] = ['label' => '登录', 'url' => ['/site/login']];    } else {        $rightMenu[] = [            'label' => '<img src="/statics/images/avatar/small.jpg" alt="' .Yii::$app->user->identity->username . '">' ,            'linkOptions' => ['class' => 'avatar'],            'items' => [                //i标签表示引入font-awesome的图标                ['label' => '<i class="fa fa-sign-out"></i> 退出','url' => ['/site/logout'],'linkOptions' => ['data-method' => 'post']],                //这里是加上下拉菜单的，然后linkOptions可以添加这个属性，这里表示通过post方式提交，url地址表示连接过去的url地址，最后展示出来的是a标签            ],        ];    }    echo Nav::widget([        'options' => ['class' => 'navbar-nav navbar-left'],        'items' => $leftMenu,    ]);    echo Nav::widget([        'options' => ['class' => 'navbar-nav navbar-right'],        'encodeLabels' => false,//这个表示是html标间进行解析        'items' => $rightMenu,    ]);    NavBar::end();    ?>    <div class="container">        <?= Breadcrumbs::widget([            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],        ]) ?>        <?= Alert::widget() ?>        <?= $content ?>    </div></div><footer class="footer">    <div class="container">        <p class="pull-left">&copy; My Company <?= date('Y') ?></p>        <p class="pull-right"><?= Yii::powered() ?></p>    </div></footer><?php $this->endBody() ?></body></html><?php $this->endPage() ?>

frontend/assets/AppAsset.php 这是yii2中引入静态文件的地方，这个文件是可以在指定地方加入css和js的，然后全局都会引用了。
关于font-awesome的使用，只要引用font-awesome.min.css这个css就可以了。然后在用的地方用i标签即可

<?php/** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * @license http://www.yiiframework.com/license/ */namespace frontend\assets;use yii\web\AssetBundle;/** * @description 这是个静态资源引入的文件 * @author Qiang Xue <qiang.xue@gmail.com> * @since 2.0 */class AppAsset extends AssetBundle{    public $basePath = '@webroot';    public $baseUrl = '@web';    public $css = [        'statics/css/site.css',        'statics/css/font-awesome-4.4.0/css/font-awesome.min.css', //会默认引入css的 只要写入地址就了    ];    public $js = [    ];    public $depends = [        'yii\web\YiiAsset',        'yii\bootstrap\BootstrapAsset',    ];}

0 0