前言

　用了 Alist 有好长时间了,从当初只有阿里云盘的V1版本到现在有二十来种方式挂载的V2版本.看作者大大提供默认的Loading有些腻歪了,哈哈就想着自己换一个,还有就是有的人觉的自己的后台入口都是一样的觉的不安全 (小声逼逼,谁会去你后台..不会加强一下密码么)我就也给进入后台的入口改了.正好之前我尝试了一次自己编译,还编译成功了能使用.

我当时编译的纪录视频

修改Loading

　我们先来看看旧版的Loading是什么样子 和 新版Loading是什么样子...上图为旧下图为新.


　上面哪个时间长了感觉感觉比较单调,哈哈这次换了新的好多啦看着,接下来让我们看看如何修改吧

开始修改

• Alist前端文件地址:https://github.com/alist-org/alist-web

• 修改下面两个文件即可,动画名称去下方提供的Loading官方连接自行挑选

  - 1 - alist-web\src\App.tsx
    - Line  6:        import { `ClimbingBoxLoader` } from "react-spinners";
    - Line 18:        <`ClimbingBoxLoader` color="#1890ff" loading={true} size={20} />
  
  - 2 - alist-web\src\pages\list\context.tsx
    - Line  13:        import { `ClimbingBoxLoader` } from "react-spinners";
    - Line  272:        <`ClimbingBoxLoader` color="#1890ff" loading={true} size={20} />

• 以上两个文件四处地方修改好后编译即可.

  Loading使用的官方地址

修改后台入口

　我们进入后台的入口默认的是 /@manage 有人觉的不安全,我还是那句话 (小声逼逼,谁会去你后台..不会加强一下密码么)

• 默认的入口 xxx.xxx/@manage /@manage默认的入口
• 修改后入口 xxx.xxx/xxxxx /xxxx是你修改后自己自定义的入口

开始修改

• Alist前端文件地址:https://github.com/alist-org/alist-web

• 修改下方提供的三个文件即可

  - alist-web\src\App.tsx
    - Line 21:      Route path="/**@manage**/"
  
  - alist-web\src\pages\list\index.tsx
      - Line 109:     history.push("/**@manage**");
  
  - alist-web\src\pages\list\layout\footer.tsx
    - Line 17:      ReactLink to="/**@manage**"
  
  - alist-web\src\pages\manage\index.tsx
    - Line 196:     Link to="/**@manage**"

　以上就是我自行摸索修改的Alist前端文件,其他的没有想着要改的了,还有一个要改的地方就是你自行编译后和后端也合并编译完毕启动软件后自行生成的 /data/config.json文件下的第五行 "assets": "xxx", 静态资源地址,如果要修改的话这个地址在 Alist后端文件 https://github.com/Xhofe/alist

• 修改位置

• alist\conf\config.go

  • Line 41: Assets: "https://npm.elemecdn.com/alist-web@$version/dist",

   - 上述第41行的链接替换成你编译好的前端文件上传到网络当中引用的静态资源地址.
   - 如果不进行上传引用的话你将无法使用这个`网络静态资源CDN`,你可以去config.json文件 把路径改成本地(本地路径是 "/"),不然会白屏 无法使用.