热榜API搭建部署教程,onenav配置热榜教程

👍 个人网站:【 洛秋小站】【洛秋资源小站

一、搭建热榜API

下面是需要使用的网站,自己注册账号登录就行

  1. GitHub
    项目地址:DailyHotApi-Vercel感谢大佬
  2. vercel

Fork项目

登录GitHub后Fork这个项目DailyHotApi-Vercel
在这里插入图片描述
Fork完成后的样子
在这里插入图片描述

使用GitHub登录 vercel

登录后ADD一个project
在这里插入图片描述
在这里插入图片描述
自定义Project Name,单击Deploy部署
在这里插入图片描述
部署完成后的效果
在这里插入图片描述

访问全部接口

HotAPI里面就是后面会使用到的数据
在这里插入图片描述
在这里插入图片描述
至此HotAPI搭建完成

设置自定义域名

  1. Settings-Domains,添加自定义域名newhotapi.luoqiu.site
    在这里插入图片描述
  2. 登录域名服务器配置CNAME(博主使用的是阿里云域名)
    复制newhotapicname.vercel-dns.com.添加记录
    在这里插入图片描述
  3. 回到vercel,自定义域名已经生效了
    在这里插入图片描述
    至此HotAPI自定义域名完成

二、配置ONEnav自定义热榜

首先获取热榜全部接口

{
  "code": 200,
  "count": 40,
  "routes": [
    {
      "name": "weibo",
      "path": "/weibo"
    },
    {
      "name": "zhihu",
      "path": "/zhihu"
    }
  ]
}

设置-自定义热榜-首页新闻热搜

五个必填项

名称:知乎
源地址:https://newhotapi.luoqiu.site/zhihu
数据节点:data
标题节点:title
链接节点:url

设置完成后保存配置
注意第一个热榜ID是1,后面会用到
在这里插入图片描述
2. 主题-今日热榜
启用使用热榜
设置首页热榜-类型(JSON)-热榜ID(1)
设置完成后保存配置
在这里插入图片描述

  1. 查看效果
    在这里插入图片描述

今日热榜页列表

如果需要在热榜列表中显示,还需要在今日热榜页列表下配置,配置方式同上
在这里插入图片描述
至此,教程结束。
如果觉得文章对你有帮助的话,不妨关注一下吧!
在这里插入图片描述

👉 最后,愿大家都可以解决工作中和生活中遇到的难题,剑锋所指,所向披靡~

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛秋_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值