使用 Cloudflare Worker 免费搭建网址导航网站

news2024/11/19 3:45:25

开源项目

GitHub：https://github.com/sleepwood/CF-Worker-Dir/

CloudFlare Worker：https://workers.cloudflare.com/

搭建教程

  1. 首先，进入cloud flare - Worker

截图20200224180010.png

截图20200224180010.png

  1. 在 Cloudflare Worker 管理页面创建一个新的 Worker:

截图20200224180145.jpg

截图20200224180145.jpg

  1. 在Worker编辑页面左边代码:

截图20200224180437.jpg

截图20200224180437.jpg

/**
 *  自定义网站配置 
 */
const config = {
  title: "自定义导航",                 //write your website title
  subtitle: "Cloudflare Workers Dir", //write your website subtitle
  logo_icon: "sitemap",               //select your logo by semantic-ui icon (you can get more msg in:https://semantic-ui.com/elements/icon.html)
  hitokoto: true,                     //use hitokoto or not
  search:true,                        //enable search function
  search_engine:[                     //choose search engine which you use
    {
      name:"百 度",
      template:"https://www.baidu.com/s?wd=$s"
    },
    {
      name:"谷 歌",
      template:"https://www.google.com/search?q=$s"
    },
    {
      name:"必 应",
      template:"https://www.bing.com/search?q=$s"
    },
    {
      name:"搜 狗",
      template:"https://www.sogou.com/web?query=$s"
    }
  ],
  selling_ads: true,                  //Selling your domain or not.(turning on may be helpful for selling this domain by showing some ads.)
  sell_info:{
    domain:"example.com",
    price:500,                        //domain price
    mon_unit:"yen sign",              //monetary unit 
    contact:[                         //how to contact you
      {
        type:"envelope",               //contact type ("weixin","qq","telegram plane","envelope" or "phone")
        content:"info@example.com"
      }
    ]                      
  },
  lists: [                            //Url list
    {
      name:"技术",
      icon:"code",
      list:[
        {
          url:"https://oschina.net/",
          name:"开源中国",
          desc:"程序员集散地"
        },
        {
          url:"https://v2ex.com",
          name:"V2EX",
          desc:"程序员集散地"
        },
        {
          url:"https://csdn.net/",
          name:"CSDN技术社区",
          desc:"程序员集散地"
        },
        {
          url:"https://github.com/",
          name:"Github",
          desc:"程序员集散地"
        },
      ]
    },
    {
      name:"学习",
      icon:"graduation cap",
      list:[
        {
          url:"https://w3school.com.cn/",
          name:"W3school在线教程",
          desc:"程序员集散地"
        },
        {
          url:"https://runoob.com/",
          name:"菜鸟教程",
          desc:"程序员集散地"
        },
        {
          url:"https://segmentfault.com/",
          name:"思否社区",
          desc:"程序员集散地"
        },
        {
          url:"https://jianshu.com/",
          name:"简书",
          desc:"程序员集散地"
        },
      ]
    }
  ]
}
const el = (tag, attrs, content) => `<${tag} ${attrs.join(" ")}>${content}</${tag}>`;

async function handleRequest(request) {
  const init = {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  }
  return new Response(renderHTML(renderIndex(),config.selling_ads? renderSeller() :null), init);
}
addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request))
})

