onedrive-cf-index-栗子博客

演示版

Spencer的OneDrive Index上的现场演示。

特征

? 一般

面包屑可提供更好的导航。
使用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世纪互联版本）：
1. 使用您的Microsoft帐户登录，然后选择New registration。
2. 例如Name，您的刀片应用程序的输入my-onedrive-cf-index。
3. 设置Supported account types到Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)。OneDrive世纪互联用户设置为：任何组织目录（任何 Azure AD 目录 - 多租户）中的帐户。
4. 设置Redirect URI (optional)为Web（多选下拉列表）和https://heymind.github.io/tools/microsoft-graph-api-auth（URL）。
5. 点击Register。
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：
1. 打开https://heymind.github.io/tools/microsoft-graph-api-auth。
2. 在4. Authorize for code，输入我们的client_id，然后点击AUTHORIZE。
  登录您的Microsoft帐户并授权我们的应用程序，如果返回的代码如下所示，则您的授权过程将成功：
  
  点击OK，进入下一阶段。
3. 在处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 。WorkersManage WorkersCreate a Worker

修改wrangler.toml：

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字段。

修改src/config/default.js：

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代码突出显示配色方案等。