槐序二三煊

Handsome部署Pixiv每日Top50小部件
Head Pic:[【オリジナル】「tragic heroine」/「純粋」的插画 [pixiv]](https:...
扫描右侧二维码阅读全文
02
2019/05

Handsome部署Pixiv每日Top50小部件

Head Pic:[【オリジナル】「tragic heroine」/「純粋」的插画 [pixiv]](https://www.pixiv.net/member_illust.php?mode=medium&illust_id=74016100)
原项目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>

主页具体部署

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

相关自定义

自定义尺寸

修改iframestyle属性
推荐宽度240px、高度380px (因为P站缩略图最大就是这个尺寸)

自定义背景颜色

默认的背景颜色是#fff(纯白色),如果你的页面背景颜色与之不符,你可以传参来改变它
例如将上面iframesrc属性的值改为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

Last modification:May 3rd, 2019 at 03:19 pm
如果你觉得有用,可以赞赏

Leave a Comment

One comment

  1. 槐序二三     MacOS /    Google Chrome

    UserAgent测试