为你的博客添加一个“追番列表”独立页面！动态读取噢~

绫川星凛

2019-10-26

dev

B站, 主题, 番剧

诶嘿嘿，给博客添加了个追番列表的独立页面，还是动态读取数据！
已开源并附上使用方法~

本站已更换Hexo，不使用Typecho，但该项目仍然在维护更新且可以使用。过段时间我会开个handsome演示站来演示这个页面。

效果如图：
效果展示

如果你搭建好后想作为演示站点，请在本页面留言回复。

介绍

在你的博客里添加一个“追番列表”独立页面，可以输出你在B站的追番列表。
采用缓存机制，保证速度与性能。
缓存图片支持自定义CDN的URL链接，提升加载速度。
缓存图片支持使用Lazyload载入图片，提升加载速度。
支持自定义隐藏番剧，将不想展示出来的动漫隐藏起来。
配置简单方便，教程通俗易懂。

说在前面

仅支持Typecho的handsome主题。

版本记录

master分支为最新稳定版本，dev分支为开发进度，其他Tag为各个版本。
V2.5.0 - 2019.10.26
V2.0.0 - 2019.10.1
V1.0.0 - 2019.7.13

V2.5.0更新特性：
1.修复主题在透明模式下番剧标题与描述看不清的问题
2.新增Lazyload功能（可选择性开启）
3.新增自定义图片CDN功能（可选择性开启）
4.修复主题在非盒子模型（宽屏模式）下排版显示问题
5.修复细节BUG，减少报错几率

开始使用

项目地址：https://github.com/AyagawaSeirin/BilibiliFollowPage
将文件下载至handsome主题目录

相对于网站根目录的路径：/usr/themes/handsome/

首先请先确保目录（相对于主题目录）/assets/cache/可写！
新建独立页面，自定义模板选择“B站追番列表”
QQ截图20190713172021.png

利用独立页面的自定义字段设置参数：
BilibiliUid：B站UID，必填参数。
Amout：输出数量，最大100，选填参数，默认值为100。
CacheTime：缓存文件更新时间，选填参数，默认值为86400，单位为秒。
HideMedia：不展示的番剧，选填参数，由media_id组成，用英文逗号隔开。
lazyload：是否开启Lazyload，选填参数，默认不开启，若开启则输入值为1。
cdnurl：选填参数，CDN服务器的URL链接，请将缓存目录的所有图片文件上传至您的CDN服务器，然后设置URL链接，必须是完整（带http的）URL地址，到图片目录。比如：https://cdn.example.com/blog/zwzmoe/handsome/assets/cache/BilibiliFollow

QQ截图20191026022645.png
发布页面后即可查看效果。
原创作品，请尊重原作版权~

更新缓存文件方法：删除文件/assets/cache/BilibiliFollow/BilibiliFollow.json（相对于主题目录）

技术细节

数据来源

数据当然是从B站接口获取的了。
接口限制了来源域名，所以使用浏览器发送请求后会被B站服务器拒接，强行修改HEADER的相关参数会被浏览器拦截。
所以无法使用浏览器发送请求，故使用服务器（PHP的cURL方法）来发送请求。
当然假如访问量过大，服务器一直向B站服务器请求，1是会减慢速度，2是高频率的单IP请求可能会被B站服务器发现。所以我采用了缓存策略，大大减少向B站服务器发送请求的次数。

缓存策略

缓存文件路径（相对于主题目录）：/assets/cache/BilibiliFollow/BilibiliFollow.json
会将B站接口返回的数据，加上B站UID、数量、缓存时间参数加入数组，再通过Json格式写入缓存文件。
删除缓存文件即可更新缓存，修改自定义字段里的参数内容也会更新缓存。
当然这里的更新缓存不是立刻更新，而是下次访问时更新缓存。
缓存策略大大减少向B站服务器发送请求的次数，同时加快了速度。
番剧图片也会缓存至服务器内，以解决B站图片防盗链问题。第一次更新缓存时会缓存图片所以耗时较长，建议此次访问由站长完成。后面除非是有新的番剧被订阅，否则更新时不会再缓存图片。
图片加载支持自定义CDN地址以及Lazyload功能，提升加载速度。

前端美化

由于我不擅长前端设计，做出来的这个页面也就勉强能看，你可以自己制作前端效果，最好是可以分享出来~

历史评论 105 条

