首页功能开发

首页布局

首页布局其实很简单,主要分布为头部的 banner轮播图,主内容区块,边栏,通过 bootstrap 的布局方式进行分块:

布局代码如下:

<div class="site-index row">
    <div class="col-lg-8">
        banner 轮播图区块
    </div>
    <div class="col-lg-8">
        banner 轮播图区右侧2个推荐文章
    </div>

    <div class="col-lg-8">
        主内容区块(博客文章列表)
    </div>

    <div class="col-lg-4">
        边栏
    </div>
</div>

轮播图

对于轮播图其实很简单,yii2 框架本身就提供了相应的插件 Carousel,代码如下:

代码地址:frontend/views/site/index.php

<?= \yii\bootstrap\Carousel::widget([
        'items' => [
            [
                // 必要的,轮播的内容(HTML),比如一个图像标签
                'content' => '<img src="/images/banner01.jpg"/>',
                // 可选的,该轮播标题(HTML)
                'caption' => "<h4>别让这些闹心的套路阻碍了你的思路</h4>",
                // 可选的,轮播样式
                'options' => [],
            ],
            [
                // 必要的,轮播的内容(HTML),比如一个图像标签
                'content' => '<img src="/images/banner02.jpg"/>',
                // 可选的,该轮播标题(HTML)
                'caption' => "<h4>别让这些闹心的套路阻碍了你的思路</h4>",
                // 可选的,轮播样式
                'options' => [],
            ],
            [
                // 必要的,轮播的内容(HTML),比如一个图像标签
                'content' => '<img src="/images/banner03.jpg"/>',
                // 可选的,该轮播标题(HTML)
                'caption' => "<h4>别让这些闹心的套路阻碍了你的思路</h4>",
                // 可选的,轮播样式
                'options' => [],
            ]
        ]
])?>

轮播图的配置如果想动态配置的话,也可以专门设计 轮播图 管理数据表进行动态管理,通过 Gii 生成代码即可。

右侧推荐文章

右侧推荐文章获取规则是获取最新的10篇文章,随机获取两篇。那么我先去后台发布10篇博客作为demo数据,发布成功之后,根据规则获取对于的数据。代码如下:

代码地址:frontend/controller/SiteController.php

//获取最新的10篇文章
$article = Article::find()->where([
    'is_valid' => 1
])->orderBy(['id' => SORT_DESC])->asArray()->limit(10)->all();

//获取随机2篇不同的文章
for($i=0; $i<2; $i++){
    $k = rand(1,10-$i);
    $tuijian[] = $article[$k];
    unset($article[$k]);
    array_keys($article);
}

将获取的数据在页面渲染,代码如下:

<div class="toppic">
    <ul>
        <?php foreach ($tuijian as $item):?>
        <li> <a href="<?=Url::to(['article/detail','id'=>$item['id']])?>" target="_blank"> <i><img src="<?=Yii::$app->params['qiniu']['domain'].'/'.$item['image_url']?>" width="100%"></i>
                <h2><?=$item['title']?></h2>
            </a>
        </li>
        <?php endforeach;?>
    </ul>
</div>

效果如下:

博客文章列表

文章列表显示的数据中,除了文章相关的内容,还有分类及访问量,这里就涉及到链表查询,相关代码如下:

在模型 Article 中添加关联:

/**
 * 关联分类
 *
 * @return \yii\db\ActiveQuery
 */
public function getCategory()
{
    return $this->hasOne(Category::className(),['id'=>'category_id']);
}

/**
 * 关联访问量
 * 
 * @return \yii\db\ActiveQuery
 */
public function getStatistics()
{
    return $this->hasOne(Statistics::className(),['article_id'=>'id']);
}

数据查询代码:

$article = Article::find()->where([
    'is_valid' => 1
])->with('category', 'statistics')->orderBy(['id' => SORT_DESC])->asArray()->limit(10)->all();

关联查询相关内容请查看教程:yii2 数据查询汇总

素材提供了多种样式供大家选择,本节选用第一种样式作为列表样式,页面渲染代码如下:

<?php foreach ($article as $item):?>
<div class="blogs" >
    <h3 class="blogtitle"><a href="<?=Url::to(['article/detail','id'=>$item['id']])?>" target="_blank"><?=$item['title']?></a></h3>
    <span class="blogpic"><a href="<?=Url::to(['article/detail','id'=>$item['id']])?>" title=""><img src="<?=Yii::$app->params['qiniu']['domain'].'/'.$item['image_url']?>" alt=""></a></span>
    <p class="blogtext"><?=mb_substr($item['content'],0,150)?></p>
    <div class="bloginfo">
        <ul>
            <li class="author"><a href="/"><i class="fa fa-user"></i> <?=$item['author']?></a></li>
            <li class="lmname"><a href="/"><i class="fa fa-list"></i> <?=$item['category']['name']?></a></li>
            <li class="timer"><i class="fa fa-clock-o"></i> <?=$item['created_at']?></li>
            <li class="view"><i class="fa fa-eye"></i> <?=isset($item['statistics']['visit'])?$item['statistics']['visit']:0?></li>
        </ul>
    </div>
</div>
<?php endforeach;?>

边栏挂件制作

边栏在很多地方都会用到,所以边栏一般会制作成挂件重复使用,不需要在各个页面重复开发。

打开 common/widgets 新建目录 sidebar 作为边栏挂件的目录文件。

新建 SiderbarWidget 和对应的渲染页面:

<?php
namespace common\widgets\sidebar;
use common\models\Article;
use yii\base\Widget;

/**
 * 边栏挂件
 *
 * @author huangxianan <xianan_huang@163.com>
 * Date: 2018/6/15
 */

class SidebarWidget extends Widget
{
    /**
     * 初始化
     * @see \yii\base\Object::init()
     */
    public function init(){
        parent::init();
    }


    public function run(){
        $data = Article::find()->where(['is_valid'=>1])->limit(6)->orderBy(['id'=>SORT_DESC])->asArray()->all();
        return $this->render('index',['data'=>$data]);
    }
}

挂件渲染,简单的说就是把首页中对应的 Html 代码拿出来,作为挂件的页面中,填充后台数据,代码如下:

<?php
use yii\helpers\Url;
?>

<?php if(!empty($data)):?>
    <div class="tuijian-list">
        <h2 class="hometitle">点击排行</h2>
        <ul class="tjpic">
            <i><a href="<?=Url::to(['article/detail','id'=>$data['0']['id']])?>"><img src="<?=Yii::$app->params['qiniu']['domain'].'/'.$data['0']['image_url']?>"></a></i>
            <p><a href="<?=Url::to(['article/detail','id'=>$data['0']['id']])?>"><?=$data['0']['title']?></a></p>
        </ul>
        <ul class="sidenews">
            <?php for ($i=1;$i<count($data);$i++):?>
                <li> <i><img src="<?=Yii::$app->params['qiniu']['domain'].'/'.$data[$i]['image_url']?>"></i>
                    <p style="height: 48px"><a href="<?=Url::to(['article/detail','id'=>$data[$i]['id']])?>" ><?=$data[$i]['title']?></a></p>
                    <span><?=$data[$i]['created_at']?></span>
                </li>
            <?php endfor;?>
        </ul>
    </div>
<?php endif;?>

挂件开发完成后,在页面的对应位置引入挂件

<?=\common\widgets\sidebar\SidebarWidget::widget()?>

这边简单讲述了挂件的制作,如法炮制可以制作更多的自定义挂件,开发完成后就可以看到首页的效果了:

上一篇 下一篇
yii2 入门教程 - 博客系统搭建
第1章. 基本信息
第2章. 开发环境部署