如何实现点击侧边栏菜单仅更新主内容不刷新整页，类似MongoDB文档站效果

你的描述非常清晰，没有表述模糊的点，你需要实现的是文档类站点通用的局部无刷新路由渲染效果，仅替换主内容区域、公共布局（头部、侧边栏）不刷新，同时同步URL状态。

可以根据你的站点规模、技术栈选择以下三种实现路径：

1. 原生JS轻量实现（适合小型、功能简单的文档站） #

不需要引入任何前端框架，百行以内代码即可实现核心效果：

• 基础页面结构：入口index.html内置入公共的头部、侧边栏代码，预留主内容容器：

<body>
  <header><!-- 头部导航代码 --></header>
  <aside class="sidebar"><!-- 侧边栏菜单代码 --></aside>
  <main id="doc-content"><!-- 主内容动态插入位置 --></main>
</body>

• 核心逻辑实现：

// 拦截侧边栏链接的默认跳转行为
document.querySelectorAll('.sidebar a').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault()
    const targetPath = link.getAttribute('href')
    // 加载对应内容
    loadDocContent(targetPath)
    // 同步更新浏览器URL
    history.pushState({ path: targetPath }, '', targetPath)
  })
})

// 异步加载指定HTML内容插入主容器
async function loadDocContent(path) {
  try {
    const res = await fetch(path)
    const htmlContent = await res.text()
    document.getElementById('doc-content').innerHTML = htmlContent
    // 可选：此处补充新加载内容的后续处理逻辑，比如代码高亮、锚点跳转绑定等
  } catch (err) {
    document.getElementById('doc-content').innerHTML = '<p>页面加载失败，请刷新重试</p>'
  }
}

// 适配浏览器前进/后退操作
window.addEventListener('popstate', e => {
  e.state?.path && loadDocContent(e.state.path)
})

// 页面首次加载时，直接加载当前URL对应内容
window.addEventListener('load', () => {
  loadDocContent(window.location.pathname)
})

• 服务端配置补充：需要配置服务器将所有路径的请求都重定向到入口index.html，避免用户直接访问子路径时返回404，示例Nginx配置：

location / {
  try_files $uri $uri/ /index.html;
}

2. 静态文档生成器内置实现（适合绝大多数文档站场景） #

不用手动写路由逻辑，直接用成熟的文档生成工具即可，这类工具默认就支持你要的交互效果：

• VitePress：Vue生态轻量文档生成工具，支持自定义头部、侧边栏，开箱即用代码高亮、搜索等文档常用功能
• Docusaurus：React生态文档生成工具，和MongoDB官方文档站技术栈一致，支持多版本管理、国际化等高级功能
• MkDocs：Python生态轻量文档生成工具，搭配Material主题开启SPA模式后即可实现对应效果

3. 前端框架路由实现（适合有复杂自定义功能的文档站） #

如果你的站点需要支持登录、文档评论、在线调试等复杂交互，可以用前端框架搭配路由实现：
将头部、侧边栏封装为公共布局组件，路由配置时仅嵌套渲染主内容区域即可，示例Vue Router配置：

const routes = [
  {
    path: '/',
    component: () => import('./layouts/BaseLayout.vue'), // 公共布局，包含头部、侧边栏
    children: [
      { path: 'intro', component: () => import('./docs/intro.md') },
      { path: 'install', component: () => import('./docs/install.md') },
      // 其余文档路由依次配置
    ]
  }
]

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