保留原来的留言与回复。新的讨论请使用下方评论区。

Bhao 2019/07/13 18:21

来啦来啦！！|´・ω・)ノ
1. 皮皮凛 2019/07/13 18:26
  
  @Bhao , ヾ(≧∇≦*)ゝ
Apex 2019/07/13 18:30

赞一个，会转发的
1. 皮皮凛 2019/07/13 18:52
  
  @Apex , φ(￣∇￣o)
ohmyga 2019/07/13 21:37

ppl太强惹，前来资瓷|´・ω・)ノ
1. 皮皮凛 2019/07/13 21:41
  
  @ohmyga , qwq
科星 2019/07/13 22:18

ppl太强了吧
1. 皮皮凛 2019/07/14 01:15
  
  @科星 , |´・ω・)ノ
cnfox 2019/10/02 11:05

插个小旗抽空捯饬 |´・ω・)ノ
Mark 2019/10/03 18:02

有才华的博主，关注了
萌娜 2019/10/10 22:13

我觉得qwq.moe比 best 更好。虽然都没我 moe.blog和 gov.moe好。
1. 凛凛姬 2019/10/10 23:13
  
  @萌娜 , 我酸了。qwq.moe早就被大佬抢了，好的域名太难找了。不过我觉得.best还是有优点的，对于圈外的人来说都不知道moe是什么意思，就不好记了。
肉夹馍 2019/10/21 20:10

博主，插件装好后能用，但一刷新网页就报错，之后就不能用了。我是windows平台的。
1. 凛凛姬 2019/10/21 23:02
  
  @肉夹馍 , 能具体说明一下报错原因吗，就是错误代码
  1. 肉夹馍 2019/10/23 00:28
    
    @凛凛姬 , ( ! ) Notice: Undefined index: post in D:\wamp64\www\usr\themes\handsome\bilibilifollow.php on line 27
  2. 肉夹馍 2019/10/23 00:58
    
    @凛凛姬 , 后来我27行if判断语句小括号中前加了@符号，网页不报错了，但还是首次加载一切正常，一旦刷新页面就异常。显示“加载失败！请刷新再试~”
    1. 凛凛姬 2019/10/23 12:58
      
      @肉夹馍 , 是notice级别的报错。不要修改代码，配置php修改报错级别把notice屏蔽掉即可。您是第一个反馈这个问题的，我会定位错误并改正，大概是代码不严谨造成的。
      1. 肉夹馍 2019/10/24 12:10
        
        @凛凛姬 , 博主，我这边问题还是没找到。怎么排查问题？
        
        凛凛姬 2019/10/24 12:44
        
        @肉夹馍 , 百度搜索“PHP屏蔽notice报错”
        
        肉夹馍 2019/10/24 14:33
        
        @凛凛姬 , 这个notice报错是已经解决了，网页已经不显示这个报错了，只是追番列表页面只能首次加载这个独立页面时能够显示正常的列表，之后就显示“加载失败！请刷新再试~”
        
        凛凛姬 2019/10/24 18:18
        
        @肉夹馍 , 发下你的地址，我看看报错原因。而且不要修改源代码，包括你之前说的在某行if前加@也不要加。
        
        肉夹馍 2019/10/25 13:37
        
        @凛凛姬 , [secret]www.ourprivate.space 密码666[/secret]
        
        凛凛姬 2019/10/25 13:41
        
        @肉夹馍 , 好的，我明天看看
        
        凛凛姬 2019/10/25 13:41
        
        @肉夹馍 , 方便使用QQ联系么
        
        肉夹馍 2019/10/25 13:45
        
        @凛凛姬 , 改错php屏蔽notice错的php.ini文件了。更改后不报错了，谢谢博主了
        
        凛凛姬 2019/10/29 17:07
        
        @肉夹馍 , 新版本更新了，解决了你的问题，也新出了很多功能
於季 2019/11/11 22:35

非常棒，给自己的模板用上了 ::funny:06:: https://bgm.one/acg.html
1. 凛凛姬 2019/12/08 11:25
  
  @於季 , |´・ω・)ノ
洛小依 2019/11/12 17:12

不显示图片，也不知道什么原因
1. 凛凛姬 2019/11/13 08:43
  
  @洛小依 , 发下你的地址，咱来看看
  1. 洛小依 2019/11/13 09:49
    
    @凛凛姬 , 找到问题了，开启lazyload后就会出现无法加载图片的情况。
