文章创建、文章详情、文章列表都已经实现，接下来要做的是首页布局。首页布局的第一个任务是轮播图。这里我们同样用组件的形式来实现轮播图功能，然后通过组件调用的方式把轮播图挂到首页。
1、创建自定义轮播图组件目录结构
2、轮播图组件类实现
<?php
namespace frontend\widgets\banner;
/**
* 轮播图组件
* Class
* @package frontend\widgets\banner
*/
use yii\bootstrap\Widget;
class BannerWidget extends Widget
{
public $items = [];
/**
* 初始化，如果items没有传值则使用默认设置banner
*/
public function init()
{
if (empty($this->items)){
$this->items = [
[
'label'=>'demo',
'image_url'=>'/statics/images/banner1.jpg',
'url'=>['site/index'],
'html'=>'',
'active'=>'active',
],
[
'label'=>'demo',
'image_url'=>'/statics/images/banner2.jpg',
'url'=>['site/index'],
'html'=>'',
'active'=>'',
],
[
'label'=>'demo',
'image_url'=>'/statics/images/banner3.jpg',
'url'=>['site/index'],
'html'=>'',
'active'=>'',
],
];
}
}
/**
* 组件运行，把items数据渲染到组件views下的index
* @return string
*/
public function run()
{
$data['items'] = $this->items;
return $this->render('index', ['data'=>$data]);
}
}
3、组件数据渲染
<?php use yii\helpers\Url; ?> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php foreach ($data['items'] as $k=>$list):?> <li data-target="#carousel-example-generic" data-slide-to="<?=$k?>" class="<?=(isset($list['active']) && $list['active'])?'active':''?>"></li> <?php endforeach;?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner home-banner" role="listbox"> <?php foreach ($data['items'] as $k=>$list):?> <div class="item <?= (isset($list['active'])&&$list['active'])?'active':'';?>"> <a href="<?=Url::to($list['url'])?>"><img src="<?=$list['image_url']?>" alt="<?=$list['label']?>"> <div class="carousel-caption"> <?=$list['html']?> </div> </a> </div> <?php endforeach;?> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
4、首页调用banner轮播图组件
<?php /* @var $this yii\web\View */ use frontend\widgets\banner\BannerWidget; $this->title = '个人博客-首页'; ?> <div class="row"> <div class="col-lg-9"> <?= BannerWidget::widget()?> </div> <div class="col-lg-3"></div> </div>
如果不想用默认配置轮播图，可以<?= BannerWidget::widget()?>中的widget传数组参数，参数格式参照组件中的默认配置二维数组格式，里面的一个小一维数组代表一张轮播图，其中'active'=>'active'表示轮播图默认第一张显示：
[ [ 'label'=>'demo', 'image_url'=>'/statics/images/banner1.jpg', 'url'=>['site/index'], 'html'=>'', 'active'=>'active', ], [ 'label'=>'demo', 'image_url'=>'/statics/images/banner2.jpg', 'url'=>['site/index'], 'html'=>'', 'active'=>'', ], [ 'label'=>'demo', 'image_url'=>'/statics/images/banner3.jpg', 'url'=>['site/index'], 'html'=>'', 'active'=>'', ], ];
首页轮播图调用效果
5、首页中文章列表同样可以通过调用之前写的自定义文章列表组件显示
<?php /* @var $this yii\web\View */ use frontend\widgets\banner\BannerWidget; use frontend\widgets\post\PostWidget; $this->title = '个人博客-首页'; ?> <div class="row"> <div class="col-lg-9"> <!--轮播图--> <?= BannerWidget::widget()?> <!--文章列表--> <?= PostWidget::widget(['more'=>false])?> </div> <div class="col-lg-3"></div> </div>
显示效果：
