基于图书数据动态生成页面的现代HTML实现方法有哪些？

方案1：零依赖原生实现（适合小型项目） #

完全不用引入第三方框架，用ES6模板字符串封装页面模板，比你之前手动拼接document.write或者逐个创建DOM元素的写法简洁数倍。
你可以先写一个通用的详情页模板函数，传入对应图书数据直接返回完整的页面HTML：

// 图书详情页模板函数
function getBookDetailPage(bookInfo, bookTitle) {
  return `
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>${bookTitle} - 详情页</title>
    <style>
      .detail-wrap {max-width: 800px; margin: 3rem auto; padding: 0 20px;}
      .title {font-size: 2.2rem; color: #222; margin-bottom: 1rem;}
      .meta {color: #666; line-height: 1.6; margin-bottom: 2rem;}
      .desc {line-height: 1.8; color: #333;}
    </style>
  </head>
  <body>
    <div class="detail-wrap">
      <h1 class="title">${bookTitle}</h1>
      <div class="meta">
        <p>作者：${bookInfo.Author}</p>
        <p>出版年份：${bookInfo.Date}</p>
      </div>
      <div class="desc">${bookInfo.desc || '暂无图书描述'}</div>
    </div>
  </body>
  </html>
  `
}

// 点击图书条目调用逻辑
function openDetail(bookTitle) {
  const targetBook = library[bookTitle]
  if (!targetBook) return
  const newWin = window.open('', 'bookDetail')
  newWin.document.write(getBookDetailPage(targetBook, bookTitle))
  newWin.document.close()
}

如果不需要开新窗口，直接把生成的HTML字符串赋值给当前页容器的innerHTML属性即可，配合hash路由还能实现页面前进后退的原生交互效果。如果需要组件复用，可以用原生Web Components规范封装列表、详情组件，维护起来更方便。

方案2：轻量框架实现（适合中等规模需求） #

如果后续还要扩展搜索、分类筛选、收藏等复杂交互，可以选用现代轻量框架，不用复杂的工程化配置就能快速开发：

• 可以选Vue 3，直接引入生产环境脚本就能用，声明式模板的写法不用手动操作DOM，数据更新后视图会自动同步，列表、跳转逻辑几十行代码就能实现，开发效率比原生高很多。
• 也可以选Svelte、Preact这类更轻量的框架，最终打包出来的产物体积极小，页面加载速度和原生手写的几乎没有差异。

方案3：静态站点生成（适合内容固定的图书站） #

如果你的图书数据不会频繁更新，优先选SSG（静态站点生成）方案，在构建阶段就会遍历你所有的图书JSON数据，自动生成每本图书的静态详情HTML页面。
这类方案生成的页面访问速度最快，SEO效果也最好，只需要写一次详情页模板，工具就会自动批量生成所有单页，最终产物直接放到静态服务器就能运行，不用额外的后端服务支持。常用的工具有Astro、VitePress等，配置门槛很低。

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