前言

最近看到一个大佬, 开源了一款博客小插件, 地址. 可以将pixiv网站的日榜放到博客侧边栏. 看上去很炫酷. 于是我也引入到了自己的博客中. 在此向大佬表示感谢.

但是在使用过程中, 经常遇到访问很慢的情况, 查看之后才发现, 大佬的服务器架设在韩国, 难怪访问比较慢, 都走国际带宽了.

于是, 我就在北京搭了一个, 如果需要的话可自行引入. 效果可到主页查看. 地址: https://fun.hujingnb.com/pixiv/i

如果愿意的话, 希望能帮我加个友链, 谢过

• 名称: 烟草的香味
• 地址: https://hujingnb.com
• 头像: (修改 s 参数以修改图片尺寸) https://cravatar.cn/avatar/9b59d04405217fb93755abf434aa9c1e?s=256
• 简介: 对技术充满好奇的后端工程师

使用

我使用的是WordPress, 就以WordPress为例, 其他情况请自行处理. 当前图片的点击效果为打开原图.

添加侧边栏HTML控件, 内容(iframe请自行修改):

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

同时支持HTTP, HTTPS 请求, 推荐使用HTTPS.

另外, 我添加了几个请求的GET参数, 用于有需要的小伙伴自定义.

• interval: 页面轮播时长(毫秒). 默认5000
• bg: 背景色, 默认transparent
  • 注意, 若你的色值为#000, 请传递参数%23000. 在 get uri 中#符号需要进行转义
  • 当然, 其他在HTML中用于标识颜色的都可以哦. 比如black
• w: 图片宽度. 默认100
  • 因为图片很多超过1MB, 故进行了图片的压缩, 可提高访问速度.
  • 可选值: 100, 200, 300, 400, 500.
  • 请按需使用, 不要超过窗口的宽度, 否则徒增图片大小(也会增加流量消耗)
  • 若有人需要宽度大于500, 请留言详说, 酌情开放更大尺寸
• limit: 轮播的排名区间. 默认1,50
  • 1,50 为显示排名 1-50 的图片
  • 最大排名100, 暂时看100应该够用了, 故只拉取了日榜的 top 100
• type: 榜单类型, 默认daily
  • 日榜(daily), 月榜(monthly)
  • 周榜介于日榜和月榜之间, 感觉没人用吧, 就没有爬
• rand: 是否随机起始图片, 默认0
  • 若为1, 则每次进入页面, 都会随机一个起始位置

原理

开始的时候, 我是想着将项目 down 下来, 配置一下跑起来就行了, 但是, 看过源码后, 我发现人家的很多功能其实我都用不到, 我只需要一个爬虫加一个展示页面就可以了. 索性自己写了一个.

其实现十分简单, 这里简单介绍一下, 就不开源了, 拢共没几行.

一个展示页面, 从 oss 的固定路径中读取图片进行展示. 比如排名1的, 路径为: pixiv/1.jpg.

一个每天定时执行的脚本, 将最新的图片下载后并覆盖 oss 的文件内容. 为了节省费用, 下载完成后将 ecs 释放掉. 具体可看 阿里云定时任务并自动释放. 同时, 因为页面使用了 cdn 读取图片, 所以在下载完成后, 要刷新下 cdn 缓存.

没了, 就这么点东西. 当然, 现在这样还存在一些问题, 比如:

• 若定时脚本执行时, 每日排行榜没有刷新, 缺少重试机制
• 页面只能读取到图片的 url, 无法读取更多信息, 缺少数据通信
• 若某排名的图片当日没有, 页面并不知道, 仍然会进行展示. (因为是文件覆盖, 还是可以读到旧文件的)
• 等等

不过当前的要求并不高, 这些问题都在可以忍受的范围内. 后面如果需求来了, 再改进吧