2. 凛凛姬 2019/11/13 08:46
  
  @洛小依 , 刚刚看了，可以显示呀
白菜包子 2019/11/28 04:53

不知道是我设置有问题还是啥,微博rss和这个追番都是显示加载失败
喵了个咪 2019/12/06 10:05

我百度搜追番插件的，基本都是熊猫的。看了熊猫的，我在想这个页面能不能跟他们一样显示进度呢。请求各界大佬来优化-。-
1. 凛凛姬 2019/12/08 11:24
  
  @喵了个咪 , 那个进度我没搞懂...是观看进度？B站接口返回的观看进度数据格式不好处理，我尽力吧
lsaiah 2020/01/06 16:38

请问cloudflare的CDN Url该怎么填呢？
1. 凛凛姬 2020/01/06 16:49
  
  @lsaiah , 你是全站都用了cloudflare的CDN么，那这个参数是不需要填写的。
  1. lsaiah 2020/01/06 16:51
    
    @凛凛姬 , 是全站CF的CDN，头图是腾讯存储桶的，我也不知道用哪个空着就可以了么？为啥设置好发布了这个页面是空的呢？
    1. 凛凛姬 2020/01/07 11:48
      
      @lsaiah , 发下你的地址看看？
      1. lsaiah 2020/01/07 13:52
        
        @凛凛姬 , 目前只留了BilibiliUid一个字段，仍然报错
        https://www.lsaiah.cn/fanlist.html
lsaiah 2020/01/07 09:56

大佬，追番列表页面报错是什么原因呀？lazyload也报错了我给删了，目前只有Amout，BilibiliUid，CacheTime这三个字段
fanlist.html:474 Uncaught TypeError: Cannot read property 'list' of undefined
at Object.success (fanlist.html:474)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at z (jquery.min.js:4)
at XMLHttpRequest. (jquery.min.js:4)
1. 凛凛姬 2020/01/07 11:48
  
  @lsaiah , 只留BilibiliUid看看
  1. lsaiah 2020/01/10 22:09
    
    @凛凛姬 , 服务器炸了，可能是我同时建站+FQ了
