龙窝
Flist - 一个可以部署在静态网站上的网盘
绮曜 作者
  2024-10-04 19:23:36   2024-11-03 08:52:21    2.1k 字  8 分钟

教程前置

  1. Github账号
  2. jianjianai/FList: 将 GitHub Releases,Hugging Face,文件url等，渲染成类似网盘的文件列表显示在网页上，方便用户下载开源软件。 支持视频、音频、图片、PDF 等文件的在线预览。
  3. cloudflare，netlify等托管网站账号

你也可以上官方文档查看

开始

提醒

建议先提前fork仓库

你可以选择以下几种方式编辑代码：

  • Github上直接编辑
  • 本地vscode编辑

所有的配置文件都在 vuepress.config.ts 文件中，你可以根据自己的需求进行修改。

所有有关网盘的配置都在 FileList 函数的参数中。FileList 接收一个文件数组，可以配置挂载多个文件源。

注意，每个对象都要用{}包裹，每个对象之间用,隔开。比如：

1
2
3
4
5
6
7
8
9
10
export default defineUserConfig({
    ....
    theme: FileList([
        {...},
        {...},
        {...},
        {...}
    ]),
    .....
});

一般写成这样的形式，方便你自己进行更改。

1
2
3
{
	...
}

挂载文件

一般格式：

1
2
3
4
5
{
  mountPath:..., // 挂载路径，即渲染之后文件会出现在哪里
  analysis:..., // 文件源分析器
  downproxy:... // 非必要，后面会提及
}
  • mountPath: 挂载路径,就是将文件源中的文件放到什么路径下
  • analysis: 文件源分析器。
  • downproxy: 下载代理。如果文件在github等地方，下载速度是堪忧的，因此可以借助下载代理。（非必要！）

挂载文件支持：

  • Github release
  • Github repos
  • Gitee
  • Hugging Face Datasets
  • URL

anlysis

官方文档把anlysis分开了，这里进行汇总

支持 anlysis
Github release githubReleasesFilesAnalysis({user:"", repository:""})
Github repos githubReposAnalysis
Gitee 发行版 giteeReleasesFilesAnalysis
Hugging Face Datasets huggingFaceDatasetsAnalysis
URL fileUrlTreeAnalysis

Github release（下面将摘录原文）

配置方法

将 jianjianai 的 FList 仓库挂载到根目录 / 下

1
2
3
4
{
  mountPath:"/",
  analysis:githubReleasesFilesAnalysis({user:"jianjianai", repository:"FList"})
}

这样就把 jianjianai 的 FList 仓库挂载到了根目录 / 下了。

githubReleasesFilesAnalysis 特性

githubReleasesFilesAnalysis 会将 GitHub Releases 中的每个标签解析为一个目录，标签下发行的文件放到这个目录中。例如:

  • v1.0 -> /v1.0
  • v1.1 -> /v1.1

如果想要将文件放到/下可以将标签名称命名为 root,在 root 标签下的文件会被放到 / 下。

如果想要将文件放到更深的目录下，则可以在标签中使用/。例如

  • v1.0/test -> /v1.0/test
  • test/test2 -> /test/test2

Github ropes

配置方法

将 Aikoyori 的 ProgrammingVTuberLogos 仓库挂载到根目录 / 下

1
2
3
4
5
6
7
8
9
10
11
12
{
  mountPath: "/ProgrammingVTuberLogos",
  analysis: githubReposAnalysis({
    user: "Aikoyori",
    repository: "ProgrammingVTuberLogos",
    // rootPath: string, //根路径,挂载仓库的路径
    // authorizationToken: string, //github token
    // ref: string, //github分支
    // maxDeep: number, //最大深度,默认10
    // hideReadme: true, //隐藏README.MD文件
  }),
}

这样就把 Aikoyori 的 ProgrammingVTuberLogos 仓库挂载到了根目录 / 下了。

githubReposAnalysis 特性

将文件夹中的 README.MD 文件显示在文件夹的简介区

如果当前文件夹中有 README.MD 文件，则会将 README.MD 文件 显示在文件夹的简介区。

将相同文件名 .README.MD 结尾的文件现在在简介区

例如有两个文件 A.exe A.exe.README.MD 在同一个文件夹中，则会将 A.exe.README.MD 的内容显示在 A.exe 文件的简介区。

关于下载代理

