利用短代码在hugo博客中加入bilibili播放器插件
王叨叨在
开源Bilibili播放器插件
一文中，分享了一个Typecho插件，用于将Bilibili默认播放器替换为HTML5移动端播放器，并提供更多自定义选项。
基于他的源代码，考虑将其移植到Hugo中，并通过短代码来实现bilibili视频的调用。
短代码是Hugo的一项强大功能，允许我们在Markdown中嵌入HTML片段，实现复杂的布局和功能。
王叨叨的Typecho插件主要通过以下方式工作：
通过正则表达式匹配和替换Bilibili播放器iframe
提供丰富的配置选项（宽度、高度、自动播放、弹幕开关等）
替换默认播放器为HTML5移动端播放器，提升用户体验
在上述的基础上，借助AI实现了一定程度的高度自适应和自定义封面功能，为什么说是一定程度上的高度自适应，其实是新加入了ratio参数，即明确了视频宽高比，再根据视频宽高比，使用 padding-bottom 技巧实现真正的宽高比自适应。
示例
.bilibili-player-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin: 1rem 0;
border-radius: 8px;
overflow: hidden;
background-color: #f5f5f5;
}
.bilibili-player-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
.bilibili-custom-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
z-index: 10;
transition: opacity 0.3s ease;
}
.bilibili-custom-cover:hover .bilibili-play-button {
transform: scale(1.1);
background-color: #00a1d6;
}
.bilibili-play-button {
width: 70px;
height: 70px;
background-color: rgba(0, 161, 214, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.bilibili-play-button::after {
content: "▶";
margin-left: 4px;
}
.bilibili-player-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 16px;
z-index: 5;
border-radius: 8px;
}
.bilibili-player-loading.hidden {
display: none;
}
@media (max-width: 768px) {
.bilibili-play-button {
width: 60px;
height: 60px;
font-size: 20px;
}
}
视频加载中...
function loadBilibiliPlayer(playerId) {
const playerWrapper = document.getElementById(playerId);
const cover = playerWrapper.querySelector('.bilibili-custom-cover');
const iframe = playerWrapper.querySelector('iframe');
const loading = playerWrapper.querySelector('.bilibili-player-loading');
if (iframe && iframe.hasAttribute('data-src')) {
loading.classList.remove('hidden');
iframe.src = iframe.getAttribute('data-src');
iframe.style.display = 'block';
cover.style.opacity = '0';
iframe.onload = function() {
loading.classList.add('hidden');
setTimeout(function() {
cover.style.display = 'none';
}, 300);
};
}
}
document.addEventListener('DOMContentLoaded', function() {
const players = document.querySelectorAll('.bilibili-player-wrapper');
players.forEach(function(player) {
const cover = player.querySelector('.bilibili-custom-cover');
const iframe = player.querySelector('iframe');
if (!cover && iframe && iframe.hasAttribute('data-src')) {
iframe.src = iframe.getAttribute('data-src');
iframe.style.display = 'block';
}
});
});
具体实现
创建短代码文件
在Hugo项目的 layouts/shortcodes/ 目录下创建 bilibili.html 文件：
📝 发布时间：2025-11-02 | 🕷️ 采集时间：2025-11-02 19:05
苏公网安备32100302011680号