Handsome部署Pixiv每日Top50小部件

博客已经历几番变迁，此为早期记录之贴，并未完篇，仅博君一笑。

---

原项目Github:Pixiv每日排行榜Top50小部件)
具体效果：

简介

会自动更新的P站每日榜top50展示小部件，适合放在博客侧边栏等地方

特色

• 一行HTML代码即可调用，方便快捷
• 适合放在大部分博客或网站的侧边栏
• 自适应宽高。推荐宽度240px、高度380px
• 点击图片可跳转到对应作品详情页
• 每日自动更新，无需人工干预
• 内置多图床支持、按需加载图片，极低资源消耗
• 提供API服务，含有更新日期、缩略图url及详情页url

如何部署

本博文主要介绍Handsome主题下在主页或时光机右侧边栏部署方法

思路

使用超能小紫提供的链接：https://cloud.mokeyjay.com/pixiv
<div>布局中嵌套<iframe>再进行美化

时光机具体部署

第一步：打开文件

打开时光机模版文件在handsome主题下cross.php如：

第二步：编辑文件

如图所示，在大约137～145行，复制“关于我”的整个<div>便签，删除不必要的部分，插入<iframe>框架，并更改栏目名称。

代码如下：

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

第三步：美化栏目

在以上操作后，会发现尺寸异样或不居中等情况，根据个人需要修改。
我的最终修改如下(效果)：

<div class="panel b-a" align="center">
    <h4 class="font-thin padder"><?php _me("Pixiv每日Top50") ?></h4>
    <iframe src="https://cloud.mokeyjay.com/pixiv" align="absmiddle" frameborder="0" style="width:230px; height:380px;"></iframe>      
</div>

主页具体部署

参照以上，先留个坑，有时间补

相关自定义

自定义尺寸

修改iframe的style属性
推荐宽度240px、高度380px （因为P站缩略图最大就是这个尺寸）

自定义背景颜色

默认的背景颜色是#fff（纯白色），如果你的页面背景颜色与之不符，你可以传参来改变它
例如将上面iframe的src属性的值改为https://cloud.mokeyjay.com/pixiv/?color=f00试试看？
正常情况下背景颜色会变成红色，即#f00。如果颜色没有改变，可能是缓存问题，刷新几次即可
color的值就是CSS内使用的颜色值，可为3或6位16进制字符。无需 # 号

自定义Top数量

你还可以通过limit参数限制图片数量
例如https://cloud.mokeyjay.com/pixiv/?color=f00&limit=10
则可以得到背景为红色的Top10画册

limit参数的范围必须在1-50 之间

API服务

图床缩略图URL+详情页URL（推荐）
Pixiv原始缩略图URL+详情页URL