如果直接从GitHub下载速度可能不佳。

并且由于跨域的原因，PDF，TXT，这些文件无法预览，只能下载。（视频图片音频可以预览）。

建议配置下载代理, 可以加速下载和解决跨域问题。

.README.MD 文件太多影响观感

可以使用 hideReadme 选项将这些文件隐藏掉。

1
2
3
4
5
6
7
{
  .....
  analysis: githubReposAnalysis({
    .....
    hideReadme: true, //隐藏README.MD文件
  }),
}

Gitee

将 Gitee 发行版挂载到 FList 上

配置方法

将 jianjianai 的 FList 仓库挂载到根目录 / 下

1
2
3
4
5
6
7
8
9
10
11
{
  mountPath:"/",
  analysis:giteeReleasesFilesAnalysis({
    user:"jianjianai",
    repository:"FList",
    //direction: 'asc', //排序
    //access_token: 'xxxx', //用户token
    //page: 0, //第几页
    //per_page: 100 //一页显示多少个
  })
}

giteeReleasesFilesAnalysis 特性

giteeReleasesFilesAnalysis 会将 Gitee 发行版 中的每个标签解析为一个目录，标签下发行的文件放到这个目录中。例如:

  • v1.0 -> /v1.0
  • v1.1 -> /v1.1

如果想要将文件放到/下可以将标签名称命名为 root,在 root 标签下的文件会被放到 / 下。

如果想要将文件放到更深的目录下，则可以在标签中使用/。例如

  • v1.0/test -> /v1.0/test
  • test/test2 -> /test/test2

最佳实践

tag数量超过100个

如果tag数量超过100个则可以将每一页分开写成多个解析器挂载到相同的目录，文件会自动合并。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
theme: FileList([
    ...
    {
        mountPath:"/gieee",
        analysis:giteeReleasesFilesAnalysis({
            user:"jianjianai",
            repository:"FList",
            page: 0, //第一页
            per_page: 100 //一页显示多少个
        })
    },
    {
        mountPath:"/gieee",
        analysis:giteeReleasesFilesAnalysis({
            user:"jianjianai",
            repository:"FList",
            page: 2, //第二页
            per_page: 100 //一页显示多少个
        })
    }
    ...
])
...

Hugging Face Datasets

将 Hugging Face 的 Datasets 挂载到 FList 上

配置方法

将用户 Open-Orca 的 OpenOrca 数据集的 main 分支挂载到 /huggingface测试 下

huggingFaceDatasetsAnalysis参数

  • userName 用户名
  • datasetsName 数据集名称
  • branchName 分支名称
  • maxDeep 最大深度,如果文件夹有很多层最大递归解析多少层，默认10
1
2
3
4
5
6
7
8
9
10
11
12
{
  mountPath:"/huggingface测试",
  analysis:huggingFaceDatasetsAnalysis({
    userName:"Open-Orca",
    datasetsName:"OpenOrca",
    branchName:"main",
    //最大深度,如果文件夹有很多层最大递归解析多少层，默认10
    maxDeep:3
    //path:"/test" //数据集的某文件夹，只挂载这个文件夹
    // hideReadme: true, //隐藏README.MD文件
  }),
}

将文件夹中的 README.MD 文件显示在文件夹的简介区

如果当前文件夹中有 README.MD 文件，则会将 README.MD 文件 显示在文件夹的简介区。

URL

如果拥有某个文件的加载地址，也可以将其挂载到 FList 上。

配置方法

将 https://example.com/test.jpg 的文件挂载到 /example 下,有两种配置文件分析器的的方式。

将挂载路径设置到/example下，之后配置 fileUrlTreeAnalysis ,将文件放到 / 下。

1
2
3
4
5
6
{
  mountPath:"/example",
  analysis:fileUrlTreeAnalysis({
    "/test.jpg":"https://example.com/test.jpg"
  }),
}

将挂载路径设置到/下，之后配置 fileUrlTreeAnalysis ,将文件放到 /example 下。

1
2
3
4
5
6
{
  mountPath:"/",
  analysis:fileUrlTreeAnalysis({
    "/example/test.jpg":"https://example.com/test.jpg"
  }),
}

fileUrlTreeAnalysis 可以一次分析多个文件。

