对于博主这种追番狂魔来说,在博客有一个可以展示实时追番进度的页面是多么美好的一件事情,这不,给力的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

微信公众号
最后修改:2021 年 02 月 10 日 03 : 13 PM
如果您觉得我的文章有帮助,请随意赞赏!