自从typecho后就一直没有找到b站追番的主题插件,于是前几天就下定决心自己写一个bilibili追番插件。今天刚刚写完项目已经放到github上面了,需要的可以去下载,下面是安装教程

码云:https://gitee.com/mo_66/Mo66CnBilifan.git

安装&使用

安装方式

将文件解压后将文件夹重命名为Mo66CnBilifan

上传到网站的/usr/plugins目录下

登录博客后台:控制台-插件-将Mo66CnBilifan插件启用

设置方式

点击插件设置,将你b站的uid输入进去保存

然后进入你的主题目录下/usr/themes/主题/

不管是独立页面还是要插入到其他页面,方式都差不多

我这里用独立页面,新建一个page_bilifan.php的文件,然后在文件中编辑,将你主题的page模板粘贴进去。接着找到合适的位置,将下面的代码粘贴进去即可

<div class="post-content"id="post-content">
    <?php Typecho_Plugin::factory('page_bilifan.php')->navBar(); ?>
</div>

handsome主题用户

这兼容页面据说是handsome客服给的,好像可以直接兼容,handsome用户们可以试试

  1. 在handsome主题目录下新建文件:page_bilifan.php
  2. 将下面的代码全部复制到page_bilifan.php文件中保存
<?php
/**
 * bilibili 追番
 *
 * @package custom
 */

/**
 * 本独立页面代码来自:https://mo66.cn/archives-42.html
 * 仅仅做了与handsome主题的兼容,感谢原作者
 */
?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('component/header.php'); ?>

<!-- aside -->
<?php $this->need('component/aside.php'); ?>
<!-- / aside -->

<style>
    .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%;
        }
    }
</style>
<!-- <div id="content" class="app-content"> -->
<a class="off-screen-toggle hide"></a>
<main class="app-content-body <?php echo 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="single-post panel">
                        <!--文章页面的头图-->
                        <?php echo Content::exportHeaderImg($this); ?>
                        <!--文章内容-->
                        <div class="wrapper-lg" id="post-content">
                            <div class="post-content" id="post-content" style="display: flow-root">
                                <?php Typecho_Plugin::factory('page_bilifan.php')->navBar(); ?>
                            </div>
                            <?php Content::postContentHtml($this,
                                $this->user->hasLogin()); ?>
                            <?php Content::pageFooter($this->options) ?>
                        </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 -->

现在还需要在博客中创建一个新的独立页面:点击博客后台的管理-独立页面新增,将模板改成追番列表然后进行发布就可以了

注意事项

哔哩哔哩的追番要设置为公开

README

介绍

支持作者

如果你觉得这个项目对您有所帮助,不妨考虑小额支持我一下
支持作者

版本历史

version:1.0.1(首版本)

支持将b站的追番获取展示到页面上

根据屏幕大小缩放卡片