YII2高级版框架搭建完整博客系统教程——热门阅读排行榜组件

心月IT博客 03-19

默认

摘要：通过自定义组件实现热门阅读排行榜。

1、创建自定义热门阅读组件目录结构

自定义热门阅读组件目录结构

2、创建自定义热门阅读组件类

<?php
namespace frontend\widgets\hot;

/**
 * 热门阅读排行榜
 */

use common\models\PostExtendsModel;
use common\models\PostsModel;
use yii\base\Widget;
use Yii;
use yii\helpers\Url;
use yii\db\Query;

class HotWidget extends Widget
{
    /**
     * 文章列表的标题
     * @var unknown
     */
    public $title = '';

    /**
     * 显示条数
     * @var unknown
     */
    public $limit = 8;

    /**
     * 是否显示更多
     * @var unknown
     */
    public $more = true;

    /**
     * 是否显示分页
     * @var unknown
     */
    public $page = true;
    
    /**
     * 组件运行方法
     */
    public function run()
    {
        
    }
}

自定义热门阅读排行组件类

组件运行方法：

组件运行方法

3、热门阅读组件数据渲染

<?php
use yii\helpers\Url;
?>
<?php if(!empty($data)):?>
    <div class="panel">
        <div class="panel-title box-title">
            <span><strong><?=$data['title']?></strong></span>
        </div>
        <div class="panel-body hot-body">
            <?php foreach ($data['body'] as $list):?>
                <div class="clearfix hot-list">
                    <div class="pull-left media-left">
                        <a href="#">浏览<em><?=$list['browser']?></em></a>
                    </div>
                    <div class="media-right">
                        <a href="<?=Url::to(['post/view','id'=>$list['id']])?>"><?=$list['title']?></a>
                    </div>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif;?>

热门阅读组件数据渲染

4、首页调用热门阅读排行榜组件

<!--热门阅读-->
<?= HotWidget::widget()?>

首页调用热门阅读排行榜组件

热门阅读列表css样式：

.hot-list .media-left a{
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    line-height: 22px;
    background: #5cb85c;
    width: 45px;
    display: block;
    height: 48px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.media-left em {
	font-size: 14px;
    font-weight: 500;
    background: #fff;
    display: block;
    line-height: 26px;
	color: #333;
    font-style: normal;
}

.hot-list {
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
	margin-bottom:10px;
}

.media-right {
	line-height:24px;
}

.hot-body {
	padding:10px 0 5px 0;
}

热门阅读效果展示：

热门阅读效果展示