SanS三石导航页 SanS三石导航页

手把手以小白思维利用cloudflare兴建一个免费导航网站

6个月前发布 SanS三石
36 0 0

手把手以小白思维利用cloudflare兴建一个免费导航网站

  • 编辑 | 排版 | 制图 | 测试 | ©伯衡君
  • © 未经允许，谢绝转载
  • 来源：官方网站

手把手以小白思维利用cloudflare兴建一个免费导航网站

图片来源于本站

开篇寄语

伯衡君之前曾介绍过用cloudflare workers免费搭建各种网站，比如仿谷歌的导航站，仿维基的站点等等，总之每天可以访问10万次的站点简直不要太好用，今天为大家介绍一个搭建免费导航站的站点，分享给大家，于是就有了今天这篇文章。

项目地址

这是一个github上的项目，项目可以去github搜索CF-Worker-Dir

项目介绍

CF-Worker-Dir是一款适用于Cloudflare Worker平台上的云函数程序，可以使用它在一分钟内搭建属于自己的导航页面。CF-Worker-Dir提供丰富的自定义配置，同时它还可以预留了接口帮助你售出自己域名。如果你的域名还没有搭建网站，不如先利用CF-Worker-Dir让你的域名不再浪费。

操作方法

1.打开cloudflare workers，进入官网，如下图所示，记得注册账号并登录。

手把手以小白思维利用cloudflare兴建一个免费导航网站

图片来源于本站

2. 注册，登陆，Start building，取一个子域名，Create a Worker。

手把手以小白思维利用cloudflare兴建一个免费导航网站

图片来源于本站

3. 清空左侧代码区，复制下方代码到左侧代码框，save and display。如果正常，右侧就会显示页面了，代码如下。效果图见代码下方。

/**
 *  自定义网站配置 
 */
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)
  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))
})
/** 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"],el(div,[id="nav",class="ui container"],nav) + el(div,[id="title",class="ui text container"],title + input + menu + `${config.selling_ads ? <a id="menubtn" class="red ui icon inverted button"><i class="heart icon"></i> 喜欢此域名 </a> : }`)))
}
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 mini 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);
}
/*通过分析链接 实时获取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];
  }else{
    return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url;
  }
  
}
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@master/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, (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);
      })
      $(#menubtn).on(click, (e) => {
          $(#seller).modal(show);
      })
    </script>
  </body>
  </html>`
}

界面展示

手把手以小白思维利用cloudflare兴建一个免费导航网站

图片来源于本站

之后在浏览器输入网址即可打开了。

温馨提示

收藏下来，以后就可以使用了。免费版每天有10万个调用限制，如果自己用怎么着都够用了。

手把手以小白思维利用cloudflare兴建一个免费导航网站

© 版权声明
上一篇

没有更多了...

下一篇

没有更多了...

相关文章

【转载】iPhone 16 Pro 设计大改，取消实体按键！
SanS三石
12
门票719元，谁给了迪士尼涨价的勇气？
SanS三石
18
【转载】残奥会上，哪些瞬间让你破防？｜睡前聊一会儿
SanS三石
20
【转载】奥尼电子：产品主要应用在智能家居、智慧出行、智慧办公等消费物联网的场景中，暂不涉及低空飞行、商业航天等领域
SanS三石
18
PCDN技术介绍
SanS三石
19
【转载】近日，巴黎奥运会开幕式的酒神演员引发网友热议
SanS三石
19

暂无评论

您必须登录才能参与评论！
立即登录
暂无评论...

热门文章

【转载】中国物联网“领航之城”，期待下一个辉煌！
77
【转载】北京暴雨没完没了，巴黎奥运会铁人三项推迟……极端天气影响越来越明显且直接，但全球气候治理仍面临挑战
50
50元n3160主板做软路由，iStoreOS物理机安装教程，Jellyfin刮削“公公不是亲爹”一文太精彩了，幽默又有趣，你细品！
45
【转载】夸克网盘拉新官方授权渠道怎么对接？盘点三个一手对接资源渠道平台！
39
OpenWrt折腾小记
38
本站网址来源于网络收集，对其内容不负任何责任。如有侵权、不妥之处，请反馈留言，我们会第一时间删除！

网站公告 关于本站 免责声明 站点地图

微信赞助SanS三石导航页

微信赞助

手机浏览站点SanS三石导航页

手机浏览站点
Copyright © 2022-2024 SanS三石导航页. All Rights Reserved. 萌ICP备20240170号
  由 OneNav 强力驱动