如何复用代码实现站点动态渲染，避免同结构HTML页面重复开发?

你提到的通过GET参数动态拉取对应剧集数据的方案完全可行。相比维护多套结构完全一致的独立站点，该方案仅需要一套代码即可实现所有剧集内容的展示，后续新增剧集也不需要新增站点，维护成本极低。

1. 调整前端JS逻辑 #

修改你现有的脚本，新增URL参数读取逻辑，动态拼接接口请求地址：

// 读取URL中的GET参数
function getQueryParam(paramName) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(paramName);
}

// 替换为你的实际接口基础地址
const baseApiUrl = 'urlhere';

async function getRating(){
  const showId = getQueryParam('show');
  // 无参数时可设置默认展示内容，也可自行添加参数校验逻辑
  if (!showId) {
    window.location.href = `${window.location.pathname}?show=show1`;
    return;
  }

  // 拼接接口请求地址，将剧集ID作为参数传给后端，请求对应partition的数据
  // 可根据你的接口规则调整传参方式，比如REST风格路径`${baseApiUrl}/${showId}`、或者POST请求放在请求体中
  const response = await fetch(`${baseApiUrl}?partition=${showId}`);
  const data = await response.json();
  const myReviews = data;

  document.getElementById('Name').textContent = myReviews[0].PartitionKey;
  document.getElementById('Genre').textContent = myReviews[0].RowKey;
  document.getElementById('Seasons').textContent = myReviews[0].Seasons;
  document.getElementById('Description').textContent = myReviews[0].Description;
  document.getElementById('Rating').textContent = myReviews[0].Rating;
  document.getElementById('Review').textContent = myReviews[0].Review;
}

// 页面加载完成后自动执行数据拉取
window.addEventListener('load', getRating);

2. 实现剧集切换按钮 #

HTML中的按钮直接绑定跳转逻辑即可：

<button onclick="window.location.href='./index.html?show=show1'">剧集1</button>
<button onclick="window.location.href='./index.html?show=show2'">剧集2</button>
<!-- 新增剧集只需要新增对应按钮即可 -->

3. 后端适配 #

后端接口需要同步改造，支持接收前端传入的partition参数，返回对应分区的剧集数据即可。

• 无刷新切换：可以使用hash模式（地址格式为http://www.test.com/index.html#show1）实现无刷新切换内容，用户体验更好，实现逻辑与GET参数方案基本一致，仅需要将读取window.location.search改为读取window.location.hash即可。
• 前端缓存：如果剧集数量少、数据量小，可以一次性拉取全量剧集数据缓存到前端，用户点击按钮时直接从缓存读取数据渲染，响应速度更快，仅适合数据量不大的场景。
• 静态批量生成：如果需要更好的搜索引擎收录效果、更快的访问速度，可以使用静态站点生成工具根据数据集批量生成所有剧集的独立静态页面，该方案对开发能力要求稍高。

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