一般来说自定义头部和自定义内容的修改已经可以满足大部分使用者的需要，但是肯定还是会有不少人想要折腾一下，魔改前端代码。以下代码是我自己魔改了前端的一些地方，虽然可能位置和行数不太对，大概浮动的地方不会差很大的。
想要修改前端代码就需要编译Alist，不会编译可以看下面这篇文章，讲的很详细：

Alist网盘 - Linux编译教程

编译Alist可以修改前/后端源码，不管是出于想折腾还是想要修改源码，大家都可以尝试编译。1.编译前准备1.1 编...

如果懒得编译、不会编译但是又想使用的伙伴，可以联系我（小偿）：
或者添加QQ：543078356

1.修改并取消加密文件夹出现的登录按钮

修改并取消的原因：防止登录与后台泄露（如何修改登录和后台地址放在了文章最后）
源码文件位置：alist-web\src\pages\home\Obj.tsx
源码文件位置：alist-web\src\pages\home\Password.tsx

{/* 上面是原来的 下面是我自己改的，大概位置在82行，找不到可以用浏览器搜索 */}
          {/* <Text>{t("global.have_account")}</Text> */}
          {/* <Text
            color="$info9"
            as={LinkWithBase}
            href={`/@login?redirect=${encodeURIComponent(location.pathname)}`}
          >
            {t("global.go_login")}
          </Text> */}


          <Text>{t("需输入密码访问")}</Text>

修改前后对比图：
修改并取消加密文件夹出现的登录按钮

2.修改未登录时后台显示

源码文件位置：alist-web\src\pages\manage\users\Profile.tsx

{/* 147行开始修改,可查关键字 */}
              <AlertIcon mr="$2_5" />
              {/* <AlertTitle mr="$2_5">{t("users.guest-tips")}</AlertTitle> */}
              <Text>{t("该页面暂不公开")}</Text>
              <Text>{t("点击左侧回到主页")}</Text>
              {/* <AlertDescription>{t("users.modify_nothing")}</AlertDescription> */}
            </Alert>
            <HStack spacing="$2">
              {/* <Text>{t("global.have_account")}</Text> */}
              {/* <Text
                color="$info9"
                as={LinkWithBase}
                href={`/@login?redirect=${encodeURIComponent(
                  location.pathname,
                )}`}
              >
                {t("global.go_login")}
              </Text> */}
              {/* 图片内容可以自己换或者不要都行 */}
              <img src="https://p0.meituan.net/csc/21f062962752c1b0e8c22f93a420a8c73038939.png" width="50%" height ="50%"></img>
            </HStack>
          </>
        }
      >
      {/* 310行左右,可查关键词,原来位置显示的内容,红色字体的哪种权限,修改代表隐藏 */}
      {/* <HStack wrap="wrap" gap="$2" mt="$2">
        <For each={UserPermissions}>
          {(item, i) => (
            <PermissionBadge can={UserMethods.can(user(), i())}>
              {t(`users.permissions.${item}`)}
            </PermissionBadge>
          )}
        </For>
      </HStack> */}

修改后的对比预览图：
未登录时后台对比图

3.默认简体中文和取消语言选择按钮

3.1 默认简体中文


点击右侧按钮下载zh-CN.zip，将其上传至Alist-web文件夹内：

cd alist-web
unzip zh-CN.zip
rm zh-CN.zip

代码说明：

  1. 进入前端文件夹里面
  2. 解压
  3. 删除语言包压缩包

删除en文件夹，将zh-CN改为en文件夹（或者把en文件夹内的文件替换为zh-CN文件夹也可以）

node ./scripts/i18n.mjs

最后重新编译一下语音


点击右侧按钮下载zh-CN.zip，将其上传至Alist-web文件夹内：

cd alist-web
unzip zh-CN.zip
rm zh-CN.zip

代码说明：

  1. 进入前端文件夹里面
  2. 解压
  3. 删除语言包压缩包

删除en文件夹，语言文件夹里面只剩下了 lang/zh_CN，这样默认使用中文

node ./scripts/i18n.mjs

最后重新编译一下语音

删除英文语言文件后的错误

index.c125b016.js:formatted:25798 Uncaught (in promise) TypeError: Is[or] is not a function
    at index.c125b016.js:formatted:25798:28
    at index.c125b016.js:formatted:25801:6
    at index.c125b016.js:formatted:20388:25
    at D_ (index.c125b016.js:formatted:25805:12)
    at index.c125b016.js:formatted:796:19
    at Tt (index.c125b016.js:formatted:262:9)
    at y (index.c125b016.js:formatted:796:12)
    at get children [as children] (index.c125b016.js:formatted:25903:48)
    at Object.fn (index.c125b016.js:formatted:1059:36)
    at Fs (index.c125b016.js:formatted:440:15)
复现方式：将浏览器的语言切换成英文，然后打开AList就会看到

暂时解决办法

  • 将en语言包加回来，把里面的改成中文（方案一）
  • 将en加回来，与中文同时存在

3.2 取消语言选择按钮

关于如何设置简体中文在3.1已说明，包括浏览器语言为英文报错的解决方案
源码文件位置：alist-web\src\pages\home\toolbar\LocalSettings.tsx

              {/* 第122行隐藏即可，可查关键字 */}
              {/* <SwitchLanguageWhite /> */}

修改前后对比图：
取消语言选择按钮

4.将登录页面的“登录到”隐藏

