「Web」为网站增加热门文章排行

“热门文章排行”这个功能在很多Blog系统中都是支持的，这个功能可以让用户了解到该博客内点击率（浏览率）最高的文章。

本人觉得功能挺好用(zhu yao hai shi xian)的，因此想自己写一个这个功能。主要借助的语言就是HTML&CSS、Javascript（jQuery）、PHP。下面是实现代码。

首先是PHP调用数据库获取浏览量前十（默认值，可以自定义）的文章：

function getHotComments($limit = 10){
    $db = Typecho_Db::get();
    $result = $db->fetchAll($db->select()->from('table.contents')
        ->where('status = ?','publish')
        ->where('type = ?', 'post')
        ->where('created <= unix_timestamp(now())', 'post') //添加这一句避免未达到时间的文章提前曝光
        ->limit($limit)
        ->order('viewsNum', Typecho_Db::SORT_DESC)
    );
    if($result){
        foreach($result as $val){            
            $val = Typecho_Widget::widget('Widget_Abstract_Contents')->push($val);
            $post_title = htmlspecialchars($val['title']);
            $permalink = $val['permalink'];
            echo '<li><a href="'.$permalink.'" title="'.$post_title.'" target="_self">'.$post_title.'</a></li>';        
        }
    }
}

然后是HTML页面输出DOM：

<div id="popularArticles">
    <ul>
        <?php getHotComments( '10');?> // PHP输出热门文章
    </ul>
    <div> <span>→</span>
        <span>点击排行</span>
    </div>
</div>

使用CSS对页面DOM进行修饰（ 我写的前端太丑了）：

#popularArticles {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: -300px;
    background-color: aliceblue;
    z-index: 9;
    width: 300px;
    display: none;
}

@media screen and (min-width: 767px) {
    #popularArticles {
        display: block;
    }
}

#popularArticles ul {
    display: block;
    white-space: nowrap;
    padding-left: 20px;
}

#popularArticles li {
    border-bottom: 1px solid #ccc;
    margin-top: 10px;
}

#popularArticles>div {
    color: #cececf;
    ;
    position: absolute;
    right: -30px;
    top: 0px;
    font-size: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, .4);
    ;
    text-align: center;
    cursor: pointer;
    padding: 5px;
    box-sizing: content-box;
}

#popularArticles>div>span {
    display: block;
    transition: all .5s;
}

最后采用JavaScript（jQuery）对页面输出DOM添加点击事件，增强用户体验：

$(function() {
    $('#popularArticles>div').click(function() {
        if ($('#popularArticles')[0].offsetLeft === 0) { // 当点击时，对盒子的位置进行判断
            $('#popularArticles').animate({
                left: -$('#popularArticles')[0].offsetWidth + "px"
            }, 500);
            $('#popularArticles>div>span:first-child').css({
                'transform': 'rotate(0deg)'
            });
            $(this).children('span:nth-child(2)').html("点击排行")
        } else {
            $('#popularArticles').animate({
                left: "0px"
            }, 500);
            $('#popularArticles>div>span:first-child').css({
                'transform': 'rotate(-180deg)'
            });
            $(this).children('span:nth-child(2)').html("隐藏列表")
        }
    })
    
    $("#popularArticles>ul>li").click(function() { // 当对li列表点击时，恢复盒子隐藏
        $('#popularArticles').animate({
            left: -$('#popularArticles')[0].offsetWidth + "px"
        }, 1000);
        $('#popularArticles>div>span:first-child').css({
            'transform': 'rotate(0deg)'
        });
        $('#popularArticles>div').children('span:nth-child(2)').html("点击排行")
    })
})

使用体验见本站即可。