目录
前言
最近看到一个大佬, 开源了一款博客小插件, 地址. 可以将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, 无法读取更多信息, 缺少数据通信
- 若某排名的图片当日没有, 页面并不知道, 仍然会进行展示. (因为是文件覆盖, 还是可以读到旧文件的)
- 等等
不过当前的要求并不高, 这些问题都在可以忍受的范围内. 后面如果需求来了, 再改进吧