给博客加上热搜排行榜(handsome专属)
效果图
[album type="photos"]
[/album]
使用方法
在sidebar.php文件中添加以下代码
<!-- 热搜 -->
<section class="widget widget_tag_cloud wrapper-md clear" id="hot">
<h5 class="widget-title m-t-none text-md">热搜排行</h5>
<div class="tab-container">
<ul class="nav nav-tabs">
<li class="active" style="width: 50%;"><a style="margin-right: 0px;text-align:center" href="" data-toggle="tab" data-target="#tab_baidu_hot" aria-expanded="true">百度<span class="badge bg-danger badge-sm m-l-xs" id="baidu_hot_num"><i class="animate-spin fontello fontello-refresh"></i></span></a></li>
<li class="" style="width: 50%;"><a style="margin-right: 0px;text-align:center" href="" data-toggle="tab" data-target="#tab_douyin_hot" aria-expanded="false">抖音<span class="badge bg-danger badge-sm m-l-xs" id="douyin_hot_num"><i class="animate-spin fontello fontello-refresh"></i></span></a></li>
</ul>
<div class="tab-content" style="background-color: unset;border: unset;padding-top: 1px; ">
<div class="tab-pane active" id="tab_baidu_hot">
<ul class="list-group no-borders pull-in m-b-none" id="baidu_hot">
</ul>
</div>
<div class="tab-pane" id="tab_douyin_hot">
<ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none" id="douyin_hot">
</ul>
</div>
</div>
</div>
</section>
具体加在模板component文件夹中sidebar.php文件里
找到博客信息这个注释 在前面加上代码
在后台添加自定义JS代码
//百度热搜排行榜
function ss_hot(){
if($("#sidebar").length > 0){
if($("#baidu_hot").length){
$.ajax({
type:"get",
url:"https://api.gmit.vip/Api/BaiduHot",
async:true,
success:function(res){
if(res.code == 200){
$("#baidu_hot_num").html(res.data.length);
var html = '';
var htmls = '';
for (var i = 0; i < res.data.length; i++){
if(i < 10){
hot = '';
if(i < 3){
hot = '<b class="badge bg-danger pull-left">TOP'+(i+1)+'</b>';
}
html += `<div class="list-group list-group-lg list-group-sp col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 0px;padding-right: 0px;"><a style="padding: 5px 5px 5px 5px;" href="`+res.data[i].url+`" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg"><span class="clear"><span class="text-ellipsis">`+res.data[i].title+`</span><small class="text-muted clear text-ellipsis"><b class="badge bg-dark pull-left">No.`+(i+1)+`</b> <b class="badge bg-info pull-left">`+res.data[i].hot+`</b>`+hot+`</small></span></a></div>`;
}else{
htmls += `<div class="list-group list-group-lg list-group-sp col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 0px;padding-right: 0px;"><a style="padding: 5px 5px 5px 5px;" href="`+res.data[i].url+`" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg"><span class="clear"><span class="text-ellipsis">`+res.data[i].title+`</span><small class="text-muted clear text-ellipsis"><b class="badge bg-dark pull-left">No.`+(i+1)+`</b> <b class="badge bg-info pull-left">`+res.data[i].hot+`</b></small></span></a></div>`;
}
}
$("#baidu_hot").append(html+'<div class="text-center" style="text-decoration: underline"><a id="all_baidu_hot" class="infinite-scroll-request">加载更多</a></div>');
$("#all_baidu_hot").click(function() {
$("#baidu_hot").html(html+htmls);
});
}
}
});
}
if($("#douyin_hot").length){
$.ajax({
type:"get",
url:"https://api.gmit.vip/Api/DouYinHot",
async:true,
success:function(res){
if(res.code == 200){
$("#douyin_hot_num").html(res.data.length);
var html = '';
var htmls = '';
for (var i = 0; i < res.data.length; i++){
if(i < 10){
hot = '';
if(i < 3){
hot = '<b class="badge bg-danger pull-left">TOP'+(i+1)+'</b>';
}
html += `<div class="list-group list-group-lg list-group-sp col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 0px;padding-right: 0px;"><a style="padding: 5px 5px 5px 5px;" href="`+res.data[i].url+`" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg"><span class="clear"><span class="text-ellipsis">`+res.data[i].title+`</span><small class="text-muted clear text-ellipsis"><b class="badge bg-dark pull-left">No.`+(i+1)+`</b> <b class="badge bg-info pull-left">`+res.data[i].hot+`</b>`+hot+`</small></span></a></div>`;
}else{
htmls += `<div class="list-group list-group-lg list-group-sp col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 0px;padding-right: 0px;"><a style="padding: 5px 5px 5px 5px;" href="`+res.data[i].url+`" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg"><span class="clear"><span class="text-ellipsis">`+res.data[i].title+`</span><small class="text-muted clear text-ellipsis"><b class="badge bg-dark pull-left">No.`+(i+1)+`</b> <b class="badge bg-info pull-left">`+res.data[i].hot+`</b></small></span></a></div>`;
}
}
$("#douyin_hot").append(html+'<div class="text-center" style="text-decoration: underline"><a id="all_douyin_hot" class="infinite-scroll-request">加载更多</a></div>');
$("#all_douyin_hot").click(function() {
$("#douyin_hot").html(html+htmls);
});
}
}
});
}
}
}ss_hot();
pjax回调函数
如果开启pjax无刷新 需添加pjax回调函数
ss_hot();