Joe主题美化:侧边栏添加一个微博热搜列表

Jaysun

博客侧栏仿微博热搜排行榜功能。

上图预览:

1.jpg

代码使用

第一步:下载文件

包含三个文件:
模板文件:aside_hot_ranking.ftl
样式文件:aside-hot-ranking.min.CSS
脚本文件:aside-hot-ranking.min.js

隐藏内容
评论可见
前往评论


第二步:引入css样式文件

引用css的方式有三种,分别如下,文件可以自己上传到halo附件管理中

第1种: 上传并拷贝 aside-hot-ranking.min.css的文件地址,粘贴到主题设置-自定义-外部css链接中;

第2种:拷贝 aside-hot-ranking.min.css的文件内容粘贴主题设置-自定义-自定义css 中;

第3种: Joe主题编辑,在 template/common/header.ftl文件中,加入css链接,如图:

a5bc841897f60f924e9752176ae43486.webp.jpg

第三步:引入js文件

在joe主题设置中,找到自定义,在 外部JS链接(head)配置中加入js链接,示例:

<script src="http:// 您的aside-hot-ranking.min.js文件链接"> </script>

第四步:上传 aside_hot_ranking.ftl 模板文件

halo后台没有上传模板的功能,需要自己到服务器找到halo的安装目录,并找到 /themes/joe2.0/template/目录将第一步下载好的 aside_hot_ranking.ftl模板文件上传该 文件夹中(PS:当然你也可以新建一个文件夹专门存放这些非主题本身的模板,截图为我自定义目录,我这里放在了 evan 目录下),如图所示:

f4ebc2f3d31574c96c81fa082dc3f716.webp.jpg

第五步:引用aside_hot_ranking.ftl 模板文件

编辑joe主题,找到template/common/aside.ftl 侧边栏模板文件中加入如下代码,代码位置任意放置(但必须是与 <#if>或者</#if>同一级),我这里放在我的歌单下方 :

   <!-- 模板引用:注意:模板路径根据【第四步】上传的位置而定 -->
   <#include "../evan/aside_hot_ranking.ftl">

图示:

5e8b708e8c7f0e3d895dd21366e725ba.webp.jpg


第六步:初始化插件

找到,joe 主题设置-> 自定义-> 自定义JS(body),添加以下代码(具体参数请参考下方说明):

    // 右侧:热搜初始化
// 右侧:热搜
new EvanHotRanking({
       api: 'https://www.aapi.icu/call/hot/weibo', // api地址
       list:[],
       size:6,
       title: "热搜榜", // 标题
       more: {
              use: true,
              text: "点击查看完整热搜榜",
              link: "https://s.weibo.com/top/summary?cate=realtimehot",
        },
        format: function (res) {
                 const {data}= res; 
                 const _list = data.map(item=>{
                     return {
                         title:item['hot_title'],
                         hot:item['hot_value'],
                         link:item['hot_url'], 
                     };
                 })
                 return {
                       title:'微博热搜',
                       list:_list,
                 }
         }
})

参数说明

参数名参数类型是否必填默认值说明
apiStringnull数据接口地址,可以使用接口返回的数据,此处推荐使用接口https://www.aapi.icu/api/weibo_hot,来自小花提供
listArray[“”,“” ]直接提供静态数据,该参数和api参数必须设置一个,数据格式:[{title:'热搜关键字',link:'热搜关键字链接',hot:'热度值'},{...}]
titleString热搜榜板块标题
sizeNumber6展示的数据条数
formatFunctionnull对使用api接口返回数据时候进行格式化,校准数据格式为 list的数据格式,并且固定返回为return { title:'热搜榜', list:[{title:'热搜关键字',link:'热搜关键字链接',hot:'热度值'},{...}]}
moreObject
板块底部查看全部跳转链接配置


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 4 条评论,567人围观)
网友昵称:19856623
19856623 V 普通用户 MIUI Browser 17.7.280811 Motorola 板凳
2023-08-26 来自广东 回复
没有解压密码,下载了也没有用的
网友昵称:Jaysun
Jaysun V 博主 Google Chrome 108.0.5359.125 Windows 10
2023-08-26 来自山东 回复
@19856623 你解压了吗?这个压缩文件压根就没有密码。
网友昵称:xywlxyh
xywlxyh V 普通用户 MIUI Browser 17.5.120328 Motorola 椅子
2023-08-26 来自未知IP 回复
感谢大佬分享
网友昵称:qwe2001
qwe2001 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 沙发
2023-05-20 来自广东 回复
赞、狂赞、超赞、不得不赞、史上最赞!

目录[+]

取消
微信二维码
微信二维码
支付宝二维码