短网址源码

发表于   |   分类于 技术教程   |   暂无评论

github地址:

https://github.com/closty/duanwangzhi

介绍：

20200430_234331_0000副本.png短网址是指将任何域名更换成一个t.cn/xxxx类的网址。
比如将网址https://www.clost.net转化成https://t.cn/A6wT0J1d
<details>
<summary> 为什么要转换？</summary> 一方面，直观来说可以将网址变短，比如分享微信的链接，一大串字符会限制你文章字数；另一方面，可以防红，比如你在你的qq分享你的网站，分享过多会导致腾讯 检测并封除域名便会被显示已被拦截等字样，别人以后就只能复制到你的网址在浏览器打开而不能直接在qq内点开。用短网址就可以很好的防止这一点发生。当然这样的操作是要付费的，因为其本质已经起到cdn的作用了，同样简单的修改源码api接口即可使用，请自行百度。 其实市面上有很多网址缩短源码，但都不够简洁，且需要服务器支撑。如果你喜欢极简风格那就来对了！
</details>

演示网址：

s.clost.net

特点：

  1. 极简风格
  2. 将网址转换为https://t.cn/xxx类格式，其他格式或者自己域名请修改代码的api接口，代码中已有注释。
  3. 基于cloudflare的强大功能，无需服务器支撑即可建立短网址网页

教程：

前期准备

  1. 一个cloudflare账号
  2. 拥有自己的域名，freenom免费申请>>；

正式部署

一、创建cf（cloudflare）的workers

<details>
<summary> 如何创建cloudflare-workers？</summary>1.进入 cloudflare首页 ,点击进入workers
6010332F-D475-4589-9B0A-19975E67C6EB.png
2.点击创建worker429F89D4-6A33-4B0E-9FEB-03F61974214A.png

</details>

二、编辑worker

<details>
<summary> 如何编辑cloudflare-workers？</summary>在脚本框内填入本项目中以html结尾的代码 ；打开后将其中的所有代码复制并粘贴填入cf-worker的编辑框中。 如图所示填入代码
这时候便可以访问你的worker，只不过域名不是自定义的。不过也可以使用了。地址便是上图代码上侧的地址，如这是我的worker地址。https://s.clost.workers.dev

</details>

三、绑定域名

<details>
<summary> 如何绑定域名？</summary>1.你需要先将你的域名指定任意一个IP地址，但是必须开启默认的代理模式（黄色的云朵图标点亮状态）。然后点击保存。 指定任意一个IP地址并开启代理
2.进入workers界面，添加路由3224A31E-4D2E-4E4D-8D75-CC13EE6E5796.png
3.添加路由，域名处填写https://你的域名/*（注意/*两个符号务必加上）,worker选择你刚刚创建的workerCA8840DA-3830-42FF-A9C2-FE5937B90A21.png

</details>

大功告成，访问你的域名试试吧！
如访问https://s.clost.net

贡献：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="${short[0]}">${short[0]}</a><br />
        原始网址：<a href="${refer[1]}">${refer[1]}</a><br />
        <a href="/">返回</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="${short[0]}">${short[0]}</a></center>
            <p></p>
            <center><h1>原始网址：</h1><a href="${refer[1]}">${refer[1]}</a></center>
            <p></p>
            <a href="/">返回</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>
      `);
    }
添加新评论