对于博主这种追番狂魔来说,在博客有一个可以展示实时追番进度的页面是多么美好的一件事情,这不,给力的FengMo大佬就为typecho做了一款插件,可以展示我们在哔哩哔哩追番的列表和实时进度。
先放上几张图片展示效果吧!
博主之前也使用过群友的追番进度页面不过不能显示进度,熊猫小A大佬也做过番组计划的进度展示,但是这款插件是集二者的优点于一身,即支持b站也能显示进度,可谓是一举两得,只是插件的形式存在,样式需要我们为自己的博客主题做自定义的匹配。
如何使用
这里是作者的原文:https://mo66.cn/archives-42.html
这里是插件的仓库的地址:https://github.com/fengmo66/Mo66CnBilifan
喜欢的话记得star哦。
下面我们开始安装,首先下载最新的release,然后我们将此插件解压到插件目录,将插件目录名修改为Mo66CnBilifan
,大概像这个样子:
启用插件
到后台启用插件,然后在主题设置内填入本站的uid和cookie。
如何获取uid?
访问:https://space.bilibili.com/ ,登录后地址栏后面的一串数字即为UID
如何获取cookie?
登录之后,按下键盘的F12,然后点击network(网络),然后选择筛选器下的doc(文档),然后点击刷新按钮,查看uid所在文件的标头,找到cookie字段复制下来填入即可。
然后重点来了,打开主题根目录目录,新建一个bilibili.php
页面模板,首先在开头输入以下内容创建模板:
<?php
/**
* bilifan
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>
然后使用此代码来调用插件内容:
<div class="post-content"id="post-content">
<?php Typecho_Plugin::factory('page_bilifan.php')->navBar(); ?>
</div>
handsome主题可直接使用我做的适配,其余主题可能就需要自己做一下自定义CSS了。
handsome主题适配
对于handsome7.3.1主题,我做了一些匹配,大家可直接复制我的代码来使用:
<?php
/**
* B站追番列表
*
* @version:2.5.0
* @author AyagawaSeirin
* https://github.com/AyagawaSeirin/BilibiliFollowPage
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>
<?php $this->need('component/header.php'); ?>
<!-- aside -->
<?php $this->need('component/aside.php'); ?>
<!-- / aside -->
<!-- <div id="content" class="app-content"> -->
<a class="off-screen-toggle hide"></a>
<main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>">
<div class="hbox hbox-auto-xs hbox-auto-sm">
<!--文章-->
<div class="col center-part">
<?php echo Content::exportPostPageHeader($this,$this->user->hasLogin(),true); ?>
<div class="wrapper-md" id="post-panel">
<?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?>
<!--博客文章样式 begin with .blog-post-->
<div id="postpage" class="blog-post">
<article class="panel">
<!--文章页面的头图-->
<?php echo Content::exportHeaderImg($this); ?>
<!--文章内容-->
<div id="post-content" class="">
<?php Typecho_Plugin::factory('page_bilifan.php')->navBar(); ?>
</div>
</article>
</div>
<!--评论-->
<?php $this->need('component/comments.php') ?>
</div>
</div>
<!--文章右侧边栏开始-->
<?php $this->need('component/sidebar.php'); ?>
<!--文章右侧边栏结束-->
</div>
</main>
<!-- footer -->
<?php $this->need('component/footer.php'); ?>
<!-- / footer -->
然后修改插件目录下的css文件夹下的style.css文件,可直接清空重写:
.Mo66CnBilifanItem{
line-height: 20px;
width: 100%;
overflow: hidden;
display: block;
padding: 10px;
height:120px;
background: #fff;
color: #14191e;
}
.Mo66CnBilifanItem:hover{
color: #14191e;
opacity: 0.8;
filter: saturate(150%);
-webkit-filter: saturate(150%);
-moz-filter: saturate(150%);
-o-filter: saturate(150%);
-ms-filter: saturate(150%);
}
.Mo66CnBilifanItem img{
height:100%;
display:inline-block;
float:left;
margin: 0 5% 0 0!important;
}
.Mo66CnBilifanItem .textBox{
text-overflow:ellipsis;overflow:hidden;
position: relative;
z-index: 1;
height: 100%;
}
.Mo66CnBilifanItem .jinduBG{
height:16px;
width: 100%;
background-color:gray;
display:inline-block;
border-radius:4px;
position: absolute;
bottom: 3px;
}
.Mo66CnBilifanItem .jinduFG
{
height:16px;
background-color:#ff8c83;
border-radius:4px;
position: absolute;
bottom: 0px;
z-index: 1;
}
.Mo66CnBilifanItem .jinduText
{
width:100%;height:auto;
text-align:center;
color:#fff;
line-height:15px;
font-size:15px;
position: absolute;
bottom: 0px;
z-index: 2;
}
@media screen and (max-width:1000px) {
.Mo66CnBilifanItem{
width:95%;
}
}
当然,也可按照自己的喜好进行定制。
接下来,可以为图片添加lazyload
功能,当然,这是可选功能。
打开插件目录下的Plugin.php文件,找到大概77行,将img标签的src
修改为data-original
即可,如下图:
最后的效果可访问:https://blog.kaygb.com/bilibili.html
13 条评论
简直是B站爱好者福利啊
哈哈,是的
效果页:样式优化中,敬请期待。
主题更新了,还没有弄呢
新年好。
新年好哇,新年快乐
一目了然,很直观
自我感觉还是很好看的,哈哈
有没有Hexo?
目前无
Hexo找到插件了
好家伙