对于博主这种追番狂魔来说，在博客有一个可以展示实时追番进度的页面是多么美好的一件事情，这不，给力的FengMo大佬就为typecho做了一款插件，可以展示我们在哔哩哔哩追番的列表和实时进度。

先放上几张图片展示效果吧！

image-20210210102721231

image-20210210102834511

博主之前也使用过群友的追番进度页面不过不能显示进度，熊猫小A大佬也做过番组计划的进度展示，但是这款插件是集二者的优点于一身，即支持b站也能显示进度，可谓是一举两得，只是插件的形式存在，样式需要我们为自己的博客主题做自定义的匹配。

如何使用

这里是作者的原文：https://mo66.cn/archives-42.html

这里是插件的仓库的地址：https://github.com/fengmo66/Mo66CnBilifan

喜欢的话记得star哦。

下面我们开始安装，首先下载最新的release，然后我们将此插件解压到插件目录，将插件目录名修改为Mo66CnBilifan,大概像这个样子：

image-20210210103217510

启用插件

到后台启用插件，然后在主题设置内填入本站的uid和cookie。

如何获取uid？

访问：https://space.bilibili.com/ ，登录后地址栏后面的一串数字即为UID

image-20210210104828081

如何获取cookie？

登录之后，按下键盘的F12，然后点击network(网络)，然后选择筛选器下的doc(文档)，然后点击刷新按钮，查看uid所在文件的标头，找到cookie字段复制下来填入即可。

image-20210210105146471

然后重点来了，打开主题根目录目录，新建一个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即可，如下图：

image-20210210104613600

最后的效果可访问：https://blog.kaygb.com/bilibili.html

版权属于：珂泽

本文链接：https://blog.kaygb.com/745.html

本站原创文章均采用 署名-非商业性使用-相同方式共享 4.0 国际 （CC BY-NC-SA 4.0) 进行许可。转载时须注明出处和链接地址。

Office365 微信公众号
最后修改：2021 年 02 月 10 日 03 : 13 PM
© 允许规范转载
如果您觉得我的文章有帮助，请随意赞赏！