2. 凛凛姬 2020/01/07 11:49
  
  @lsaiah , 不要修改文件代码内容。另外检查缓存目录有没有可写权限。
  1. lsaiah 2020/01/07 13:55
    
    @凛凛姬 , 没有修改过源代码的内容，并且目录及目录下的文件BilibiliFollow.json有777最高权限
    我只把bilibilifollow.php放在根目录了，.gitignore和README.md没有放有影响吗？
    1. 凛凛姬 2020/01/09 22:12
      
      @lsaiah , 你是不是魔改了handsome主题，动了主题的一些文件？
      1. lsaiah 2020/01/10 09:30
        
        @凛凛姬 , 没动啊，魔改是插件跟原来的主题没关系啊
        
        凛凛姬 2020/01/10 13:03
        
        @lsaiah , 。。。。魔改插件就是魔改啊到底还是一样的，可能是魔改插件载入的js文件代码和页面js代码冲突了
        
        lsaiah 2020/01/10 13:08
        
        @凛凛姬 , 那如果我还想用魔改插件还能用这个追番列表吗
        
        凛凛姬 2020/01/10 13:11
        
        @lsaiah , 我周末检查下具体原因吧，最近非常忙没有多少时间
        
        lsaiah 2020/01/10 13:11
        
        @凛凛姬 , 好的，谢谢大佬，ღ( ´･ᴗ･` )比心
        
        凛凛姬 2020/01/10 22:06
        
        @lsaiah , 你的网址522错误，进不去
        
        lsaiah 2020/01/13 09:30
        
        @凛凛姬 , 现在可以访问了，可以帮忙看看吗
        
        凛凛姬 2020/01/13 09:50
        
        @lsaiah , 找到原因了。。。你的B站账号的隐私设置，没有公开追番列表。。。那当然获取不到了。。能不能走点心
        
        lsaiah 2020/01/13 09:56
        
        @凛凛姬 , 大佬666，可以带我一起玩么
        
        凛凛姬 2020/01/13 09:57
        
        @lsaiah , 玩啥
        
        凛凛姬 2020/01/13 09:53
        
        @lsaiah , 把追番列表设置为公开后，删掉缓存Json文件，再刷新重试就可以了
森七 2020/01/10 23:42

为什么要屏蔽掉不是追番的视频，难道会展示收藏的 ::aru:insidious::
1. 凛凛姬 2020/01/11 00:00
  
  @森七 , 没懂你的意思。。。
  是可以屏蔽不想展示的追番的视频啊
  1. 森七 2020/01/11 00:02
    
    @凛凛姬 , 。。。我说的是你文章图里那2个视频
    1. 凛凛姬 2020/01/11 00:03
      
      @森七 , 图里什么2个视频？没懂
    2. 凛凛姬 2020/01/11 00:03
      
      @森七 , 那两个不是视频啊。。。是番剧ID啊。。隐藏的是不想展示的番剧啊。。难道我的介绍不够详细么
      1. 森七 2020/01/11 00:09
        
        @凛凛姬 , 。。。好像我们不在一个频道上，只是想表达我去搜了配图里的id，发现了2个视频而已，并不是在问什么，
        
        凛凛姬 2020/01/11 00:09
        
        @森七 , 那两个数字是番剧ID不是视频ID，参数填写的本来就是番剧ID，参数简介里面也写了的。
污梦 2020/01/30 10:02

不显示图片QAQ
1. 凛凛姬 2020/01/30 10:05
  
  @污梦 , 看看缓存目录有没有写入权限？或者关闭lazyload功能试试
  1. 污梦 2020/01/30 10:06
    
    @凛凛姬 , ojbk
    1. 污梦 2020/01/30 10:12
      
      @污梦 , 解决了
      1. 凛凛姬 2020/01/30 10:43
        
        @污梦 , 好~
污梦 2020/01/31 04:36

CDN 的URL地址如何获取呢(>_<)，如何设置CDN的URL地址呢(>_<)
1. 凛凛姬 2020/02/03 08:51
  
  @污梦 , 这里的CDN是指对象存储那种专门存储静态资源的空间，不是指网站套的CDN。
  URL填写在对象存储空间里图片位置目录的外部URL。
  1. 污梦 2020/02/03 13:46
    
    @凛凛姬 , 就是说用腾讯云的对象存储 ::(疑问) 就行了，然后把文件上传到对象存储里面的文件夹，在用腾讯云的c对象存储的访问域名，就行了对吧
    1. 凛凛姬 2020/02/03 14:00
      
      @污梦 , 嗯嗯是的，差不多是这个意思
      1. 污梦 2020/02/03 14:02
        
        @凛凛姬 , 感谢
Edward 2020/02/05 22:53

感觉blog要是自定义端口的话图片加载不出来，F12之后发现番剧图片链接上面没有端口号，问题是不是出在“$dirPath = __DIR__ ”那行？ :@(吐血倒地)
1. 凛凛姬 2020/02/05 23:29
  
  @Edward , 这。。其他端口的事情我还真没考虑到。。你看着弄吧
  1. Edward 2020/02/05 23:43
    
    @凛凛姬 , __DIR__代表的变量是什么？是主页的网址么 :@(中枪)
    1. 凛凛姬 2020/02/05 23:44
      
      @Edward , __DIR__是PHP文件在服务器内的绝对路径
    2. 凛凛姬 2020/02/05 23:44
      
      @Edward , 你直接把文件路径写死算了，包括你的端口号
      1. Edward 2020/02/05 23:46
        
        @凛凛姬 , 好的我去试试看 :@(赞一个)
      2. Edward 2020/02/20 20:27
        
        @凛凛姬 , emmm 楼上是我
      3. Edward 2020/02/20 20:34
        
        @凛凛姬 , 没事了，lazyload关了就好了😂
  2. Anonymous 2020/02/20 20:26
    
    @凛凛姬 , 我现在把端口号去掉了也还是加载不出来图片，但F12之后把里面图片的链接粘贴出来直接访问倒是可以访问，好奇怪。缓存也清过了。
    1. xinxin 2020/05/28 15:46
      
      @Anonymous , 大佬，你的也自定义端口了，现在也读取不了番剧图片，请问您的问题是怎么解决的？
云上仙乐 2020/02/17 11:52

博主我这里图片加载不出来，你可以帮我看看是什么问题吗？http://www.lc-blog.cn/bz.html
1. 凛凛姬 2020/02/18 11:39
  
  @ , 你用了腾讯云COS？你番剧图片放到了COS上么？图片文件404了
  1. 云上仙乐 2020/02/19 08:43
    
    @凛凛姬 , 现在上传了，还是没有
    1. 凛凛姬 2020/02/19 09:34
      
      @ , 你没上传完全啊。。。你三个番剧就上传了两张图片，另一个番剧的图片没传啊。。我这里能看到两个图片是正常的。。。。
      这么简单可以自己排查的问题，404文件不存在问题。
污梦 2020/03/04 21:44

我好像出问题了，加载失败🙏
Anonymous 2020/04/03 20:38

加载失败
汐念 2020/04/13 08:17

你好博主，我将文件放入handsome目录但为什么添加独立页面时没有显示模板呢
1. 漠然. 2020/06/23 22:02
  
  @汐念 , 怎么解决的求告知
汐念 2020/04/13 08:57

emm,上个问题我已经解决了，可是为什么显示加载失败呢
moozik 2020/04/30 14:56

干的漂亮啊大佬，虽然我不追番只看鬼畜
牛奶小孩 2020/05/05 22:27

貌似现在请求里的pn不能超过已订阅的番剧的数量，否则list是空的。我试了一下应该先获取一遍数量，然后再填入amout。
雨停之後 2020/05/21 21:19

大佬，，有追剧的列表没？
xinxin 2020/05/28 14:20

大佬，我的直接是正在加载，然后一闪就消失了，什么也没加载出来，怎么回事
1. xinxin 2020/05/28 16:06
  
  @xinxin , 现在可以加载出番剧列表了，但是不能显示番剧图片。我看了一下f12，目前网页上图片的加载路径是https://xinxin.ixinxin.xyz/usr/themes/handsome/assets/cache/BilibiliFollow/28228700.jpg。这个路径不对，正确的路径应该是http://xinxin.ixinxin.xyz:90/typecho/usr/themes/handsome/assets/cache/BilibiliFollow/28228700.jpg。我这个地址是http的，端口更改为90了。我看了一下服务器的后台，确实图片也已经下载到目录里了。所以大佬，我应该怎样更改您的代码，才可以正确显示番剧图片呢，我不会写代码。，也不会编程。，兴趣玩家。
  1. xinxin 2020/05/28 17:14
    @xinxin , 可以的大佬，这个问题我刚刚解决了，对于我一个不会写代码的人来说，全靠盲猜，我太难了啊。
    
    解决方法：修改代码中网页在加载番剧图片时候的图片路径。（不会写代码，不懂专业术语，见谅）
    
    源代码如下：
```
<img id="img" <?=($lazyload == "1") ? 'data-original' : 'src';?>="<?=($cdnurl == null) ? '//'.$_SERVER['SERVER_NAME'].'/usr/themes/handsome/assets/cache/BilibiliFollow' : $cdnurl;?>/{media_id}.jpg" alt="{title}" class="seirin-bilibili-follow-img<?=($lazyload == "1") ? ' lazy' : null;?>">'+
```
    修改位置：
```
'/usr/themes/handsome/assets/cache/BilibiliFollow'
```
    修改后的代码，将自己网页的实际路径写进路径，因为我的改成了90端口，所以我把端口也写进去了。
```
':90/typecho/usr/themes/handsome/assets/cache/BilibiliFollow'
```
    仅供遇到相同问题的小伙伴参考。
    
    最后感谢大佬的番剧插件，很喜欢，谢谢大佬。
diyBoy 2020/06/28 13:54

https://blog.ieleven.xyz:63363/index.php/3.html 不知道为什么啥都没有
Onism 2020/07/07 23:33

https://onism.ink/index.php/bilibili.html，加载失败是啥原因，b站的权限都打开了
系统是Centos
1. BlueSky 2020/07/23 04:30
  
  @Onism , 缓存目录权限和设置Amout 默认的100不行，接口有一定限制
  1. 殇芯呐 2020/08/13 21:19
    
    @BlueSky , 刚开始一直加载不出来，结果发现是接口的ps参数限制了数量，好像是限制为了30，到31就不显示了，
xinxn 2020/08/21 15:18

这东西是不是失效了，之前用的好好的，啥没懂，从八月份开始，到现在已经半个月了，打开啥都不显示，也不报错。
1. 污梦~ 2020/08/29 17:44
  
  @xinxn , JSON文件报错，自己去看吧