给博客加上热搜排行榜（handsome专属）

博主：三百斤的窜天猴
发布时间：2023 年 08 月 09 日
1409 次浏览
暂无评论
3974字数
分类： handsome美化博客优化

效果图

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/1270673297.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/1270673297.png)
image.png

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/1591539199.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/1591539199.png)
image.png

### 使用方法

#### 在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文件里
找到博客信息这个注释 在前面加上代码
[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/711619249.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/711619249.png)

image.png

#### 在后台添加自定义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();
```

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/4096777883.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/4096777883.png)

image.png

#### pjax回调函数

如果开启pjax无刷新 需添加pjax回调函数

```
ss_hot();
```

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/2705165013.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/2705165013.png)

image.png

最后修改：2023 年 08 月 09 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 * （请使用真实邮箱地址，方便及时接收评论回复！）

打卡

私密评论

名称 *

🎲

邮箱 *

地址

给博客加上热搜排行榜（handsome专属）

三百斤的窜天猴 • 2023 年 08 月 09 日

效果图

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/1270673297.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/1270673297.png)
image.png

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/1591539199.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/1591539199.png)
image.png

### 使用方法

#### 在sidebar.php文件中添加以下代码

image.png

#### 在后台添加自定义JS代码

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/4096777883.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/4096777883.png)

image.png

#### pjax回调函数

如果开启pjax无刷新 需添加pjax回调函数

```
ss_hot();
```

[![image.png](https://blog.gumengya.com/usr/uploads/2022/10/2705165013.png "image.png")](https://blog.gumengya.com/usr/uploads/2022/10/2705165013.png)

image.png

给博客加上热搜排行榜（handsome专属）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

迅雷for Mac v6.6.6 免登录会员破解版更新mac迅雷破解版+Mac纯净版迅雷修改5.0.8(65887)(授人以渔)

Typecho-handsome主题如何增加侧边导航栏

typecho/handsome评论邮件通知提醒设置

CentOS/Debian/Ubuntu 一键网络DD重装脚本（纯净版）让你的服务器纵享丝滑

搜索框搜索提示有内容，但是最终搜索页面没有显示结果？

无需申请,手动把Onedrive for business容量扩充到25T

华为云FlexusL 新加坡/香港优惠券2C4G30M 半年17.54

网易云 cookie 设置

typecho 如何支持emoji

Ubuntu/Centos中使用chconfig命令报错：“chkconfig: command not found“ 的解决方案

给博客加上热搜排行榜（handsome专属）

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

给博客加上热搜排行榜（handsome专属）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款