一篇讀懂(做導航網(wǎng)站用什么cms)導航網(wǎng)站 開源,手把手以小白思維利用cloudflare興建一個免費導航網(wǎng)站,國際機械信息網(wǎng),
目錄:
1.導航網(wǎng)站有什么作用
2.導航類網(wǎng)站賺錢嗎
3.怎么做導航網(wǎng)站
4.做導航網(wǎng)站不侵權嗎
5.自己做一個導航網(wǎng)站
6.導航網(wǎng)頁哪個好
7.好用的導航網(wǎng)站有哪些
8.導航網(wǎng)站搭建
9.導航網(wǎng)址哪個好
10.什么是導航網(wǎng)站
1.導航網(wǎng)站有什么作用
編輯 | 排版 | 制圖 | 測試 | ?伯衡君? 未經(jīng)允許,謝絕轉載來源:官方網(wǎng)站
2.導航類網(wǎng)站賺錢嗎
圖片來源于本站開篇寄語伯衡君之前曾介紹過用cloudflare workers免費搭建各種網(wǎng)站,比如仿谷歌的導航站,仿維基的站點等等,總之每天可以訪問10萬次的站點簡直不要太好用,今天為大家介紹一個搭建免費導航站的站點,分享給大家,于是就有了今天這篇文章。
3.怎么做導緣之空無修版哪集h航網(wǎng)站
項目地址這是一個github上的項目,項目可以去github搜索CF-Worker-Dir項目介紹CF-Worker-Dir是一款適用于Cloudflare Worker平臺上的云函數(shù)程序,可以使用它在一分鐘內(nèi)搭建屬于自己的導航頁面。
4.做導航網(wǎng)站不侵權嗎
CF-Worker-Dir提供豐富的自定義配置,同時它還可以預留了接口幫助你售出自己域名如果你的域名還沒有搭建網(wǎng)站,不如先利用CF-Worker-Dir讓你的域名不再浪費操作方法1.打開cloudflare workers,進入官網(wǎng),如下圖所示,記得注冊賬號并登錄。
5.自己做一個導航網(wǎng)站
圖片來源于本站2. 注冊,登陸,Start bui緣之空無修版哪集hlding,取一個子域名,Create a Worker。
6.導航網(wǎng)頁哪個好
圖片來源于本站3. 清空左側代碼區(qū),復制下方代碼到左側代碼框,save and display如果正常,右側就會顯示頁面了,代碼如下效果圖見代碼下方/** * 自定義網(wǎng)站配置 */const config = {
7.好用的導航網(wǎng)站有哪些
title: "自定義導航", //write your website titlesubtitle: "Cloudflare Workers Dir", //write your website subtitle
8.導航網(wǎng)站搭建
logo_icon: "s緣之空無修版哪集hitemap", //select your logo by semantic-ui icon (you can get more msg in:https://semantic-ui.com/elements/icon.html)
9.導航網(wǎng)址哪個好
search_engine:[ //choose search engine which you use { name:"百 度",
10.什么是導航網(wǎng)站
template:"https://www.baidu.com/s?wd=$s" }, { name:"谷 歌", 緣之空無修版哪集h 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.(緣之空無修版哪集hturning on may be helpful for selling this domain by showing some ads.)
sell_info:{ domain:"example.com", price:500, //domain pricemon_unit:"yen sign"
, //monetary unit contact:[ //how to contact you {
type:"envelope", //contact type ("weixin","qq","telegram plane","envelope" or緣之空無修版哪集h "phone")content
:"info@example.com" } ] }, lists: [
//Url list { name:"技術", icon:"code", list:[ { url:"https://oschina.net/"
, name:"開源中國", desc:"程序員集散地" }, { url:"https://v2ex.com"
,緣之空無修版哪集h name:"V2EX", desc:"程序員集散地" }, { url:"https://csdn.net/"
, name:"CSDN技術社區(qū)", desc:"程序員集散地" }, { url:"https://github.com/"
, name:"Github", desc:"程序員集散地" }, ] }, { name緣之空無修版哪集h:"學習",
icon:"graduation cap", list:[ { url:"https://w3school.com.cn/", name
:"W3school在線教程", desc:"程序員集散地" }, { url:"https://runoob.com/",
name:"菜鳥教程", desc:"程序員集散地" }, { url:"https://segmentfault.com/",
name緣之空無修版哪集h:"思否社區(qū)", desc:"程序員集散地" }, { url:"https://jianshu.com/",
name:"簡書", desc:"程序員集散地" }, ] } ] } const el = (tag, attrs, content) =>
`${content}`; asyncfunctionhandleRequest(request) { const init = {
head緣之空無修版哪集hers: { content-type: text/html;charset=UTF-8, }, } returnnew Response(renderHTML(renderIndex(),config.selling_ads? renderSeller() :
null), init); } addEventListener(fetch, event => { return event.respondWith(handleRequest(event.request)) 緣之空無修版哪集h })
/** Render Functions * 渲染模塊函數(shù) */functionrenderIndex(){ const footer = el(footer,[],el(div,[class="footer"
],Powered by + el(a,[class="ui label",
],el(i,[class="github icon"],"") + Cf-Worker-Dir) + ? Base on + e緣之空無修版哪集hl(a,[class="ui label"],el(i,[class="balance scale icon"
],"") + MIT License))); return renderHeader() + renderMain() + footer; } functionrenderHeader(){
const item = (template,name) => el(a,[class="item",`data-url="${template}"`],name); var nav = el(div
,[class="ui large緣之空無修版哪集h 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緣之空無修版哪集h="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,li緣之空無修版哪集hnk.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="searchinp緣之空無修版哪集hut",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",cl緣之空無修版哪集hass="ui text container"],title + input + menu +
`${config.selling_ads ? 喜歡此域名
: }`))) } functionrenderMain() { 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=緣之空無修版哪集h"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"],ite緣之空無修版哪集hm.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)); } functionrenderSeller() { 緣之空無修版哪集h 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(緣之空無修版哪集hdiv,[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 al緣之空無修版哪集higned icon inverted header"
],el(i,[class="circular envelope open outline grey inverted icon"],"") + 聯(lián)系我) + 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.sel緣之空無修版哪集hl_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))));緣之空無修版哪集h
return el(div,[id="seller",class="ui basic modal"],title + content + action); } /*通過分析鏈接 實時獲取favicon * @url 需要分析的Url地址 */
functiongetFavicon(url){ if(url.match(/https{0,1}:\/\//)){ return"https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&c緣之空無修版哪集holor=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; } } functionrenderHTML(index,seller) { return`
${config.title} - ${config.subtitle}
${index緣之空無修版哪集h}${config.selling_ads ? seller : } $(#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) ; }); $(緣之空無修版哪集h.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); }) `
}界面展示
圖片來源于本站之后在瀏覽器輸入網(wǎng)址即可打開緣之空無修版哪集h了。溫馨提示收藏下來,以后就可以使用了。免費版每天有10萬個調(diào)用限制,如果自己用怎么著都夠用了。