1.前提#

(1).一个cloudflare账号#

(2).域名（非必须）#

2.具体搭建步骤#

Github项目地址 #

(1)在cloudflare中新建一个worker项目#

(2)选择“编辑代码”，将下面的代码复制，保存点击部署#

点击展开查看代码详情

1
/**
2
 *  自定义网站配置
3
 */
4
const config = {
5
  title: "自定义导航",                 //write your website title
6
  subtitle: "Cloudflare Workers Dir", //write your website subtitle
7
  logo_icon: "sitemap",               //select your logo by semantic-ui icon (you can get more msg in:https://semantic-ui.com/elements/icon.html)
8
  hitokoto: true,                     //use hitokoto or not
9
  search:true,                        //enable search function
10
  search_engine:[                     //choose search engine which you use
11
    {
12
      name:"百 度",
13
      template:"https://www.baidu.com/s?wd=$s"
14
    },
15
    {
16
      name:"谷 歌",
17
      template:"https://www.google.com/search?q=$s"
18
    },
19
    {
20
      name:"必 应",
21
      template:"https://www.bing.com/search?q=$s"
22
    },
23
    {
24
      name:"搜 狗",
25
      template:"https://www.sogou.com/web?query=$s"
26
    }
27
  ],
28
  selling_ads: true,                  //Selling your domain or not.(turning on may be helpful for selling this domain by showing some ads.)
29
  sell_info:{
30
    domain:"example.com",
31
    price:500,                        //domain price
32
    mon_unit:"yen sign",              //monetary unit
33
    contact:[                         //how to contact you
34
      {
35
        type:"envelope",               //contact type ("weixin","qq","telegram plane","envelope" or "phone")
36
        content:"info@example.com"
37
      }
38
    ]
39
  },
40
  lists: [                            //Url list
41
    {
42
      name:"技术",
43
      icon:"code",
44
      list:[
45
        {
46
          url:"https://oschina.net/",
47
          name:"开源中国",
48
          desc:"程序员集散地"
49
        },
50
        {
51
          url:"https://v2ex.com",
52
          name:"V2EX",
53
          desc:"程序员集散地"
54
        },
55
        {
56
          url:"https://csdn.net/",
57
          name:"CSDN技术社区",
58
          desc:"程序员集散地"
59
        },
60
        {
61
          url:"https://github.com/",
62
          name:"Github",
63
          desc:"程序员集散地"
64
        },
65
      ]
66
    },
67
    {
68
      name:"学习",
69
      icon:"graduation cap",
70
      list:[
71
        {
72
          url:"https://w3school.com.cn/",
73
          name:"W3school在线教程",
74
          desc:"程序员集散地"
75
        },
76
        {
77
          url:"https://runoob.com/",
78
          name:"菜鸟教程",
79
          desc:"程序员集散地"
80
        },
81
        {
82
          url:"https://segmentfault.com/",
83
          name:"思否社区",
84
          desc:"程序员集散地"
85
        },
86
        {
87
          url:"https://jianshu.com/",
88
          name:"简书",
89
          desc:"程序员集散地"
90
        },
91
      ]
92
    }
93
  ]
94
}
95
const el = (tag, attrs, content) => `<${tag} ${attrs.join(" ")}>${content}</${tag}>`;
96

97
async function handleRequest(request) {
98
  const init = {
99
    headers: {
100
      'content-type': 'text/html;charset=UTF-8',
101
    },
102
  }
103
  return new Response(renderHTML(renderIndex(),config.selling_ads? renderSeller() :null), init);
104
}
105
addEventListener('fetch', event => {
106
  return event.respondWith(handleRequest(event.request))
107
})
108

