静态生成页面侧边栏链接切换动画及加载方案咨询

• 优先做页内数据内置，不用集中维护大JSON
  静态页面生成阶段，直接把当前页对应的侧边栏链接数据嵌入到当前页面的代码里，用script标签定义为当前页的全局变量即可，示例写法：

  <script>
  // 每个页面单独内置自己的侧边栏数据，不需要全局汇总
  window.__CURRENT_SIDEBAR__ = [
    { title: "章节1", path: "/chapter1" },
    { title: "章节2", path: "/chapter2" }
  ]
  </script>
  

  这种方案不需要额外的网络请求，也不用维护全局的大JSON文件，每个页面的侧边栏数据和页面本身绑定，更新的时候也只要改对应页面的生成逻辑即可。
• 切换动画逻辑实现
  • 如果用SSG框架（比如Hugo、Next.js、Nuxt、VitePress等），直接调用框架提供的页面切换生命周期钩子：页面切换触发时先给当前侧边栏加移出动画类，等动画结束、新页面加载完成后，读取新页面内置的__CURRENT_SIDEBAR__数据渲染新的侧边栏，再加移入动画类即可。
  • 如果是无框架纯静态页，给所有站内跳转链接加点击事件拦截，点击后先执行侧边栏移出动画，动画结束后再走正常跳转逻辑，新页面加载完成后自动触发侧边栏的入场动画即可。
• 动画可以直接用CSS实现，无需复杂JS逻辑
  给侧边栏容器定义基础过渡属性，再写两个状态类控制显示隐藏，示例：

  .sidebar {
    transition: all 0.3s ease;
  }
  .sidebar.slide-out {
    transform: translateX(-110%);
    opacity: 0;
  }
  .sidebar.slide-in {
    transform: translateX(0);
    opacity: 1;
  }
  

• 若不想在页内嵌入数据，可以单独拆分小JSON文件
  按页面路径命名单独的侧边栏数据文件，比如/sidebar-data/home.json、/sidebar-data/docs.json，页面切换时只拉取当前页对应的小JSON文件，体积远小于全局汇总的大JSON，加载速度基本无感知，也不会有集中维护大文件的问题。

纯静态站点部署拆分的小JSON时，可以给JSON配置较长的缓存时间，避免重复请求浪费流量。

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