子比主题-添加一个热搜榜单功能

前言

前端页面使用VUE进行开发，需要配合热榜API使用，热榜API部署教程

此处需要自己部署，暂不提供开放api调用

同时也要注意PHP版本，博主这里是7.4，部分内容我做了兼容和修改

魔改步骤

1. 部署API程序
2. 子比主题zibll>>pages中添加相关内容
3. 后台添加页面，模板选择热搜榜单，配置到菜单

效果预览

本站热搜榜单

这里就不放截图了，直接看本站即可

部署API程序

这里以宝塔为例，其它部署方式自行解决

• 下载API源码程序
• 创建站点(php版本选纯静态) – 上传接口源码 – 解压
• 解压后点击 – 终端 如下图

• 然后再终端内依次输入以下命令

// 安装依赖
pnpm install

// 构建文件
pnpm build

• 项目端口默认6688，如需修改，请修改根目录下的 .evn 文件内的 VITE_GLOBAL_API
• 宝塔-站点设置-反向代理-添加反向代理，如下图

• 软件商店 – PM2管理器 – 添加项目

• API调用方法

获取相应榜单数据，只需在域名后添加后缀即可

子比主题魔改

• 下载页面及静态资源文件(内容含：首页版、页面版+使用说明)，我们这里部署页面版
• 将hotlist、HotList.php上传的zibll>>pages下，文件内容如有变更，建议直接使用以下文件

• 后台添加页面，选择热搜榜单即可
• 后台自定义CSS添加如下内容

/*聚合热搜CSS*/
.hot-ico {
    height: 18px;
    margin-right: .25rem;
    margin-bottom: .2rem;
}
.hot-rank {
    width: 18px;
    border-radius: 4px;
    background: rgba(124,124,124,.3);
    display: inline-block;
}
.hot-rank-1 {
    color: #fff;
    background: #f1404b;
}
.hot-rank-2 {
    color: #fff;
    background: #c56831;
}
.hot-rank-3 {
    color: #fff;
    background: #b89e2c;
}
/*聚合热搜CSS结束*/

- - - - - 本页内容已结束，喜欢请分享 - - - - -

感谢您的来访，获取更多精彩文章请收藏本站。