拆完 WebStackPage：一套没有后端的网址导航静态源码-星海夜航

WebStackPage 是一套网址导航的纯前端静态源码，7300+ star，MIT 许可。它做的事情很窄：把两百多个网站按分类排成卡片，左边一列锚点目录，点一下平滑滚到对应区块。没有登录、没有数据库、没有接口，仓库里连 package.json 都没有。README 的说法是「下载本项目修改内容既可部署上线」，也就是把 HTML 改完丢上静态托管就完事。

是什么

仓库 320 个文件，其中 240 个是 assets/images/logos 下的图标切图（README 注明尺寸 120px×120px），剩下是 CSS/JS 和四个页面：cn/index.html、en/index.html、根目录 index.html、404.html，外加一个装着自定义域名的 CNAME。中英双语就是两份独立 HTML，靠右上角下拉菜单在两份文件之间跳。

数据完全写死在标记里。以中文版为例，27 个 h4.text-gray 分组标题、242 张卡片，每张卡片是一段固定结构的 div：onclick 里 window.open 目标地址，img 用 data-src 指向本地图标，strong 是站名，p.overflowClip_2 是一句话描述。

它没做到的部分同样明确：整页没有 form 也没有 input，即没有搜索框；没有分类过滤，没有链接存活检测，图标要自己裁好放进去。README 承认静态版只是「最简单快速上线」的一条路，另外列了十几种社区做的后台方案（WordPress 主题、Laravel、Hugo、Jekyll、Java、Go、Vue 等），链接都在 README 里，用法各自看对应文档。

技术栈与部署

Bootstrap 3 栅格（bootstrap.css 里还带着 normalize 3.0.2）+ jQuery 1.11.1 + 一套叫 Xenon 的主题 CSS（拆成 xenon-core / components / forms / skins 四个文件），导航站自己的样式只有 nav.css 一个文件。脚本方面：resizeable.js 监听断点变化来收放侧栏，joinable.js 文件头自述是把 autosize 等几个小脚本合成一个文件减少请求次数，动画靠 TweenMax，图片懒加载用 lozad，页面里一句 lozad().observe() 就开起来。

没有构建这一步。README 没给任何命令，仓库里没有 package.json、没有 Dockerfile、没有 Node 版本要求，这部分 README 没写，得自己试。

# 下面不是 README 里的命令，README 只说下载后改内容即可部署
git clone https://github.com/WebStackPage/WebStackPage.github.io.git
cd WebStackPage.github.io
python3 -m http.server 8080     # 本地看一眼，浏览器开 /cn/index.html
# 上线：整个目录丢到任意静态托管；改站点内容就是改 cn/index.html 里的卡片

值得抄的三点

零后端带来的批量开站成本。整站内容等于一个 HTML 文件：复制目录、替换卡片、换个域名，就是另一个站（白标，即只换品牌和域名的同款站）。十几个站也不额外需要服务器和数据库，这是它 README 敢写「也可以做与导航无关的网站」的底气。
卡片骨架可以直接当渲染模板逆向。固定 div + col-sm-3 四列栅格 + 分组锚点 id，任何后端只要按这个骨架输出字符串就能出兼容页面。卡片观感也全在骨架里：nav.css 把 .box2 高度固定为 86px，描述超出由 overflowClip_2 截断，hover 时 translateY(-6px) 做浮起，照抄就有整齐的排版节奏。将来要加后台，第一步就是把那 242 段 div 抽成 JSON 再模板化，不用重新设计前端。
侧栏锚点 + jQuery animate 平滑滚动 + lozad 懒加载这套组合，是纯静态页里性价比最高的做法：240 张图标不一次性请求，移动端靠 Xenon 的 collapsed 类收起侧栏，全程只用 jQuery，没有框架代码，也不用打包工具。

别踩的坑

每个页面的 head 里硬编码了 Google AdSense 客户号、百度统计 hm.js 站点码，404.html 里还有 Google Analytics 的跟踪 ID。直接 fork 上线，统计数据和广告归属都指向原作者。README 没提这件事，删干净得自己逐页检查。
图标全本地切图，新增一条链接必须自备同名 PNG，否则落到 logos/default.png。README 给了整套图标的 Sketch 源文件（要求 Sketch 版本高于 50.2），但没有图标命名与新增流程的说明。
资源路径写死成 ../assets/...，页面必须待在 cn 或 en 这一层；把 index.html 挪到别的目录层级，样式和图标会整片 404。
README 顶部专门声明：本项目没有任何 Pro / 付费版本，市面有用相似名义售卖的导航主题，与它无关。判断真假只能靠仓库地址，别只看名字。