介绍

typecho就一直没有找到b站追番的主题插件。今天刚刚发现就用上了,需要的可以去下载,下面是安装教程

完整效果

安装&使用

安装方式

  1. 将文件解压后将文件夹重命名为Mo66CnBilifan
  2. 上传到网站的/usr/plugins目录下
  3. 登录博客后台:控制台-插件-将Mo66CnBilifan插件启用

设置方式

  • 点击插件设置,将你b站的uid输入进去保存。
  • 还有你B站的Cookies,也输入进去保存。

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

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

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

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

handsome主题用户

  1. 在handsome主题目录下新建文件:page_bilifan.php
  2. 将下面的代码全部复制到page_bilifan.php文件中保存
<?php
/**
 * bilibili 追番
 *
 * @package custom
 */
 
/**
 * 有任何问题请直接来博客提问,看到会回答
 * 感谢原作者的制作,博客地址:
 */
?>
<?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 -->

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

注意事项

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

请输入图片描述

下载地址

此处内容需要评论回复后(审核通过)方可阅读。

最后修改:2021 年 08 月 30 日
如果觉得我的文章对你有用,请随意赞赏