教程前置#

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

你也可以上官方文档查看

开始#

提醒 color:yellow

建议先提前fork仓库

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

Github上直接编辑
本地vscode编辑

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

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

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

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

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

1
{
2
  ...
3
}

挂载文件#

一般格式：

1
{
2
  mountPath:..., // 挂载路径，即渲染之后文件会出现在哪里
3
  analysis:..., // 文件源分析器
4
  downproxy:... // 非必要，后面会提及
5
}

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
  mountPath:"/",
3
  analysis:githubReleasesFilesAnalysis({user:"jianjianai", repository:"FList"})
4
}

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

这样就把 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
  analysis: githubReposAnalysis({
4
    .....
5
    hideReadme: true, //隐藏README.MD文件
6
  }),
7
}

Gitee#

将 Gitee 发行版挂载到 FList 上

配置方法#

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

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

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

Hugging Face Datasets#

将 Hugging Face 的 Datasets 挂载到 FList 上

配置方法#

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

huggingFaceDatasetsAnalysis参数

userName 用户名
datasetsName 数据集名称
branchName 分支名称
maxDeep 最大深度,如果文件夹有很多层最大递归解析多少层，默认10

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

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

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

URL#

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

配置方法#

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

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

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

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

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

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

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

下载代理#

代理	格式（即`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 等级。

提醒 color:yellow

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

下载跨域限制级列表#

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

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