短网址源码 发表于 2020-05-07 | 分类于 技术教程 | 暂无评论 ## github地址: [https://github.com/closty/duanwangzhi](https://github.com/closty/duanwangzhi "https://github.com/closty/duanwangzhi") ## 介绍： [](https://github.com/Closty/duanwangzhi)[](https://www.clost.net/default/513.html)短网址是指将任何域名更换成一个`t.cn/xxxx`类的网址。<br>比如将网址[https://www.clost.net](https://www.clost.net "www.clost.net")转化成[https://t.cn/A6wT0J1d](https://t.cn/A6wT0J1d "https://t.cn/A6wT0J1d") <details> <summary> 为什么要转换？</summary> 一方面，直观来说可以将网址变短，比如分享微信的链接，一大串字符会限制你文章字数；另一方面，可以防红，比如你在你的qq分享你的网站，分享过多会导致腾讯 检测并封除域名便会被显示已被拦截等字样，别人以后就只能复制到你的网址在浏览器打开而不能直接在qq内点开。用短网址就可以很好的防止这一点发生。当然这样的操作是要付费的，因为其本质已经起到cdn的作用了，同样简单的修改源码api接口即可使用，请<a href="https://www.clost.net/go/aHR0cHM6Ly90LmNuL0E2QUdHNTJ1" target="_blank" >自行百度</a>。 其实市面上有很多网址缩短源码，但都不够简洁，且需要服务器支撑。如果你喜欢极简风格那就来对了！ </details> ## 演示网址： [s.clost.net](https://s.clost.net "s.clost.net") ### 特点： 1. 极简风格 1. 将网址转换为`https://t.cn/xxx`类格式，其他格式或者自己域名请修改代码的api接口，代码中已有注释。 1. 基于cloudflare的强大功能，无需服务器支撑即可建立短网址网页 ## 教程： ### 前期准备 1. 一个[cloudflare](http://cloudflare.com)账号 1. 拥有自己的域名，[freenom免费申请>>](http://freenom.com "免费申请>>")； ### 正式部署 #### 一、创建cf（cloudflare）的workers <details> <summary> 如何创建cloudflare-workers？</summary>1.进入 <a href=http://cloudflare.com>cloudflare首页<a> ,点击进入workers <br>2.点击创建worker<br> </details> #### 二、编辑worker <details> <summary> 如何编辑cloudflare-workers？</summary>在脚本框内填入<a href=https://github.com/Closty/duanwangzhi/blob/master/短网址代码.html>本项目中以html结尾的代码<a> ；打开后将其中的所有代码复制并粘贴填入cf-worker的编辑框中。 如图所示<br>这时候便可以访问你的worker，只不过域名不是自定义的。不过也可以使用了。地址便是上图代码上侧的地址，如这是我的worker地址。[https://s.clost.workers.dev](https://s.clost.workers.dev "https://s.clost.workers.dev")<br> </details> #### 三、绑定域名 <details> <summary> 如何绑定域名？</summary>1.你需要先将你的域名指定任意一个IP地址，但是必须开启默认的代理模式（黄色的云朵图标点亮状态）。然后点击保存。 <br>2.进入workers界面，添加路由<br>3.添加路由，域名处填写`https://你的域名/*`（注意`/*`两个符号务必加上）,worker选择你刚刚创建的worker<br> </details> ### 大功告成，访问你的域名试试吧！<br>如访问[https://s.clost.net](https://s.clost.net "https://s.clost.net") ## 贡献：[Closty](https://github.com/closty)以及待添加的你，项目开源，有精美ui欢迎来pull ## 原版 addEventListener('fetch', (event) => { return event.respondWith(handleRequest(event.request)); }) const handleRequest = async (request) => { const render = (body) => { return new Response(` <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>T.CN 短网址</title> </head> <body>${body}</body> </html>`.trim(), { status: 200, headers: { 'Content-Type': 'text/html; charset=utf-8' } }); } request = new URL(request.url); if (request.pathname !== '/') return new Response(null, { status: 404 }); if (request.searchParams.has('url')) { const url = request.searchParams.get('url'); const response = await fetch(`http://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=1`); const html = await response.text(); const short = html.match(/http:\/\/t.cn\/\w+/i); const refer = html.match(/\$refer\s+: "(.+?)"/i); if (short && refer) { return render(` 缩短结果：<a href="https://www.clost.net/go/JHtzaG9ydFswXX0=" target="_blank" >${short[0]}</a><br /> 原始网址：<a href="https://www.clost.net/go/JHtyZWZlclsxXX0=" target="_blank" >${refer[1]}</a><br /> <a href="https://www.clost.net/go/Lw==" target="_blank" >返回</a> `); } return render(`请求失败`); } return render(` <form method="GET"> <input name="url" placeholder="URL" /> <button type="submit">压缩</button> </form> `); } ## UI美化版本 addEventListener('fetch', (event) => { return event.respondWith(handleRequest(event.request)); }) const handleRequest = async (request) => { const render = (body) => { return new Response(` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>T.CN 短网址</title> <style media="screen"> body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; } #message h2 { color: rgba(0,0,0,0.6); font-weight: bold; font-size: 14px; margin: 0 0 8px; } #message h1 { color: #ffa100; font-size: 30px; font-weight: 300; margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } } </style> </head> <body> ${body} </body> </html>`.trim(), { status: 200, headers: { 'Content-Type': 'text/html; charset=utf-8' } }); } request = new URL(request.url); if (request.pathname !== '/') return new Response(null, { status: 404 }); if (request.searchParams.has('url')) { const url = request.searchParams.get('url'); const response = await fetch(`http://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=1`); const html = await response.text(); const short = html.match(/http:\/\/t.cn\/\w+/i); const refer = html.match(/\$refer\s+: "(.+?)"/i); if (short && refer) { return render(` <div id="message" align="center"> <center><h1>缩短结果：</h1><a href="https://www.clost.net/go/JHtzaG9ydFswXX0=" target="_blank" >${short[0]}</a></center> <p></p> <center><h1>原始网址：</h1><a href="https://www.clost.net/go/JHtyZWZlclsxXX0=" target="_blank" >${refer[1]}</a></center> <p></p> <a href="https://www.clost.net/go/Lw==" target="_blank" >返回</a> </div> `); } return render(` <div id="message" align="center"> <center><h1>请求失败</h1></center> </div> `); } return render(` <div id="message" align="center"> <center><h1>T.CN 短网址</h1></center> <p></p> <form method="GET"> <input name="url" placeholder="URL" /> <button type="submit">压缩</button> </form> </div> `); }