109
/*通过分析链接 实时获取favicon
110
* @url 需要分析的Url地址
111
*/
112
function getFavicon(url){
113
  if(url.match(/https{0,1}:\/\//)){
114
    //return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url.split('//')[1];
115
    return "https://www.google.cn/s2/favicons?sz=64&domain_url=" + url;
116
  }else{
117
    //return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url;
118
    return "https://www.google.cn/s2/favicons?sz=64&domain_url=http://" + url;
119
  }
120
}
121

122
/** Render Functions
123
 *  渲染模块函数
124
 */
125

126
function renderIndex(){
127
  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') + ' &copy; Base on ' + el('a',['class="ui label"'],el('i',['class="balance scale icon"'],"") + 'MIT License')));
128
  return renderHeader() + renderMain() + footer;
129
}
130

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

134
  var nav = el('div',['class="ui large secondary inverted menu"'],el('div',['class="item"'],el('p',['id="hitokoto"'],'条条大路通罗马')))
135
  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)));
136
  var menu = el('div',['id="sengine"','class="ui bottom attached tabular inverted secondary menu"'],el('div',['class="header item"'],'&nbsp;') + config.search_engine.map((link,key) =>{
137
    if(key == 0){
138
      return el('a',['class="active item"',`data-url="${link.template}"`],link.name);
139
    }else{
140
      return item(link.template,link.name);
141
    }
142
  }).join(""))
143
  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"'],""));
144
  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>' : ''}`)))
145
}
146

147
function renderMain() {
148
  var main = config.lists.map((item) => {
149
    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)));
150
    const divider = el('h4',['class="ui horizontal divider header"'],el('i',[`class="${item.icon} icon"`],"")+item.name);
151

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

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

159
  return el('main',[],el('div',['class="ui container"'],main));
160
}
161

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

167
  var contact = config.sell_info.contact.map((list) => {
168
    return item(list.type,list.content);
169
  }).join("");
170
  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));
171
  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)));
172
  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))));
173

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

177
function renderHTML(index,seller) {
178
  return `<!DOCTYPE html>
179
  <html lang="en">
180
  <head>
181
      <meta charset="UTF-8">
182
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
183
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
184
      <title>${config.title} - ${config.subtitle}</title>
185
      <link href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css" rel="stylesheet">
186
      <link href="https://cdn.jsdelivr.net/gh/sleepwood/cf-worker-dir@0.1.1/style.css" rel="stylesheet">
187
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
188
      <script src="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.js"></script>
189
  </head>
190
  <body>
191
    ${index}
192
    ${config.selling_ads ? seller : ''}
193
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
194
    <script>
195
      $('#sengine a').on('click', function (e) {
196
        $('#sengine a.active').toggleClass('active');
197
        $(e.target).toggleClass('active');
198
        $('#search-fav').attr('src',$(e.target).data('url').match(`+/https{0,1}:\/\/\S+\//+`)[0] + '/favicon.ico') ;
199
      });
200
      $('.search').on('click', function (e) {
201
          var url = $('#sengine a.active').data('url');
202
          url = url.replace(`+/\$s/+`,$('#searchinput').val());
203
          window.open(url);
204
      });
205
      /* 鼠标聚焦时，回车事件 */
206
      $("#searchinput").bind("keypress", function(){
207
          if (event.keyCode == 13){
208
          // 触发需要调用的方法
209
          $(".search").click();
210
          }
211
      });
212
      $('#menubtn').on('click', function (e) {
213
          $('#seller').modal('show');
214
      });
215
    </script>
216
  </body>
217

218
  </html>`
219
}

(3)找到代码中的函数getFavicon，使用下面的代码进行替换，保证能够正常显示导航站里面的网站图标#

1
function getFavicon(url) {
2
  const domain = url.replace(/^https?:\/\//, '').split('/')[0];
3
  return `https://icons.duckduckgo.com/ip3/${domain}.ico`;
4
}

自定义设置#

config里面自己改，有注释

1.前提#

(1).一个cloudflare账号#

(2).域名（非必须）#

2.具体搭建步骤#

Github项目地址#

(1)在cloudflare中新建一个worker项目#

(2)选择“编辑代码”，将下面的代码复制，保存点击部署#

(3)找到代码中的函数getFavicon，使用下面的代码进行替换，保证能够正常显示导航站里面的网站图标#

自定义设置#

3.自定义域绑定（非必须）#

Github项目地址 #