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

介绍

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

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

• https://flistd.pages.dev

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

特征

• ⚡ 轻量：静态页面生成，无需数据库，无需服务器，Cloudflare Pages、Github Pages、Vercel、Netlify等都可以轻松部署，完全免费。

• 🧰 便捷：支持视频、音频、图片、PDF 文件的在线预览。

• 📦 开箱即用：只需简单配置，即可开箱即用，无需繁琐操作。

• 🔎 搜索引擎友好：静态页面生成，这使得页面上的内容可被搜索引擎很好的抓取

使用

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

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

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

export default defineUserConfig({
    ....
    theme: FileList([
        {...},
        {...},
        {...},
        {...}
    ]),
    .....
});

挂载文件到 FList

挂载 GitHub Releases

配置方法

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

• mountPath: 挂载路径,就是将文件源中的文件放到什么路径下

• analysis: 文件源分析器，这里使用的是 githubReleasesFilesAnalysis，用于解析 GitHub Releases 中的文件

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

挂载 URL 下载地址

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

配置方法

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

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

{
  mountPath:"/example",
  analysis:fileUrlTreeAnalysis({
    "/test.jpg":"https://example.com/test.jpg"
  }),
}

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

{
  mountPath:"/",
  analysis:fileUrlTreeAnalysis({
    "/example/test.jpg":"https://example.com/test.jpg"
  }),
}

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

{
  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-Orca 的 OpenOrca 数据集的 main 分支挂载到 /huggingface测试 下

huggingFaceDatasetsAnalysis参数

• userName 用户名

• datasetsName 数据集名称

• branchName 分支名称

• maxDeep 最大深度,如果文件夹有很多层最大递归解析多少层，默认10

{
  mountPath:"/huggingface测试",
  analysis:huggingFaceDatasetsAnalysis({
    userName:"Open-Orca",
    datasetsName:"OpenOrca",
    branchName:"main",
    //最大深度,如果文件夹有很多层最大递归解析多少层，默认10
    maxDeep:3
    //path:"/test" //数据集的某文件夹，只挂载这个文件夹
  }),
}

配置下载代理

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

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

• downProxy: 下载代理，设计上可以支持各种不同的代理，但是目前只有 cloudflarePagesDownProxy。

{
  mountPath:....,
  analysis:....,
  downProxy:cloudflarePagesDownProxy(),
}

部署到自己喜欢的平台

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

• 🎉 部署简单，完全免费

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

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

• Build command

pnpm run build

• Build output directory

.vuepress/dist