本项目使用 CloudFlare Workers 帮助你免费部署与分享你的阿里云盘文件。本项目 fork 自:onedrive-cf-index 并参考了 alist 的 API, 致敬。
在线演示:SiHuan's AliYunDrive Index.
- 全新「面包屑」导航栏;
- 令牌凭证由 Cloudflare Workers 自动刷新,并保存于(免费的)全局 KV 存储中;
- 使用 Turbolinks® 实现路由懒加载;
- 全新支持自定义的设计风格:spencer.css;
- 支持使用 Emoji 作为文件夹图标(如果文件夹名称第一位是 Emoji 则自动开启该功能);
- 渲染
README.md
如果当前目录下包含此文件,使用 github-markdown-css 渲染样式; - 支持「分页」,没有一个目录仅限显示 200 个项目的限制了!
- 根据文件类型渲染文件图标,图标使用 Font Awesome icons;
- 支持预览:
我们可以给某个特定的文件夹(目录)上锁,需要认证才能访问。我们可以在 src/auth/config.js
文件中将我们想要设为私有文件夹的目录写入 ENABLE_PATHS
列表中。我们还可以自定义认证所使用的用户名 NAME
以及密码,其中认证密码保存于 AUTH_PASSWORD
环境变量中,需要使用 wrangler 来设置这一环境变量:
wrangler secret put AUTH_PASSWORD
# 在这里输入你自己的认证密码
有关 wrangler 的使用细节等详细内容,请参考 接下来的部分段落。
- [可选] Proxied download(代理下载文件):
?proxied
- 经由 CloudFlare Workers 下载文件,如果(1)config/default.js
中的proxyDownload
为true
,以及(2)使用参数?proxied
请求文件; - [可选] Raw file download(文件直链访问):
?raw
- 返回文件直链而不是预览界面; - 两个参数可以一起使用,即
?proxied&raw
和?raw&proxied
均有效。
是的,这也就意味着你可以将这一项目用来搭建「图床」,或者用于搭建静态文件部署服务,比如下面的图片链接:
https://aliyun.sihuan.workers.dev/%F0%9F%A5%9F%20Some%20test%20files/nyancat.gif?raw
默认情况下为了提升反应速度,我们使用 KV 缓存了文件的下载直链以及文件夹的 file_id
,如果你看到的文件/文件夹列表与实际不符,请添加 ?nocache
强制刷新缓存。缓存的自动失效期是 14400s
与直链的最长有效期相同。
- 任意大小的图片缩略图:
?thumbnail=w_160
-w
指宽度,另外可选h
;160
指像素。
https://aliyun.sihuan.workers.dev/%F0%9F%A5%9F%20Some%20test%20files/Previews/sakuya.png?thumbnail=w_160
请参考原项目的「🔥 新特性 V1.1」部分:onedrive-index-cloudflare-worker,但我不保证全部功能均可用,因为本项目改动部分很大。
不是特别长的中文版部署指南预警!
登录阿里云盘网页版,按此方法获取的 token 会有防盗链检测,请使用 https://media.cooluc.com/decode_token/ 获取。F12
打开开发者工具,找到Console
选项卡,执行JSON.parse(localStorage.token).refresh_token
得到refresh_token
-
同上使用
JSON.parse(localStorage.token).default_drive_id
获得drive_id
-
最后,在我们的阿里云盘中创建一个公共分享文件夹,比如
/Public
即可。建议不要直接分享根目录!
最后,这么折腾完,我们应该成功拿到如下的几个凭证:
refresh_token
drive_id
base
:默认为/Public
。
是,我知道很麻烦,但是这是?,大家理解一下。🤷🏼♂️
Fork 再 clone 或者直接 clone 本仓库,并安装依赖 Node.js、npm
以及 wrangler
。
强烈建议大家使用 Node version manager 比如 n 或者 nvm 安装 Node.js 和 npm
,这样我们全局安装的 wrangler
就可以在我们的用户目录下安装保存配置文件了,也就不会遇到奇奇怪怪的权限问题了。
# 安装 CloudFlare Workers 官方编译部署工具
npm i @cloudflare/wrangler -g
# 使用 npm 安装依赖
npm install
# 使用 wrangler 登录 CloudFlare 账户
wrangler login
# 使用这一命令检查自己的登录状态
wrangler whoami
打开 https://dash.cloudflare.com/login 登录 CloudFlare,选择自己的域名,再向下滚动一点,我们就能看到右侧栏处我们的 account_id
以及 zone_id
了。 同时,在 Workers
-> Manage Workers
-> Create a Worker
处创建一个 DRAFT worker。
修改我们的 wrangler.toml
:
name
:就是我们刚刚创建的 draft worker 名称,我们的 Worker 默认会发布到这一域名下:<name>.<worker_subdomain>.workers.dev
;account_id
:我们的 Cloudflare Account ID;zone_id
:我们的 Cloudflare Zone ID。
创建叫做 BUCKET
的 Cloudflare Workers KV bucket:
# 创建 KV bucket
wrangler kv:namespace create "BUCKET"
# ... 或者,创建包括预览功能的 KV bucket
wrangler kv:namespace create "BUCKET" --preview
预览功能仅用于本地测试,和页面上的图片预览功能无关。
修改 wrangler.toml
里面的 kv_namespaces
:
kv_namespaces
:我们的 Cloudflare KV namespace,仅需替换id
和(或者)preview_id
即可。如果不需要预览功能,那么移除preview_id
即可。
drive_id
:刚刚获取的drive_id
;base
:之前创建的base
目录;
使用 wrangler
添加 Cloudflare Workers 环境变量(有关认证密码的介绍请见 🔒 私有文件夹):
# 添加我们的 refresh_token 和 client_secret
wrangler secret put REFRESH_TOKEN
# ... 并在这里粘贴我们的 refresh_token
wrangler secret put AUTH_PASSWORD
# ... 在这里输入我们自己设置的认证密码
我们可以使用 wrangler
预览部署:
wrangler preview
如果一切顺利,我们即可使用如下命令发布 Cloudflare Worker:
wrangler publish
我们也可以创建一个 GitHub Actions 来在每次 push
到 GitHub 仓库时自动发布新的 Worker,详情参考:main.yml。
如果想在自己的域名下部署 Cloudflare Worker,请参考:How to Setup Cloudflare Workers on a Custom Domain。
- 我们 应该 更改默认「着落页面」,直接修改 src/folderView.js 中
intro
的 HTML 即可; - 我们也 应该 更改页面的 header,直接修改 src/render/htmlWrapper.js 即可;
- 样式 CSS 文件位于 themes/spencer.css,可以根据自己需要自定义此文件,同时也需要更新 src/render/htmlWrapper.js 文件中的 commit HASH;
- 我们还可以自定义 Markdown 渲染 CSS 样式、PrismJS 代码高亮样式,等等等。
🏵 onedrive-cf-index ©Spencer Woo. Released under the MIT License.
Authored and maintained by Spencer Woo.
@Portfolio · @Blog · @GitHub