网站LOGO
公爵书房 | 技术分享
页面加载中
10月3日
网站LOGO 公爵书房 | 技术分享
以指键之轻,承载知识之重
菜单
  • 公爵书房 | 技术分享
    以指键之轻,承载知识之重
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    handsome侧边栏添加热搜排行榜
    点击复制本页地址
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    handsome侧边栏添加热搜排行榜

    公爵 · 原创 ·
    笔记 · typecho魔改handsome
    共 6896 字 · 约 1 分钟 · 24

    效果图

    使用方法

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

    html 代码:
    <!-- 热搜 -->
    <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代码

    html 代码:
    //百度热搜排行榜
    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回调函数

    html 代码:
    ss_hot();
    声明:本文由 公爵(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    发一条! 发一条!
    博客logo 公爵书房 | 技术分享 以指键之轻,承载知识之重 51统计 百度统计
    MOEICP 萌ICP备20226257号 ICP 赣ICP备2022001242号-1 ICP 闽公网安备35020502000606号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已运行 1 年 256 天 5 小时 56 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    公爵书房 | 技术分享. © 2022 ~ 2023.
    网站logo

    公爵书房 | 技术分享 以指键之轻,承载知识之重
     
     
     
     
    壁纸