演示版
特征
? 一般
- 面包屑可提供更好的导航。
- 使用Cloudflare Workers KV存储缓存令牌并自动刷新令牌。
- 在Turbolinks®的帮助下进行延迟加载。
- 支持OneDrive 21Vianet。(由世纪互联运营的OneDrive。)
?️ 文件夹索引
- 通过spencer.css完成新的可定制设计。
- 可用表情符号作为文件夹图标(如果文件夹名称的第一个字符是表情符号)。
README.md
在当前文件夹中找到时渲染。用github-markdown-css渲染。- 支持分页,不再有限制,例如每个文件夹最多200个项目!
? 文件预览
- 根据文件类型呈现的文件图标,更干净的字体真棒图标。
- 纯文本:
.txt
。DEMO。 - 降价:
.md
,.mdown
,.markdown
。DEMO。 - 图片,支持中长款的变焦效果:
.png
,.jpg
,和.gif
。DEMO。 - 与代码语法高亮:
.js
,.py
,.c
,.json
… DEMO。 - PDF:延迟加载,加载进度和内置的PDF查看器。DEMO。
- 音乐/音频:
.mp3
,.aac
,.wav
,.oga
。DEMO。 - 视频:
.mp4
,.flv
,.webm
,.m3u8
。DEMO。
⬇️ 代理/原始文件下载
- [可选]代理下载:
?proxied
-如果(1)proxyDownload
为true,config/default.js
并且url中包含(2)参数,则通过CloudFlare Workers下载文件。 - [可选]原始文件下载:
?raw
-如果存在参数,则返回直接原始文件,而不是丰富的渲染预览。 - 这两个参数可以并行使用,这意味着
?proxied&raw
和?raw&proxied
都有效。
是的,这意味着您可以将该项目用作图像存储服务或用于提供静态文件,例如:
https://www.lizi.tw/wp-content/uploads/2021/01/nyancat.gifraw.png
其他
请参阅原始的onedrive-index-cloudflare-worker项目页面上的“新功能”部分以供参考,尽管我不能保证所有功能都可以使用。
部署方式
非常非常漫长而乏味的逐步指南警告!在线令牌生成工具取自慷慨:https : //heymind.github.io/tools/microsoft-graph-api-auth。我们将在以下步骤中使用它。
生成OneDrive API令牌
- 在以下位置创建新的刀片应用程序:Microsoft Azure应用程序注册(OneDrive普通版)或Microsoft Azure.cn应用程序注册(OneDrive世纪互联版本):
- 使用您的Microsoft帐户登录,然后选择
New registration
。 - 例如
Name
,您的刀片应用程序的输入my-onedrive-cf-index
。 - 设置
Supported account types
到Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
。OneDrive世纪互联用户设置为:任何组织目录(任何 Azure AD 目录 - 多租户)中的帐户
。 - 设置
Redirect URI (optional)
为Web
(多选下拉列表)和https://heymind.github.io/tools/microsoft-graph-api-auth
(URL)。 - 点击
Register
。
- 使用您的Microsoft帐户登录,然后选择
client_id
在Overview
面板上获取您的应用程序(客户端)ID 。- 打开
Certificates & secrets
面板,单击New client secret
并创建一个新的秘密,称为client_secret
,设置Expires
为Never
,单击Add
,然后复制Value
的client_secret
(您只有一次机会将其复制。)。 - 打开
API permissions
面板,选择Microsoft Graph
,选择Delegated permissions
,搜索offline_access, Files.Read, Files.Read.All
,选择全部三个,然后单击Add permissions
。您应该准备好以下权限:
- 得到你的
refresh_token
:- 打开https://heymind.github.io/tools/microsoft-graph-api-auth。
- 在
4. Authorize for code
,输入我们的client_id
,然后点击AUTHORIZE
。登录您的Microsoft帐户并授权我们的应用程序,如果返回的代码如下所示,则您的授权过程将成功:
点击
OK
,进入下一阶段。 - 在处
5. Exchange Access Token
,Code
应该已经为我们输入了正确的位置,我们只需要输入client_secret
:点击
GET TOKEN
。如果出现类似的错误error: "invalid_request"
,则请解决固定问题#13中建议的解决方案。否则,请收集您的物品,access_token
如果需要,也可以使用决赛Refresh Token
来收集您refresh_token
的物品。
- 最后,在OneDrive中为您的公共文件创建一个专用文件夹,例如:
/Public
。请不要直接共享您的根文件夹!
经过所有这些麻烦之后,您应该已经成功获取以下令牌和机密:
refresh_token
client_id
client_secret
redirect_uri
:默认为https://heymind.github.io/tools/microsoft-graph-api-auth
。base
:默认为/Public
。
是的,我知道这是一个漫长而乏味的过程,但是我们可以理解的是微软。♂️
准备工作
分叉或直接克隆此存储库。安装依赖项,您将需要Node.jsnpm
和wrangler
。
我们强烈建议您使用n或nvm之类的Node版本管理器安装npm ,这将允许wrangler在用户主目录下的全局node_modules目录中安装配置数据,而无需以root用户身份运行。
#安装cloudflare worker官方打包和发布工具
npm我@ cloudflare / wrangler -g
#使用npm安装依赖项
npm安装
#用牧马人登录Cloudflare
牧马人登录
#使用此命令
wrangler whoami验证wrangler状态
通过https://dash.cloudflare.com/login登录到您的CloudFlare帐户,选择您的域,然后向下滚动一点。你会看到你account_id
和zone_id
那里(右侧边栏)。还要在一个很酷的名称-> ->处创建一个DRAFT worker 。Workers
Manage Workers
Create a Worker
name
:工作人员的名字,您的工作人员将在发布<name>.<worker_subdomain>.workers.dev
。account_id
:您的Cloudflare帐户ID。zone_id
:您的Cloudflare区域ID。
创建名为的Cloudflare Workers KV存储桶BUCKET
:
#创建KV桶
牧马人kv:namespace创建“ BUCKET ”
# ...或者,在启用了预览功能的情况下创建KV存储桶
wrangler kv:namespace创建“ BUCKET ” --preview
kv_namespaces
在内部修改wrangler.toml
:
kv_namespaces
:您的Cloudflare KV名称空间,应相应地替换id
和preview_id
值。如果不需要预览功能,则可以删除该preview_id
字段。
client_id
:你client_id
从上面来。base
:您base
从上方的路径。
对于中国21Vianet OneDrive用户。OneDrive世纪互联用户:将useCnEndpoints
设置(修改)为true
。
使用以下命令向Cloudflare Workers环境变量添加机密wrangler
:
#将您的refresh_token和client_secret添加到Cloudflare
牧马人的秘密把REFRESH_TOKEN
# ...从上方输入您的refresh_token
牧马人的秘密把CLIENT_SECRET
# ...从上方输入您的client_secret
构建和部署
您可以使用以下方式预览工作人员wrangler
:
牧马人预览
确保一切正常后,您可以使用以下方式发布您的工作者:
牧马人发布
您还可以创建GitHub Action,以在上自动发布工作人员push
。参见main.yml。
对于自定义域,请参阅如何在自定义域上设置Cloudflare Workers。
客制化
- 您可以(并应该)
intro
在此处更改默认登录页面:src / folderView.js。直接编写HTML。 - 您可以(也应该)在此处更改网站的标题:src / render / htmlWrapper.js。
- 您的自定义样式是从theme / spencer.css加载的,请根据您的自定义进行更改。您还需要在src / render / htmlWrapper.js更改提交哈希。
- 您还可以自定义Markdown CSS样式,PrismJS代码突出显示配色方案等。
https://github.com/spencerwooo/onedrive-cf-index