88531.cn 全站导航页 使用教程

它是什么、适合谁

这是 88531.cn 的全站导航页：把 21 个自有站点按 6 大分类收在一个网页里，点一下就到，不用记域名。适合两类人——一是每天要在这堆站点之间来回切换的站长本人，二是在做「个人/团队站点矩阵」、想给自己的子域名们配一个统一门面的开发者。

它最大的特点是轻：纯静态单文件，没有广告、没有第三方统计、没有追踪脚本，打开即用；手机上会自动把左侧分类收成一条竖排窄栏，内容区不受挤压。

快速开始

在线直接用，什么都不用装：

https://nav.88531.cn/

想先在本地看效果，把仓库拉下来用浏览器打开即可：

git clone http://127.0.0.1:3200/jinghui/site-nav.git
cd site-nav
# 直接双击 index.html，或在浏览器地址栏打开该文件

常用操作

1. 搜索站点：在页面顶部搜索框输入名称、域名或描述关键字，卡片实时过滤；没有匹配结果的分类会自动隐藏。
2. 按分类跳转：点击左侧（桌面 212px / 手机 54px）竖栏里的分类名，页面平滑滚动到对应分组；滚动浏览时侧栏会自动高亮当前所在分类。
3. 打开与复制链接：点卡片直达站点；卡片自带「复制」按钮，一键把链接放进剪贴板，长域名会自动省略显示，鼠标悬停域名可看完整链接。
4. 明暗切换：主题跟随系统 prefers-color-scheme，在系统设置里切换深色/浅色模式即可，页面会同步变化。
5. 手机使用：屏幕宽度 ≤900px 时侧栏收成窄条、分类文字竖排；≤560px 时卡片变单列，无需横向滑动。

常见问题

• 卡片上的图标为什么是 emoji 而不是网站 logo？ 图标直接加载各站自己的 /favicon.ico，站点没有 favicon 或加载失败时，自动回退到内置 emoji。这是有意为之：不依赖第三方图标服务，站点矩阵离线也能正常显示。
• 某个卡片点了没反应 / 显示「接口」徽标？ 部分卡片是接口类地址（例如二维码接口），浏览器直接访问可能返回 403 属正常情况，需要在程序里调用而不是当网页打开。
• 统计数字和卡片数量对不上？ 页面顶部的站点数 / 在线数是写在页面里的统计值，由维护者在增删站点时同步更新。如果你 fork 了本项目自己加站点，记得一并更新 stTotal、stLive 等初始值。
• 新增一个自己的站点要改哪里？ 改 index.html 底部 <script> 中的 SITES 数组即可，格式为 {cat, icon, name, host, path, live, desc}；改完用 node --check 确认语法（对象末尾漏逗号会让整页渲染为空），再覆盖部署。
• 深色模式能强制吗？ 目前跟随系统，不提供页内开关；需要固定一种配色的话要在源码层面调整。

更新与版本

以下为 CHANGELOG.md 最近记录：

• v1.6.0：新增「自建 Gitea 代码托管」gitea.88531.cn（归入「代码与博客」），共 22 站 / 6 分类；新增 CHANGELOG 与 README；首次推送自建 Gitea 并打标签。
• v1.5.0：手机端导航改为窄条竖排文字（writing-mode: vertical-rl，仅占 54px，内容区加宽 72px）；底部新增版权信息；新增 tv.88531.cn、it.88531.cn，共 21 站 / 6 分类；修复新增站点缺逗号导致整页空白、长域名挤歪复制按钮两个问题。
• v1.4.0：分类导航改为左侧固定竖栏，滚动自动高亮（IntersectionObserver），搜索时同步隐藏无结果的分类项。