1
2
3
4
5
6
7
8
9
10
11
{
  mountPath:"/",
  analysis:fileUrlTreeAnalysis({
    "/example/test.jpg":"https://example.com/test.jpg",
    "/test1.jpg":"https://example.com/test1.jpg",
    "/test/test2.jpg":"https://example.com/test2.jpg",
    "/example/test3.jpg":"https://example.com/test3.jpg",
    "/example/test/test4.jpg":"https://example.com/test4.jpg",
    .....
  }),
}

下载代理

代理 格式（即downproxy的内容）
cloudflare cloudflarePagesDownProxy()
vercel vercelDownProxy()
netlify netlifyDownProxy()

部署

不推荐使用github page！

部署的方式十分简单，导入自己fork的仓库，模板为Vue

Build command（自定义部署命令）

1
pnpm run build

Build output directory（输出目录）

1
.vuepress/dist

最后构建即可！

补充

下载跨域限制级

Flist 将下载跨域限制级分为 4 个等级，分别是：

  • allow: 允许跨域，所有功能均可正常使用。
  • loose: 浏览器不阻止跨域的资源可以预览，例如视频音频图片等。
  • strict: 服务端会通过origin请求头或者其他方法严格限制跨域访问，无法预览。
  • verystrict: 就连从其他网站点击超链接下载也不行，非常严格的防盗链，需要复制下载链接在新标签页粘贴才能下载。

总结：如果需要预览PDF,MD,TXT等文件则需要 allow 等级。如果需要预览视频图片音频等则至少需要 loose 等级。需要点击下载按钮自动开始下载则至少需要 strict 等级。

提示

如果配置了下载代理，无论是什么等级都会被提升到 allow 等级。

下载跨域限制级列表

可挂载的平台在 Flist 下载跨域限制级列表

平台 限制级 描述
GitHub Releases loose
GitHub Repos loose
Hugging Face Datasets allow
URL 下载地址 allow Flist 无从知晓您提供的链接的下载跨域等级，所以会直接给予 allow 等级，开放全部功能，能否使用取决于链接是否允许跨域。
Gitee 发行版 loose
Gitee 仓库 verystrict

提示

在 Flist 页面按 F12 打开控制台可以看到当前文件限制级的日志输出哦。

Flist - 一个可以部署在静态网站上的网盘
posts/55643/
作者
绮曜
发布于
2024-10-04 19:23
许可
 评论
评论插件加载失败
正在加载评论插件
  1. 教程前置
  2. 开始
    1. 提醒
  3. 挂载文件
    1. anlysis
    2. Github release（下面将摘录原文）
      1. 配置方法
      2. githubReleasesFilesAnalysis 特性
    3. Github ropes
      1. 配置方法
    4. githubReposAnalysis 特性
      1. 将文件夹中的 README.MD 文件显示在文件夹的简介区
      2. 将相同文件名 .README.MD 结尾的文件现在在简介区
      3. 关于下载代理
      4. .README.MD 文件太多影响观感
    5. Gitee
      1. 配置方法
      2. giteeReleasesFilesAnalysis 特性
      3. 最佳实践
      4. tag数量超过100个
    6. Hugging Face Datasets
      1. 配置方法
      2. 将文件夹中的 README.MD 文件显示在文件夹的简介区
    7. URL
      1. 配置方法
  4. 下载代理
  5. 部署
  6. 补充
    1. 下载跨域限制级
    2. 提示
    3. 下载跨域限制级列表
    4. 提示
  1. 教程前置
  2. 开始
    1. 提醒
  3. 挂载文件
    1. anlysis
    2. Github release（下面将摘录原文）
      1. 配置方法
      2. githubReleasesFilesAnalysis 特性
    3. Github ropes
      1. 配置方法
    4. githubReposAnalysis 特性
      1. 将文件夹中的 README.MD 文件显示在文件夹的简介区
      2. 将相同文件名 .README.MD 结尾的文件现在在简介区
      3. 关于下载代理
      4. .README.MD 文件太多影响观感
    5. Gitee
      1. 配置方法
      2. giteeReleasesFilesAnalysis 特性
      3. 最佳实践
      4. tag数量超过100个
    6. Hugging Face Datasets
      1. 配置方法
      2. 将文件夹中的 README.MD 文件显示在文件夹的简介区
    7. URL
      1. 配置方法
  4. 下载代理
  5. 部署
  6. 补充
    1. 下载跨域限制级
    2. 提示
    3. 下载跨域限制级列表
    4. 提示