纯静态html网站需用javascript动态注入导航栏以实现自动同步和当前页高亮。通过js/nav-loader.js统一管理navhtml并匹配window.location.pathname，同时确保语义化结构与可访问性。

纯静态 HTML 网站没法自动同步导航栏，必须靠客户端脚本动态注入，否则每改一个菜单项就得手动更新所有 HTML 文件。

为什么不能直接复制粘贴到每个页面

硬编码 <nav><ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul></nav> 到每个 HTML 文件里，看似简单，但只要新增一个菜单项或改个链接，就得逐页打开、查找、替换——漏改一页，导航就断；路径多斜杠（/about/ vs /about）或哈希路由（/#projects）还会导致当前页高亮失效。这不是“能用”，是“迟早出事”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

用 JavaScript 动态加载 navHTML 字符串

在 js/nav-loader.js 里定义导航 HTML 内容，再让所有页面统一加载它。这是静态站点最轻量、无后端依赖的方案。

• 创建 js/nav-loader.js，内容为：

  const navHTML = `<nav aria-label="主菜单"><ul>
  <li><a href="/">首页</a></li>
  <li><a href="/about">关于</a></li>
  <li><a href="/services">服务</a></li>
  </ul></nav>`;document.querySelector('header').innerHTML = navHTML;

• 所有 HTML 页面的 <header></header> 标签必须存在且唯一，否则 document.querySelector('header') 会找不到或选错位置
• 脚本必须放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！