利用Cloudflare Worker搭建导航网站
本文最后更新于 313 天前,其中的信息可能已经有所发展或是发生改变。

CF-Worker-Dir


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

项目地址sleepwood/CF-Worker-Dir

程序安装

快速安装

  1. 在 Cloudflare Worker 管理页面创建一个新的 Worker 。
  2. 在Worker编辑页面左边粘贴 index.js 中的代码。
  3. 根据自身需要修改 config 的配置内容

进阶安装

如何绑定自己的域名

  1. 根据上文快速安装完成,回到域名管理面板
  2. 点击 Workers 进入Workers管理页面
  3. 点击 Add route 设置新的路由
  4. Route 可以输入自己想使用的子域名,如果在根域名上使用直接把当前域名输入即可,Worker 选择上文快速安装好的Worker

Route 所使用的域名地址必须已经解析好A记录,如果没有能绑定的IP地址,可以输入8.8.8.8占位:)

可以参考我之前的文章搭建基于Cloudflare Worker的短链接/短域名缩短服务

系统配置

CF-Worker-Dir允许用户自定义导航页面,配置内容如下:

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:"领先的中文开源技术社区" //网站描述
        }
      ]
    }
  ]
}

自定义配置

首先fork原项目到自己的仓库,然后修改仓库内文件,修改完成后更新workers

增加favicon

修改index.js文件。添加以下代码到<head>里,也就是180行到189行之间

<link rel="shortcut icon" href="https://yanxuan.nosdn.127.net/56761fad551a0b988510a66af2840cea.png" />
<link rel="bookmark" href="https://yanxuan.nosdn.127.net/56761fad551a0b988510a66af2840cea.png" type="image/x-icon" />

其中icon地址自己改换

自定义顶部背景图片

打开index.js,在186行会看到”…gh/sleepwood/[email protected]/style.css”
修改成自己的地址”gh/你的github名字/fork项目名字@版本/style.css.
然后打开你项目的style.css.
寻找#head, 就可以修改了。

(如何改请参考css语言)

有个缺点,
如果你找的图片太大,
不止影响网页打开速度,也打开不完全。
好像是1300×300-400 就还行。

github版本号很重要,
修改style.css之后请发布最新的版本并在index.js做出修改。
也别忘了打开cf的开发模式,这样你就可以马上知道你部署对不对了。

我的仓库CF-Worker-Dir

暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