<!DOCTYPE html> <html lang="zh-CN"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>B站Wiki图文卡片模板</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

</head> <body>

       <header>

B站Wiki图文卡片模板

此模板允许您创建美观的图文展示卡片，每张卡片包含文字内容和背景图片。模板采用响应式设计，适用于各种设备，并带有优雅的悬停动画效果。

       </header>

科技与未来

探索科技发展的前沿趋势，了解人工智能、量子计算和生物技术如何塑造我们的未来世界。科技改变生活，创新引领未来。

                       作者：科技观察者
                       科技前沿

自然风光

壮丽的山川河流，宁静的森林湖泊。大自然的美景总能让人心旷神怡，忘却城市的喧嚣，回归内心的平静。

                       作者：旅行摄影师
                       自然探索

美食文化

美食是连接人与文化的桥梁。从传统小吃到创新料理，每一道美食背后都有独特的故事和文化内涵。

                       作者：美食研究员
                       美食文化

城市夜景

当夜幕降临，城市展现出另一番景象。霓虹闪烁，车水马龙，城市的夜晚充满了活力和魅力。

                       作者：城市观察家
                       城市风光

历史遗迹

穿越时空的对话，每一处历史遗迹都是人类文明的见证。保护历史遗迹，传承文化遗产，是我们共同的责任。

                       作者：历史学者
                       文化遗产

健康生活

均衡饮食，适量运动，充足睡眠。健康的生活方式是幸福生活的基础，让我们从每一天开始关注健康。

                       作者：健康顾问
                       健康生活

模板使用指南

1

创建模板

在B站Wiki中创建一个名为 Template:ImageCard 的模板页面，内容如下：

 <div class="content">
   <div class="card-title">{{{title}}}</div>
   <div class="card-text">{{{text}}}</div>
   <div class="card-footer">
     <span>作者：{{{author}}}</span>
     <span class="card-tag">{{{tag}}}</span>
   </div>
 </div>

</div>

2

添加CSS样式

在您的Wiki页面中添加以下CSS样式（可放在页面顶部）：

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 25px;
 margin-top: 20px;

}

.text-box {

 position: relative;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0,0,0,0.25);
 height: 280px;
 background-position: center;
 background-size: cover;
 transition: all 0.4s ease;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;

}

.text-box:hover {

 transform: translateY(-10px);
 box-shadow: 0 15px 35px rgba(0,0,0,0.4);

}

.content {

 position: relative;
 padding: 20px;
 background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
 color: white;
 z-index: 2;
 transition: all 0.3s ease;

}

.text-box:hover .content {

 background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);

}

.card-title {

 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 10px;
 color: #fff;

}

.card-text {

 font-size: 1rem;
 line-height: 1.6;
 opacity: 0.9;
 max-height: 80px;
 overflow: hidden;
 transition: max-height 0.4s ease;

}

.text-box:hover .card-text {

 max-height: 200px;

}

.card-footer {

 display: flex;
 justify-content: space-between;
 margin-top: 12px;
 font-size: 0.85rem;
 opacity: 0.7;

}

.card-tag {

 background: rgba(0,161,214,0.7);
 color: white;
 padding: 3px 10px;
 border-radius: 20px;
 font-size: 0.8rem;

}

@media (max-width: 768px) {

 .wiki-container {
   grid-template-columns: 1fr;
 }

} </style>

3

使用模板

在您的Wiki页面中添加以下结构，并按需调用模板：

<div class="wiki-container"> {{ImageCard | image = https://example.com/image1.jpg | title = 卡片标题 | text = 这里是卡片内容，约30-60字 | author = 作者名称 | tag = 分类标签 }} {{ImageCard | image = https://example.com/image2.jpg | title = 另一个标题 | text = 这里是另一段卡片内容 | author = 其他作者 | tag = 其他标签 }}  </div>

模板参数说明

image

卡片的背景图片URL（建议使用800px以上宽度的图片）

title

卡片的标题（建议不超过15字）

text

卡片的主要内容（建议30-60字）

author

内容作者（可选）

tag

分类标签（可选）

       <footer>

B站Wiki图文卡片模板 | 设计：DeepSeek-R1 | 本模板响应式设计，兼容移动设备

悬停卡片可查看完整内容 | 每个卡片高度固定，宽度自适应

       </footer>

</body> </html>

模板:图文卡片/文档

WIKI功能

目录