测试：修订间差异
来自SOKA CAFE
小 |
小 |
||
| 第1行： | 第1行： | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="zh-CN"> | <html lang="zh-CN"> | ||
| 第241行： | 第223行： | ||
</div> | </div> | ||
</div> | </div> | ||
</body> | |||
</html> | |||
<!DOCTYPE html> | |||
<html lang="zh-CN"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>B站视频卡片</title> | |||
<style> | |||
*{margin:0;padding:0;box-sizing:border-box} | |||
body{background:#f5f7fa;padding:20px;font-family:"Microsoft YaHei",sans-serif;display:flex;justify-content:center} | |||
.video-card-container{width:100%;max-width:80vw;margin:0 auto} | |||
.video-card{background:white;border-radius:4px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08)} | |||
.bilibili-container{position:relative;width:100%;padding-top:56.25%;background:#000} | |||
.bilibili-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none} | |||
.info-section{padding:18px} | |||
.user-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px 0} | |||
.user-left{display:flex;align-items:center;gap:10px} | |||
.avatar{width:36px;height:36px;border-radius:50%;background:#ff4d85;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold} | |||
.username{font-size:15px;font-weight:600;color:#18191c} | |||
.detail-link{background:#ff4d85;color:white;text-decoration:none;border-radius:20px;padding:5px 16px;font-size:13px} | |||
.title{font-size:17px;font-weight:700;color:#18191c;line-height:1.5;margin-bottom:10px} | |||
.metadata{font-size:12.5px;color:#8e8e93;margin-bottom:14px} | |||
.tags{display:flex;flex-wrap:wrap;gap:8px} | |||
.tag{background:#f0f2f5;color:#000;border-radius:14px;padding:3px 10px;font-size:12px;text-decoration:none} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="card"></div> | |||
<script> | |||
// 1. 在这里改你要的视频信息 | |||
const videoData = { | |||
bvid: "BV1eXSMYVEcc", | |||
title: "【创价】久本五月病 【久本信仰祭16】", | |||
upName: "H娘", | |||
avatarText: "H", | |||
meta: "sm16495736 • 2016年5月3日 00:06 (UTC+9)", | |||
tags: [ | |||
{ name: "宗教都市祭", link: "/wiki/宗教都市祭" }, | |||
{ name: "久本投稿祭'25", link: "/wiki/久本投稿祭'25" }, | |||
{ name: "エア本", link: "/wiki/エア本" } | |||
] | |||
}; | |||
// 2. 模板函数（不用动） | |||
function buildCard(data) { | |||
const tagHtml = data.tags.map(t => | |||
`<a href="${t.link}" class="tag">${t.name}</a>` | |||
).join(''); | |||
return ` | |||
<div class="video-card-container"> | |||
<div class="video-card"> | |||
<div class="bilibili-container"> | |||
<iframe src="https://player.bilibili.com/player.html?bvid=${data.bvid}&page=1" allowfullscreen></iframe> | |||
</div> | |||
<div class="info-section"> | |||
<div class="user-info"> | |||
<div class="user-left"> | |||
<div class="avatar">${data.avatarText}</div> | |||
<span class="username">${data.upName}</span> | |||
</div> | |||
<a href="https://www.bilibili.com/video/${data.bvid}" target="_blank" class="detail-link">+ 详情页</a> | |||
</div> | |||
<div class="title">${data.title}</div> | |||
<div class="metadata">${data.meta}</div> | |||
<div class="tags">${tagHtml}</div> | |||
</div> | |||
</div> | |||
</div>`; | |||
} | |||
// 3. 渲染到页面 | |||
document.getElementById('card').innerHTML = buildCard(videoData); | |||
</script> | |||
</body> | </body> | ||
</html> | </html> | ||
2026年3月20日 (五) 08:52的版本
<!DOCTYPE html>
【创价】久本五月病 【久本信仰祭16】
<!DOCTYPE html>
