Bootstrap同类型卡片内容实现：20个电影卡片是否需单独创建详情页问询

首先明确结论：完全不需要为20部影片分别创建独立HTML文件，这种方案后续维护成本极高，比如要修改详情页公共头部、导航栏样式，你需要批量修改20个文件，效率很低，更推荐你用以下两种实现方案：

方案1：单模板页+URL参数传值（纯静态实现，新手友好） #

你只需要开发1个通用的movie-detail.html模板页即可，实现逻辑非常简单：

• 首页的20个影片卡片跳转链接统一带上影片ID参数，比如《流浪地球2》的卡片跳转地址写为 <a href="movie-detail.html?id=1">，其他影片对应ID从2到20依次设置即可
• 提前把20部影片的名称、详情介绍、演员列表等信息存在一个JS数组里
• 在movie-detail.html中写JS逻辑，先获取URL里的影片ID参数，再匹配对应影片数据，最后动态渲染到页面的对应位置即可

给你一段核心逻辑参考代码：

// 提取URL中的影片ID参数
function getMovieId() {
  const params = new URLSearchParams(window.location.search);
  return params.get('id');
}
const targetId = getMovieId();

// 提前维护所有影片数据，后续加新片只需要往数组里加条目
const allMovies = [
  {
    id: 1,
    title: "流浪地球2",
    desc: "太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新的家园...",
    actors: ["吴京", "刘德华", "李雪健"]
  },
  // 剩余19部影片的信息依次补全即可
];

// 匹配目标影片数据，插入到页面对应DOM节点中
const currentMovie = allMovies.find(item => item.id == targetId);
document.querySelector('#movie-title').innerText = currentMovie.title;
document.querySelector('#movie-desc').innerText = currentMovie.desc;
// 演员列表渲染逻辑同理

方案2：前端路由单页应用（进阶可选） #

如果你后续需要更流畅的交互体验（比如页面切换无需刷新、添加用户收藏、购票状态同步等功能），可以选择用Vue/React等轻量框架配合前端路由实现，整个站点只需要1个HTML入口文件，所有页面内容都通过JS动态渲染，不过这个方案需要一定的框架基础，赶项目的话优先选方案1即可。

如果你的每部影片详情页都有完全独立的定制化结构、没有公共布局，才需要考虑做单独的HTML文件，常规影院详情页场景用上面的方案完全可以覆盖需求。

内容的提问来源于stack exchange，提问作者vesoso4