源码文件位置：alist-web\src\pages\login\index.tsx

  const title = createMemo(() => {
    // 45行左右取消后台显示的 登录到 字样
  //   return `${t("login.login_to")} ${getSetting("site_title")}`
  return `${getSetting("site_title")}`
  })

修改前后对比图：
隐藏“登录到”

5.删除底部内容（彻底地）

修改后台地址后，输入 域名/@manage 会发现自定义的内容失效了，底部的登录（管理）入口出现了，暴露了我们修改后的管理地址，直接从根将这个能暴露我们后台登录地址的信息除掉

但是要自己在底部自定义一个底部信息，保留一下版权信息


源码文件位置：alist-web\src\pages\home\Footer.tsx

    {/*  第12行隐藏即可，可查关键字
      <HStack spacing="$1">
        <Anchor href="https://github.com/alist-org/alist" external>
          {t("home.footer.powered_by")}
        </Anchor>
        <span>|</span>
        <AnchorWithBase
          as={Link}
          href={UserMethods.is_guest(me()) ? "/@login" : "/@manage"}
        >
          {t(UserMethods.is_guest(me()) ? "login.login" : "home.footer.manage")}
        </AnchorWithBase>
      </HStack>
    */}

修改前后对比图：
删除底部内容

6.修改文件图标

源码文件位置：alist-web\src\utils\icon.ts
图标库：https://solid-icons.vercel.app/
这里按照自己需求改即可

懒人代码 

import {
  BsFileEarmarkWordFill,
  BsFileEarmarkExcelFill,
  BsFileEarmarkPptFill,
  BsFileEarmarkPdfFill,
  BsFileEarmarkPlayFill,
  BsFileEarmarkMusicFill,
  BsFileEarmarkFontFill,
  BsFileEarmarkImageFill,
  BsFileEarmarkMinusFill,
  BsApple,
  BsWindows,
  BsFileEarmarkZipFill,
  BsMarkdownFill,
  BsFiletypeYml,
  BsFiletypeXml
} from "solid-icons/bs"
import { 
  SiAdobephotoshop, 
  SiAdobepremierepro,
  SiAdobeillustrator,
  SiAdobeaftereffects,
  SiAdobeaudition,
  SiAdobeindesign,
  SiTypescript,
  SiGnubash,
  SiJavascript,
  SiPhp
} from "solid-icons/si"
import {
  FaSolidDatabase,
  FaSolidBook,
  FaSolidCompactDisc,
  FaSolidLink,
} from "solid-icons/fa"
import { IoFolder } from "solid-icons/io"
import { ImAndroid } from "solid-icons/im"
import { Obj, ObjType } from "~/types"
import { ext } from "./path"
import {
  VscodeIconsFileTypeAi2,
  VscodeIconsFileTypePhotoshop2,
} from "~/components"
import { SiAsciinema } from "solid-icons/si"
import { getArchiveExtensions } from "~/store/archive"
import { FaBrandsGolang,FaBrandsJava,FaBrandsPython } from 'solid-icons/fa'
import { BiSolidFileJson,BiSolidFileCss,BiSolidFileHtml } from 'solid-icons/bi'

const iconMap = {
  "dmg,ipa,plist,tipa": BsApple,
  "exe,msi": BsWindows,
  "zip,gz,rar,7z,tar,jar,xz": BsFileEarmarkZipFill,
  apk: ImAndroid,
  "db,db-shm,db-wal,sql": FaSolidDatabase,
  md: BsMarkdownFill,
  epub: FaSolidBook,
  iso: FaSolidCompactDisc,
  m3u8: BsFileEarmarkPlayFill,
  "doc,docx": BsFileEarmarkWordFill,
  "xls,xlsx,csv": BsFileEarmarkExcelFill,
  "ppt,pptx": BsFileEarmarkPptFill,
  pdf: BsFileEarmarkPdfFill,
  // Adobe
  "psd,pdd": SiAdobephotoshop,
  prproj: SiAdobepremierepro,
  "ai,ait,eps,epsf,ps": SiAdobeillustrator,
  aep: SiAdobeaftereffects,
  sesx: SiAdobeaudition,
  indd: SiAdobeindesign,
  // code
  go: FaBrandsGolang,
  java: FaBrandsJava,
  pnp:SiPhp,
  "py,pyc,pyo,pyi,pyw,pyd,pyx": FaBrandsPython,
  "ts,tsx": SiTypescript, 
  "yaml,yml,toml": BsFiletypeYml,
  xml:BsFiletypeXml,
  sh: SiGnubash,
  json: BiSolidFileJson,
  "js,mjs,cjs": SiJavascript,
  css:BiSolidFileCss,
  html:BiSolidFileHtml,
}

7.修改登录地址和后台地址

批量替换。@login是登录地址，@manage是后台地址，不需要代码。
修改登录地址和后台地址

8.我的网盘&交流群

8.1 简单网盘

欢迎前往我的网盘里玩：https://pan.ios1.top/

8.2 有偿代搭网盘

可以选择是否进行编译

  • 联系微信：lyy66788zzz
  • 私聊TG的双向Bot：@iOSjdy_bot

8.3 添加交流群组


参考地址：AnWen's Docs

END
本文作者： 文章标题：Alist美化教程 - 修改前端代码
 本文地址：https://blog.ios1.top/archives/31.html
 版权说明：若无注明，本文皆简单博客原创，转载请保留文章出处。
最后修改：2025 年 02 月 05 日
© 允许规范转载
赞赏支持，更有情怀