介绍：
CF-Worker-Dir是一款适用于Cloudflare Worker平台上的云函数程序，可以使用它在一分钟内搭建属于自己的导航页面，还可以预留出接口帮助你售出自己域名。如果你的域名还没有搭建网站，不如先利用CF-Worker-Dir让你的域名不再浪费。😉
| CF-Worker-Dir | LinkStack | |
|---|---|---|
| 自定义化程度 | 🌟🌟🌟 | 🌟🌟🌟🌟🌟 |
| 部署难度 | 😈😈 | 😈😈😈😈 |
效果图：
部署方法：
第一步：创建Worker
进入Workers & Pages栏目下的Overview项目
点击Create application
点击Create Worker
点击deploy
第三步：配置Worker
点击Configure Worker
在Triggers中修改域名
例如这样：
点击页面上方的Quick edit
填入以下内容
/**
* 自定义网站配置
*/
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:"[email protected]"
}
]
},
lists: [ //Url list
{
name:"技术",
icon:"code",
list:[
{
url:"https://blog.fuyiran.link/",
name:"傅说",
desc:"领略世界的全新角度"
},
{
url:"https://nodeseek.com",
name:"Nodeseek",
desc:"高品质的主机爱好者社区"
},
{
url:"https://v2ex.com/",
name:"V2ex",
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) => `${content}`;
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://www.google.cn/s2/favicons?sz=64&domain_url=" url;
}else{
return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" url;
//return "https://www.google.cn/s2/favicons?sz=64&domain_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 ? '' : ''}`)))
}
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 `
${config.title} - ${config.subtitle}
${index}
${config.selling_ads ? seller : ''}
$('#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');
});
`
}
修改配置来自定义导航页面：
const config = {
title: "自定义导航", //自定义网站标题
subtitle: "Cloudflare Workers Nav", //自定义网站副标题
logo_icon: "sitemap", //选择网站logo icon 暂时只支持 (eg:https://semantic-ui.com/elements/icon.html)
hitokoto: true, //开启 一言 插件
search:true, //开启 搜索 功能
search_engine:[ //搜索引擎列表
{
name:"百度一下", //搜索引擎名称
template:"https://www.baidu.com/s?wd=$s" //搜索引擎模板（含关键词$s）
}
],
selling_ads: true, //是否要开启网址推广
sell_info:{
domain:"example.com", //当前域名
price:500, //价格
mon_unit:"yen sign", //货币单位 (eg:https://semantic-ui.com/elements/icon.html#computers)
contact:[ //联系方式
{
type:"envelope", //通讯工具 ("weixin","qq","telegram plane","envelope" or "phone")
content:"[email protected]" //号码/地址
}
]
},
lists: [ //网址信息
{
name:"技术", //网址类别
icon:"code", //网址类别icon 暂时只支持 (eg:https://semantic-ui.com/elements/icon.html)
list:[
{
url:"https://oschina.net/", //网站url
name:"开源中国", //网站名称
desc:"领先的中文开源技术社区" //网站描述
}
]
}
]
}
相关地址：
GitHub地址：https://github.com/sleepwood/CF-Worker-Dir/
编辑的话只能手搓嘛？可以在线编辑嘛
牛逼啊
@auhaij #1
只能开改代码