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

最新推荐文章于 2021-08-05 16:11:35 发布

Rodgexue

最新推荐文章于 2021-08-05 16:11:35 发布

阅读量830

点赞数

分类专栏： Yii 文章标签： yii html 布局标签 widget

本文链接：https://blog.csdn.net/Rodgexue/article/details/53290373

版权

Yii 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

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',
    ];
}

Rodgexue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从头开始学习yii2---4.对于布局文件的理解

1.布局文件即frontend/view/layouts/main.php文件需要重点注意的地方 encodeLabels改成false表示html标签能够被解析，这样就可以加入图片的标签和图标的标签了 echo Nav::widget([ 'options' => ['class' => 'navbar-nav navbar-right'], 'encodeL
复制链接

扫一扫