为博客添加 Pixiv 排行榜小挂件

一行代码为博客添加一个 Pixiv 每日排行榜小挂件,来自 mokeyjay

之前偶然发现的一款博客小挂件,可以非常方便地在博客展示 Pixiv 每日排行榜,就很棒。下面记录一下使用方法,喜欢的话可以去给作者点一个 star

挂件特色

  • 一行 HTML 代码即可调用,方便快捷

  • 自适应宽高。推荐宽度 240px、高度 380px 或以上

  • 点击图片可跳转到对应作品详情页

  • 每日自动更新,无需人工干预

  • 内置多图床支持、按需加载图片,极低资源消耗

  • 提供 API 服务,含有排行榜更新日期、缩略图 url 及详情页 url 等

挂件使用

把下面这行代码放到网页合适位置即可,样式可自行调整,预览效果可以查看 我的博客园 页面右侧

<iframe src="https://cloud.mokeyjay.com/pixiv" style="width:240px; height:380px; border: 0"></iframe>

在博客园中使用

首先开通博客园 JS 权限,然后在博客后台设置里的 页脚 HTML 代码 栏里添加如下代码

<script>
  $(function() {
    setTimeout(function() {
      const f = document.createElement('iframe');
      f.src = 'https://cloud.mokeyjay.com/pixiv/';
      f.setAttribute('frameborder', 0);
      f.setAttribute('style', 'width:240px;height:380px;display:block;margin:0 auto;');
      $('#blog-calendar').html('<h3 style="text-align: center;">Pixiv 日榜 Top 50</h3>').append(f);
    }, 1000);
  });
</script>

我是直接把博客日历替换成了这个小挂件,效果如下图,可自己按需更改插入的位置

图 1

API 使用

如果想自定义或者单纯调用接口,作者提供了以下 API:

其中 data 为排行榜数据,date 为排行榜日期(可能是昨天或者前天,因为官方更新时间不一定),这两个接口都会自动根据请求头的 Origin 或者 Referer 返回对应跨域头,可供前端直接调用。

API 返回结构

图 2

替代方案

因为 cloud.mokeyjay.com 部署在韩国,访问起来可能有点慢,有大佬自己在国内搭建了一个,对速度不满意的可以使用如下代码

<iframe src="https://fun.hujingnb.com/pixiv/i?w=300" frameborder="0" style="width:300px; height:400px;" ></iframe>

另外,这个链接可以使用下面这些参数

例如:https://fun.hujingnb.com/pixiv/i?w=300&interval=1500&bg=red&limit=10&rand=1

  • interval: 页面轮播时长(毫秒). 默认 5000
  • bg: 背景色,默认 transparent
    • 注意,若你的色值为 #000, 请传递参数 %23000. 在 get uri 中#符号需要进行转义
    • 当然,其他在 HTML 中用于标识颜色的都可以哦。比如 black
  • w: 图片宽度。默认 100
    • 可选值:50, 100, 200, 300
    • 图片压缩后,可提高访问速度
    • 因只进行缩略图展示,故下载的图片宽度最大为 240, 未下载原图(应该也用不到吧)
    • 请按需使用,不要超过窗口的宽度,否则徒增图片大小(也会增加流量消耗)
  • limit: 轮播的排名区间。默认 1,50
    • 1,50 为显示排名 1-50 的图片
    • 最大排名 100, 暂时看 100 应该够用了,故只拉取了日榜的 top 100
  • type: 榜单类型,默认 daily
    • 日榜 (daily), 月榜 (monthly)
    • 周榜介于日榜和月榜之间,感觉没人用吧,就没有爬
  • rand: 是否随机起始图片,默认 0
    • 若为 1, 则每次进入页面,都会随机一个起始位置
  • c_type: 图片点击行为。默认为 img
    • 可能值如下:
      • img: 在新页面打开图片
      • none: 点击无反应
      • p_detail: 打开 pixiv 站点的图片页面
      • p_user: 打开 pixiv 站点的作者页面
  • cursor: 鼠标在图片上的样式,可配合 c_type 使用。默认为 pointer
    • 此样式请参数 css 属性 cursor

P.S.

如果想查看排行榜详情的话,可以前往我做的页面 Pixiv Ranking 😸

图 3

Reference

Pixiv-daily-ranking-widget

pixiv 小控件


Also posted at https://www.nanoka.top/posts/9253784/
fin.

posted @ 2022-07-22 23:50  Yumine  阅读(173)  评论(0编辑  收藏  举报