FList - 一个简洁的在线文件列表

介绍

这是一个将 GitHub Releases,Hugging Face,文件url等,渲染成类似网盘的文件列表显示在网页上,方便用户下载开源软件。 支持视频、音频、图片、PDF 等文件的在线预览

演示:https://demo.flist.jjaw.cn

Github:https://github.com/jianjianai/FList

特征

  • 轻量:静态页面生成,无需数据库,无需服务器,Cloudflare Pages、Github Pages、Vercel、Netlify等都可以轻松部署,完全免费。
  • 🧰 便捷:支持视频、音频、图片、PDF 文件的在线预览。
  • 📦 开箱即用:只需简单配置,即可开箱即用,无需繁琐操作。
  • 🔎 搜索引擎友好:静态页面生成,这使得页面上的内容可被搜索引擎很好的抓取

使用

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

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

注意,每个对象都要用{}包裹,每个对象之间用,隔开。 例:

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

挂载文件到 FList

挂载 GitHub Releases

配置方法

jianjianaiFList 仓库挂载到根目录 /

  • mountPath: 挂载路径,就是将文件源中的文件放到什么路径下
  • analysis: 文件源分析器,这里使用的是 githubReleasesFilesAnalysis,用于解析 GitHub Releases 中的文件
1
2
3
4
{
mountPath:"/",
analysis:githubReleasesFilesAnalysis({user:"jianjianai", repository:"FList"})
}

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

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下载速度可能不佳。 并且由于跨域的原因,PDF,TXT,这些文件无法预览,只能下载。(视频图片音频可以预览)。 建议配置下载代理。

挂载 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",
.....
}),
}

挂载 Hugging Face Datasets

将 Hugging Face 的 Datasets 挂载到 FList 上

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

huggingFaceDatasetsAnalysis参数

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

配置下载代理

有些文件源国内下载速度不佳,配置代理可以提高下载和预览加载的速度,同时也可以解决跨域问题。

如果你使用 Cloudflare Pages 则可以直接使用 cloudflarePagesDownProxy() 他会自动完成全部配置, 并且在开发阶段也有很好的预览体验。

  • downProxy: 下载代理,设计上可以支持各种不同的代理,但是目前只有 cloudflarePagesDownProxy
1
2
3
4
5
{
mountPath:....,
analysis:....,
downProxy:cloudflarePagesDownProxy(),
}

部署到自己喜欢的平台

Cloudflare Pages (推荐!最完整的功能)

  • 🎉 部署简单,完全免费

  • 🎉 Pages 限制每日 100000 次请求 (打开网页,切换页面和下载都不消耗次数,预览和下载使用 cloudflarePagesDownProxy 代理的文件才消耗次数。)

  • 😞 晚高峰可能网站可能不太流畅

  • Build command

1
pnpm run build
  • Build output directory
1
.vuepress/dist