Bilibili Card【自定义插件】

最近写的博客需要嵌入 B 站视频，最开始用的 B 站的 iframe 代码，但是感觉效果不是很好，于是就写了一个 B 站卡片插件，效果如下：

05:30

林志炫 0NEtake2.0《我忘了我已老去》演唱会 - 北京站。林大仙的《单身情歌》现场手搓版

哔哩哔哩 (゜-゜)つロ 干杯~

视频up@铁打的屁蛋儿

这其实就是一个链接卡片，点击就会跳转到B站网站，去播放对应的视频。 实现起来其实也很容易，主要是卡片的样式，这个就可以去网上找了，有很多的站点都有这个功能，就可以去借鉴一下了😂

定义组件及样式

首先定义一个卡片组件：

export default function BilibiliCard({
    vid = 'BV1NTpBeAE9m',
    title = '哔哩哔哩 (゜-゜)つロ 干杯~',
    desc = '哔哩哔哩 (゜-゜)つロ 干杯~',
    cover = 'https://blog.lichenghao.cn/avatar.svg',
    author = '@铁打的屁蛋儿',
    duration = '05:30'
}) {
    return (
        <div className="margin-vert--md">
            <a
                className="bilibili_box"
                href={`https://www.bilibili.com/video/${vid}`}
                target="_blank"
            >
                <div className="bilibili_cover">
                    <Playsvg className="play_icon" />
                    <img src={cover} />
                    <span>{duration}</span>
                </div>
                <div className="bilibili_info">
                    <div className="title">{title}</div>
                    <div className="desc">{desc}</div>
                    <div className="owner">
                        <span className="tip">视频</span>
                        <Upsvg className="no-lazyload" />
                        <span>{author}</span>
                    </div>
                </div>
            </a>
        </div>
    );
}

然后需要样式来修饰下：

.bilibili_box {
    display: flex;
    justify-content: center;
    border: 1px solid #e0e3ed;
    border-radius: 10px;
    overflow: hidden;
    color: var(--ifm-text-color) !important;
    text-decoration: none !important;
    transition: 0.3s;
    height: 130px;

    &:hover {
        border-color: var(--ifm-color-primary);
    }

    .bilibili_cover {
        width: 200px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            filter: none;
            object-fit: cover;
            margin: 0 !important;
            border-radius: 0 !important;
        }

        .play_icon {
            position: absolute;
            width: 45px;
            height: 45px;
            opacity: 0.8;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        span {
            font-size: 0.8rem;
            position: absolute;
            bottom: 0px;
            right: 5px;
            color: white;
            text-shadow: 0 1px 3px #7a7a7a;
        }
    }

    .bilibili_info {
        padding: 10px 10px 10px 18px;
        line-height: 1;
        width: calc(100% - 200px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
            font-size: 0.9rem;
            letter-spacing: normal;
            // white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: url('https://blog.lichenghao.cn/cursor/link32.png'), pointer !important;
        }

        .desc {
            font-size: 0.8rem;
            margin: 2px 0 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--ifm-secondary-text-color);
        }

        .stat {
            font-size: 0.8rem;
            color: var(--ifm-secondary-text-color);
            svg {
                margin-right: 3px;
                font-size: 1rem;
                width: 0.8rem;
                height: 0.8rem;
                path {
                    fill: var(--ifm-secondary-text-color);
                }
            }

            span {
                font-size: 0.8rem;
                margin-right: 10px;
                display: inline-flex;
                align-items: center;
            }
        }

        .owner {
            display: flex;
            align-items: center;
            line-height: 1;
            font-size: 0.8rem;
            color: var(--ifm-secondary-text-color);
            .tip {
                color: #ff6699;
                border: 1px solid;
                padding: 3px 6px;
                font-size: 0.8rem;
                border-radius: 5px;
                margin-right: 10px;
            }

            svg {
                width: 22px;
                height: 22px;
                border-radius: 20% !important;
                object-fit: cover;
                margin: 0 5px 0 0 !important;
            }
        }
    }
}

[data-theme='light'] .bilibili_box .bilibili_info .stat svg,
[data-theme='dark'] .bilibili_cover {
    opacity: 0.8;
}

注册组件

最后将组件全局注册即可

/**
 * 注册MDX全局组件
 */
import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import BilibiliCard from '../components/MDX/BilibiliCard';

export default {
    // Re-use the default mapping
    ...MDXComponents,
    BilibiliCard
};

使用过方式

然后就可以 mdx 中使用了：

<BilibiliCard 
vid="BV1NTpBeAE9m" 
title="林志炫 0NEtake2.0《我忘了我已老去》演唱会 - 北京站。林大仙的《单身情歌》现场手搓版" 
cover="/img/cover/bilibili/BV1NTpBeAE9m-cover.webp">
</BilibiliCard>

其他插件

可以看到我用的全都是静态的数据，那么你可以通过api利用vid去自动获取视频的相关数据，然后动态加载视频的相关信息，这样的api网上也有。

除此之外，还可以直接利用hexo的一个插件也能实现b站卡片的效果：

hexo-tag-bilibili-card