/*通过分析链接 实时获取favicon
* @url 需要分析的Url地址
*/
function getFavicon(url){
  if(url.match(/https{0,1}:\/\//)){
    //return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url.split('//')[1];
    return "https://icon.occ.hk/get.php?url=" + url;
  }else{
    //return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url;
    return "https://icon.occ.hk/get.php?url=http://" + url;
  } 
}

/** Render Functions
 *  渲染模块函数
 */

function renderIndex(){
  const footer = el('footer',[],el('div',['class="footer"'],'Powered by' + el('a',['class="ui label"','href="https://github.com/sleepwood/cf-worker-dir"','target="_blank"'],el('i',['class="github icon"'],"") + 'Cf-Worker-Dir') + ' © Base on ' + el('a',['class="ui label"'],el('i',['class="balance scale icon"'],"") + 'MIT License')));
  return renderHeader() + renderMain() + footer;
}

function renderHeader(){
  const item = (template,name) => el('a',['class="item"',`data-url="${template}"`],name);

  var nav = el('div',['class="ui large secondary inverted menu"'],el('div',['class="item"'],el('p',['id="hitokoto"'],'条条大路通罗马')))
  var title = el('h1',['class="ui inverted header"'],el('i',[`class="${config.logo_icon} icon"`],"") + el('div',['class="content"'],config.title + el('div',['class="sub header"'],config.subtitle)));
  var menu = el('div',['id="sengine"','class="ui bottom attached tabular inverted secondary menu"'],el('div',['class="header item"'],' ') + config.search_engine.map((link,key) =>{
    if(key == 0){
      return el('a',['class="active item"',`data-url="${link.template}"`],link.name);
    }else{
      return item(link.template,link.name);
    }
  }).join(""))
  var input = el('div',['class="ui left corner labeled right icon fluid large input"'],el('div',['class="ui left corner label"'],el('img',['id="search-fav"','class="left floated avatar ui image"','src="https://www.baidu.com/favicon.ico"'],"")) + el('input',['id="searchinput"','type="search"','placeholder="搜索你想要知道的……"','autocomplete="off"'],"") + el('i',['class="inverted circular search link icon"'],""));
  return el('header',[],el('div',['id="head"','class="ui inverted vertical masthead center aligned segment"'],(config.hitokoto ? el('div',['id="nav"','class="ui container"'],nav) : "") + el('div',['id="title"','class="ui text container"'],title + (config.search ? input + menu :"") + `${config.selling_ads ? '<div><a id="menubtn" class="red ui icon inverted button"><i class="heart icon"></i> 喜欢此域名 </a></div>' : ''}`)))
}

function renderMain() {
  var main = config.lists.map((item) => {
    const card = (url,name,desc)=> el('a',['class="card"',`href=${url}`,'target="_blank"'],el('div',['class="content"'],el('img',['class="left floated avatar ui image"',`src=${getFavicon(url)}`],"") + el('div',['class="header"'],name) + el('div',['class="meta"'],desc)));
    const divider = el('h4',['class="ui horizontal divider header"'],el('i',[`class="${item.icon} icon"`],"")+item.name);

    var content = el('div',['class="ui four stackable cards"'],item.list.map((link) =>{
      return card(link.url,link.name,link.desc);
    }).join(""));

    return el('div',['class="ui basic segment"'],divider + content);
  }).join("");
  
  return el('main',[],el('div',['class="ui container"'],main));
}

function renderSeller() {
  const item = (type,content) => el('div',['class="item"'],el('i',[`class="${type} icon"`],"") + el('div',['class="content"'],content));
  var title = el('h1',['class="ui yellow dividing header"'],el('i',['class="gem outline icon"'],"") + el('div',['class="content"'],config.sell_info.domain + ' 正在出售'));
  var action = el('div',['class="actions"'],el('div',['class="ui basic cancel inverted button"'],el('i',['class="reply icon"'],"") + '返回'));

  var contact = config.sell_info.contact.map((list) => {
    return item(list.type,list.content);
  }).join("");
  var column = el('div',['class="column"'],el('h3',['class="ui center aligned icon inverted header"'],el('i',['class="circular envelope open outline grey inverted icon"'],"") + '联系我') + el('div',['class="ui relaxed celled large list"'],contact));
  var price = el('div',['class="column"'],el('div',['class="ui large yellow statistic"'],el('div',['class="value"'],el('i',[`class="${config.sell_info.mon_unit} icon"`],"") + config.sell_info.price)));
  var content = el('div',['class="content"'],el('div',['class="ui basic segment"'],el('div',['class="ui two column stackable center aligned grid"'],el('div',['class="ui inverted vertical divider"'],'感兴趣？') + el('div',['class="middle aligned row"'],price + column))));

  return el('div',['id="seller"','class="ui basic modal"'],title + content + action);
}

function renderHTML(index,seller) {
  return `<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>${config.title} - ${config.subtitle}</title>
      <link href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/gh/sleepwood/cf-worker-dir@0.1.1/style.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.js"></script>
  </head>
  <body>
    ${index}
    ${config.selling_ads ? seller : ''}
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
    <script>
      $('#sengine a').on('click', function (e) {
        $('#sengine a.active').toggleClass('active');
        $(e.target).toggleClass('active');
        $('#search-fav').attr('src',$(e.target).data('url').match(`+/https{0,1}:\/\/\S+\//+`)[0] + '/favicon.ico') ;
      });
      $('.search').on('click', function (e) {
          var url = $('#sengine a.active').data('url');
          url = url.replace(`+/\$s/+`,$('#searchinput').val());
          window.open(url);
      });
      /* 鼠标聚焦时，回车事件 */
      $("#searchinput").bind("keypress", function(){
          if (event.keyCode == 13){
          // 触发需要调用的方法
          $(".search").click();
          }
      });
      $('#menubtn').on('click', function (e) {
          $('#seller').modal('show');
      });
    </script>
  </body>

  </html>`
}

原地址:https://github.com/sleepwood/CF-Worker-Dir/edit/master/index.js

  1. 根据自身需要修改代码内容
  2. Ctrl+s发布 或者 点击Save and deploy

截图20200224180712.jpg

截图20200224180712.jpg

转载申明

转载请注明出处：365文档网

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1210714.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

NCP1654BD65R2G功率因数校正控制器 用于紧凑和坚固的连续导通模式预转换器

NCP1654BD65R2G功率因数校正控制器 用于紧凑和坚固的连续导通模式预转换器

NCP1654BD65R2G是一款高效的同步整流控制器&#xff0c;主要用于DC/DC转换器和LED驱动器等应用。该控制器采用了高性能的反馈控制算法&#xff0c;可以实现高达95%以上的转换效率。此外&#xff0c;NCP1654BD65R2G还具有多种保护功能&#xff0c;如过流保护、过热保护、欠压保护…
阅读更多...
【Linux】软硬链接和动静态库

【Linux】软硬链接和动静态库

软硬链接 软硬链接的区别&#xff1a; **软链接&#xff1a;**是一个独立文件&#xff0c;有自己独立的 inode 和 inode 编号。**硬链接&#xff1a;**不是一个独立的文件&#xff0c;它和目标文件使用的是同一个 inode。硬链接就是单纯的在 Linux 指定的目录下&#xff0c;给…
阅读更多...
根据关键词搜索阿里巴巴商品数据列表接口|阿里巴巴商品列表数据接口|阿里巴巴商品API接口|阿里巴巴API接口

根据关键词搜索阿里巴巴商品数据列表接口|阿里巴巴商品列表数据接口|阿里巴巴商品API接口|阿里巴巴API接口

阿里巴巴也提供了根据关键词搜索商品数据列表的接口&#xff0c;方便开发者根据关键词搜索商品并进行相关操作。 请求参数可以包括&#xff1a; q&#xff1a;搜索关键字 start_price&#xff1a;开始价格 end_price&#xff1a;结束价格 page&#xff1a;页码 cat&#xff1…
阅读更多...
Live800:2023年客服团队管理有哪些思路和方法？

Live800:2023年客服团队管理有哪些思路和方法？

在数字化时代&#xff0c;客服团队成为企业与客户之间的重要桥梁。随着技术不断发展&#xff0c;客服团队管理也在不断进化。到了2023年&#xff0c;最新的客服团队管理将会有哪些思路和方法呢&#xff1f; 一、智能化客服系统 随着人工智能技术的不断发展&#xff0c;智能化客…
阅读更多...
超声波清洗机的工作原理是什么样的？值得入手的超声波清洗机推荐

超声波清洗机的工作原理是什么样的？值得入手的超声波清洗机推荐

超声波清洗机最常见的应该是在眼镜店了吧&#xff0c;眼镜店用来清洗眼镜频率非常高的&#xff01;超声波清洗机在清洁方面也是非常快速、高效的&#xff01;像眼镜党配戴眼镜脏的第一时间就会想到去眼镜店清洗&#xff0c;但也有很多朋友是随便清洗一下就了事了&#xff0c;其…
阅读更多...
大模型的全面回顾，看透大模型 | A Comprehensive Overview of Large Language Models

大模型的全面回顾，看透大模型 | A Comprehensive Overview of Large Language Models

大模型的全面回顾&#xff1a;A Comprehensive Overview of Large Language Models 返回论文和资料目录 论文地址 1.导读 相比今年4月的中国人民大学发表的大模型综述&#xff0c;这篇综述角度更侧重于大模型的实现&#xff0c;更加硬核&#xff0c;更适合深入了解大模型的一…
阅读更多...
运动型蓝牙耳机什么牌子好？市面上热门的运动耳机推荐

运动型蓝牙耳机什么牌子好？市面上热门的运动耳机推荐

​随着生活节奏的加快&#xff0c;越来越多的人开始关注健康和运动。而在运动的时候&#xff0c;佩戴耳机听音乐已经成为了很多人的选择。但是&#xff0c;市面上的运动耳机种类繁多&#xff0c;如何选择一款适合自己的呢&#xff1f;下面&#xff0c;我推荐几款市面上热门的运…
阅读更多...
开源社区团购小程序源码系统 商品管理+订单管理+会员管理 带完整搭建教程

开源社区团购小程序源码系统 商品管理+订单管理+会员管理 带完整搭建教程

社区团购作为一种新型的电商模式&#xff0c;逐渐成为了人们日常生活的一部分。而开源社区团购小程序源码系统&#xff0c;更是受到了广大开发者的热烈欢迎。下面罗峰给大家介绍一款完整的开源社区团购小程序源码系统&#xff0c;包括商品管理、订单管理、会员管理等功能&#…
阅读更多...
LCD液晶屏维修日记

LCD液晶屏维修日记

有一台显示器不亮了&#xff0c;怀疑是电源接头松了&#xff0c;于是准备自己维修一下&#xff0c;哪知道事情不是这么简单的。于是折腾之路开始了… 拆开液晶显示屏后&#xff0c;发现结构非常高的简单&#xff0c;就两大部分&#xff0c;一个是液晶屏控制板&#xff0c;一个是…
阅读更多...
没有设计经验的新手如何制作一本电子画册？

没有设计经验的新手如何制作一本电子画册？

移动信息时代&#xff0c;电子画册逐渐取代纸质画册&#xff0c;它无需印刷&#xff0c;环保节能&#xff0c;也无需随身携带&#xff0c;通过手机/平板/电脑等设备即可随时在线浏览阅读&#xff0c;十分方便。那没有设计经验的新手如何制作一本这样随身携带方便的电子画册呢&a…
阅读更多...
基于Qt 多线程(继承 QObject 的线程)

基于Qt 多线程(继承 QObject 的线程)

​ 继承 QThread 类是创建线程的一种方法，另一种就是继承QObject 类。继承 QObject 类更加灵活。它通过 QObject::moveToThread()方法，将一个 QObeject的类转移到一个线程里执行。恩，不理解的话，我们下面也画个图捋一下。 通过上面的图不难理解，首先我们写一个类继承 QObj…
阅读更多...
苹果Apple Pay怎么用？1分钟掌握苹果支付技巧！

苹果Apple Pay怎么用？1分钟掌握苹果支付技巧！

随着移动支付的普及&#xff0c;越来越多的苹果用户开始使用Apple Pay进行日常消费。Apple Pay作为苹果公司推出的移动支付工具&#xff0c;具有简单快捷、安全性高、应用场景广泛等优点。苹果apple pay怎么用&#xff1f;今天&#xff0c;小编将为大家分享如何使用Apple Pay&a…
阅读更多...
Qt Jom Parallel Builds 并行构造

Qt Jom Parallel Builds 并行构造

1.Qt官网下载 Jom - Qt Wiki 下载jom源码 git clone git://code.qt.io/qt-labs/jom.git 2.生成makefile qmake -r 进入jom源码目录 执行qmake -r 3.编译 nmake jom编译成功 4.复制到qmake所在目录并运行
阅读更多...
小学生写作业用什么台灯好？专业的学生台灯推荐

小学生写作业用什么台灯好？专业的学生台灯推荐

说到台灯相信大家都不陌生&#xff0c;不管是办公族还是学生基本都会备上一台。而且现在的孩子很多都是存在视力问题的&#xff0c;主要的原因就是学习压力太大了&#xff0c;用眼时间过长导致的。所以很多家长选择给孩子使用更为专业的护眼台灯。 不过目前市面上的灯具也是良莠…
阅读更多...
【论文阅读】(CGAN)Conditional Generative Adversarial Nets

【论文阅读】(CGAN)Conditional Generative Adversarial Nets

论文地址&#xff1a;[1411.1784] Conditional Generative Adversarial Nets (arxiv.org) - 条件生成式对抗网络&#xff1b; 解读&#xff1a; 这篇论文中的Conditional GAN和原生GAN在结构上没有太大差别&#xff0c;时间也是紧随着原生GAN出来的&#xff0c;它的思想应该后…
阅读更多...
哪种灯光护眼效果好？考研必备护眼灯推荐

哪种灯光护眼效果好？考研必备护眼灯推荐

日常生活中&#xff0c;灯光对于我们来说是非常重要的&#xff0c;尤其是晚上&#xff0c;不管是学习还是办公都需要合适的光线环境&#xff0c;而台灯就是最好的一个选择。因此也不少学生党或者上班族都会备上一盏台灯。 不过台灯也不是随便挑选一台就可以的&#xff0c;如果…
阅读更多...
PC端同花顺筹码峰（平均成本）的历史换手衰减系数如何设置

PC端同花顺筹码峰（平均成本）的历史换手衰减系数如何设置

一、筹码峰设置 首先&#xff0c;打开同花顺客户端&#xff0c;找到筹码峰&#xff0c;点击设置按钮。 这时候打开弹框如下&#xff0c;其中【筹码分布】公式就是你需要修改的内容&#xff08;我的筹码分布是已修改过的&#xff09;&#xff1b; 左上角可以搜索"CM&q…
阅读更多...
时间序列基础-＞数据标签、数据分割器、数据加载器的定义和讲解(零基础入门时间序列)

时间序列基础-＞数据标签、数据分割器、数据加载器的定义和讲解(零基础入门时间序列)

一、本文介绍 各位小伙伴好&#xff0c;最近在发时间序列的实战案例中总是有一些朋友问我时间序列中的部分对数据的操作是什么含义&#xff0c;我进行了挺多的介绍和讲解但是问的人越来越多&#xff0c;所以今天在这里单独发一篇文章来单独的讲一下时间序列中对数据的处理操作…
阅读更多...
挂耳式运动耳机哪个品牌好？5款公认好用的运动耳机推荐

挂耳式运动耳机哪个品牌好？5款公认好用的运动耳机推荐

​在现代社会&#xff0c;耳机已经成为了人们生活中必不可少的数码设备。在运动的时候&#xff0c;佩戴耳机更是成为了很多人的标配。但是&#xff0c;市面上的运动耳机种类繁多&#xff0c;如何选择一款适合自己的呢&#xff1f;今天我为大家挑选了5款公认好用的运动耳机&…
阅读更多...
自动化测试：webdriver的断言详解

自动化测试：webdriver的断言详解

前言 在编写自动化测试脚本时&#xff0c;为了使“机器”去自动辨识test case的执行结果是True还是False&#xff0c;一般都需要在用例执行过程中获取一些信息&#xff0c;来判断用例的执行时成功还是失败。 判断成功失败与否&#xff0c;就涉及到断言。webdriver的断言使用有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023