【前端】link-jump：一个纯静态的长短链跳转工具
自己写的一个网页跳转中转页：长链接、短链接都能跳，纯静态无需后端，扔到 GitHub Pages 就能用。
平时在博客和群里发外链的时候，一直想要一个「中转页」：先停几秒，告诉对方要跳到哪里去，再自动跳走。既显得不那么生硬，也能顺手提醒一句「注意辨别网址」。
市面上的短链服务要么要注册、要么要服务器，于是干脆自己撸了一个 —— link-jump，纯 HTML + CSS + JS，零依赖、零后端，推到 GitHub Pages 就能跑 (・ω・)✎
它能干什么
一句话：根据 URL 参数判断是长链还是短链，倒计时结束后自动跳转。
| 模式 | 访问方式 | 行为 |
|---|---|---|
| 长链接 | index.html?t=https://example.com | 5 秒倒计时 + 强制风险提示 |
| 短链接 | index.html?s=example | 读取 ls/example.json，3 秒倒计时跳转 |
| 非法参数 | 其它 | 跳到 404 沙漠彩蛋页 |
长链模式适合临时分享一个完整网址，短链模式适合把常用的几个地址固定下来，比如把自己的主页、图床、网盘做成好记的短码。
怎么用
新增一个短链
不用动任何源码，在 ls/ 目录下新建一个 识别码.json 就行，识别码就是 ?s= 后面跟的那串字符：
1
2
3
4
{
"name": "站点展示名称",
"link": "https://目标链接"
}
比如新建 ls/blog.json，之后访问 index.html?s=blog 就会跳到你填的地址。
长链接的注意事项
长链是整条 URL 直接拼在 ?t= 后面的，所以如果目标地址里带 ?、&、# 这类字符，记得先做一次 URL 编码，否则会被当成参数截断：
1
2
3
4
5
# 原始链接
https://example.com/search?q=abc&from=blog
# 编码后
index.html?t=https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dabc%26from%3Dblog
随手用浏览器控制台敲一句 encodeURIComponent(url) 就能拿到。
部署
GitHub Pages 三步搞定：
- Fork 或克隆本仓库
- 仓库
Settings→Pages→Source选择main分支根目录 - 访问
https://<用户名>.github.io/<仓库名>/
想用 Vercel / Netlify 也行，导入仓库直接部署，不需要任何额外配置。
几个小细节
做的时候塞了点自己喜欢的玩意：
- 自动主题：按本地时间 19:00–07:00 自动切深色，其它时间浅色，不用点按钮
- DNS 预解析：动态插入
dns-prefetch标签提前解析目标域名，3 秒超时自动销毁，跳转能快一点 - 加载动画：短链读配置的时候有 CSS 转圈动画 + 文字提示，不会白屏干等
- 404 彩蛋：沙漠主题的沉浸式页面，停留超过 60 秒文案会变，每次随机从
wordbank.json里抽提示词
倒计时时长、预解析超时、预解析域名这些都可以改，全在 assets/js/main.js 顶部：
1
2
3
4
var LONG_DELAY = 5; // 长链倒计时（秒）
var SHORT_DELAY = 3; // 短链倒计时（秒）
var PREFETCH_TIMEOUT = 3000; // DNS 预解析超时（毫秒）
var PREFETCH_HOSTS = [ 'gcore.jsdelivr.net' ];
已知的坑
老实说，这项目目前还有几个硬伤，用之前最好心里有数：
- 纯静态方案做不了路径美化，短链只能是
?s=code这种查询参数形式，/s/code那种短地址实现不了 - 长链模式没有做域名白名单 / 黑名单，理论上存在开放重定向的风险，公共部署的话建议自己加一层过滤
- 短链靠手动维护 JSON 文件，量大了会比较麻烦，没有后台管理界面
前两条算是架构上的取舍：不要后端，就得接受这些。第三条……等哪天真的用不过来了再说吧 😂
相关链接
- 项目地址：https://github.com/riluo-ya/link-jump
- 在线页: https://linkgo.bot.cd/
- 在线介绍页：仓库里的
index-intro.html
有问题或者想法欢迎提 Issue，也欢迎顺手点个 Star ⭐