### [拾光集：一个优雅的书签收藏与分享平台，基于Cloudflare Workers构建，快速拥有自己的导航站](https://www.appmiao.com/article/777)

**Published:** 2025-05-11T00:55:29

**Author:** 阿喵

**Excerpt:** APP喵前言：在国内，大家好像对导航站情有独钟。那么如何快速搭建一个好看的导航站呢？今天阿喵给大家分享一个github上的开源项目，直接利用Cloudflare Workers就可以快速搭建，无需服务器，只要有个自己的域名，就可以按照教程配

APP喵前言：在国内，大家好像对导航站情有独钟。那么如何快速搭建一个好看的导航站呢？今天阿喵给大家分享一个github上的开源项目，直接利用Cloudflare Workers就可以快速搭建，无需服务器，只要有个自己的域名，就可以按照教程配置。实现快速搭建导航站。下面来看介绍和搭建教程吧

## 项目介绍

基于Cloudflare Workers构建的书签收藏分享的导航平台。功能强大，可以导入导出网址收藏夹。还有完整的后台管理。

### 截图

![](https://pic.amiao.app/2025/05/26044613/navimage.png)

### 特性[](https://github.com/wangwangit/nav#-%E7%89%B9%E6%80%A7)

📤 **导入导出** – 支持批量导入导出书签

📱 **响应式设计** – 完美适配各种设备屏幕

📋 **分类浏览** – 按类别组织书签，简单直观

🔍 **站内搜索** – 快速查找需要的网站

📝 **书签提交** – 用户可申请添加新书签

🛡️ **审核机制** – 管理员审批流程保证内容质量

🔒 **安全认证** – 支持KV存储保存管理员凭据

📊 **后台管理** – 完整的书签管理界面

##  部署指南

[](https://github.com/wangwangit/nav?tab=readme-ov-file#-%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97)

### 步骤 1: 创建DB数据库和KV键值对

[](https://github.com/wangwangit/nav?tab=readme-ov-file#%E6%AD%A5%E9%AA%A4-1-%E5%88%9B%E5%BB%BAdb%E6%95%B0%E6%8D%AE%E5%BA%93%E5%92%8Ckv%E9%94%AE%E5%80%BC%E5%AF%B9)

创建D1数据库,输入名称**book** ,点击创建!

![](https://pic.amiao.app/2025/05/26044616/image.png)

点击控制台,分别创建表**sites**,**pending\_sites**,看下图字段!

![](https://pic.amiao.app/2025/05/26044620/image-1.png)

![](https://pic.amiao.app/2025/05/26044623/image-2.png)

创建KV,名称**NAV\_AUTH**,根据自己实际情况修改密钥的值,这是后续用于登陆后台管理的账号密码!

![](https://pic.amiao.app/2025/05/26044627/image-3.png)

![](https://pic.amiao.app/2025/05/26044630/image-4.png)

### 步骤 2: 创建workers

[](https://github.com/wangwangit/nav?tab=readme-ov-file#%E6%AD%A5%E9%AA%A4-2-%E5%88%9B%E5%BB%BAworkers)

看下图,点击hello worker创建一个workers,输入自定义名称进行创建!

![](https://pic.amiao.app/2025/05/26044724/image-5.png)

然后点击编辑代码,将本项目中的worker.js代码复制粘贴进去,替换原有代码,点击部署!

![](https://pic.amiao.app/2025/05/26044727/image-6.png)

然后前往设置中,绑定KV和DB

![](https://pic.amiao.app/2025/05/26044731/image-7.png)

然后访问页面即可,此时由于没有添加书签,访问首页会提示没有数据,可以前往admin后台登陆之后,添加一个书签,即可看到页面!

![](https://pic.amiao.app/2025/05/26044734/image-8.png)

页面提示这个信息!

![](https://pic.amiao.app/2025/05/26044737/image-9.png)

网址后面拼接 /admin 即可进入后台页面,输入在DB中设置的密码,然后进行添加!

![](https://pic.amiao.app/2025/05/26044740/image-10.png)

再回到首页,就能看到网站了!

![](https://pic.amiao.app/2025/05/26044743/image-11.png)

## 项目地址[](https://github.com/wangwangit/nav#-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B)

### 在线体验[](https://github.com/wangwangit/nav#%E5%9C%A8%E7%BA%BF%E4%BD%93%E9%AA%8C)

访问示例网站：[https://nav.wangwangit.com](https://nav.wangwangit.com/)

管理员入口：[https://nav.wangwangit.com/admin](https://nav.wangwangit.com/admin)

### 项目地址

GitHub：[https://github.com/wangwangit/nav](https://github.com/wangwangit/nav)

**Tags:** nav, 书签收藏, 导航站, 收藏夹, 源码, 网址收藏

**Categories:** 网站推荐

---