企业官网建设流程全解析

Folia 手机安装：三步让全屏歌词动画在手机上跑起来

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major

地铁里掏出手机，歌响起来，歌词在全屏动画里逐字浮现——这就是 Folia 手机安装 后你要得到的效果。全程三步，大约 5 分钟，电脑上那台歌词播放器直接住进你的口袋。

第一步：把 Folia Web 版部署到 Vercel，拿到手机能打开的 HTTPS 地址

三条部署路径里，Vercel 一键部署是门槛最低的一条：不用服务器、不用配端口，HTTPS 自带，部署完直接得到一个手机浏览器能打开的域名。PWA 能否装进主屏幕，就卡在这个 HTTPS 上。

1. 按 docs/technical.md 中的一键部署入口，把 Folia 仓库导入 Vercel，项目会自动构建
2. 构建完成后，在项目设置的环境变量面板里补齐配置，核心就这几项：

QQ 音乐走的是仓库内置的 serverless 入口，不需要单独部署 API 实例，扫码登录细节见 docs/qq-music-deployment.md。酷狗则需要自己部署 KuGouMusicApi 并填写VITE_KUGOU_API_BASE。

另外两条路径，一句话带过

• Docker 全栈：适合 NAS 用户，按 deploy/docker/README.md 把compose.yaml与.env放进空目录，SYNC_TOKEN填至少八位的随机串（openssl rand -hex 32生成），执行docker compose up -d，默认访问http://NAS-IP:18080。默认是 HTTP，要装 PWA 得让 NAS 反向代理终止 HTTPS 并挂浏览器信任的证书。
• 克隆部署：克隆仓库后需 Node.js 24 以上，npm install，创建.env.local填变量，npm run build产出静态产物，再丢到任意托管平台。

第二步：从 Chrome 或 Safari 把 Folia 添加到手机主屏幕

地址就绪后，两台手机各四下操作，主屏幕就会多出一个 Folia 图标，点它直接以独立全屏窗口启动，没有地址栏和标签页。

安卓（Chrome）：

1. 用手机浏览器打开 Folia 地址
2. 点右上角菜单
3. 选「添加到主屏幕」或「安装应用」
4. 确认名称为 Folia，点「添加」

iPhone（Safari）：

1. 用 Safari 打开 Folia 地址
2. 点底部分享按钮
3. 上滑，点「添加到主屏幕」
4. 点「添加」

登录状态存在手机浏览器自己的 localStorage 里，换设备就得重新扫一次码——这是 PWA 与原生 App 的小差异，换来的是零安装成本。

第三步：点开图标播放，竖屏全屏歌词动画自动重排

点图标后进入的就是手机上不缩水的 Folia：歌词动画与桌面端是同一套渲染逻辑，每种风格都有独立的排版逻辑和一组可调参数，窗口尺寸一变，画面就实时重排。竖着拿手机时，歌词位置自动调整，动画一拍不落。

「流光」风格把光影铺在黑底之上，OLED 屏上纯黑区域直接熄屏，通勤黑灯环境下沉浸感尤其足：

配色也可以交给 AI：它依据歌曲的情绪与歌词内容，自行给主题生成一套色板。这条路径在手机上一样走通，前提是部署时填了VITE_AI_PROVIDER与对应的密钥变量（GEMINI_API_KEY/OPENAI_API_KEY那一组），没填就只能用内置主题。

Folia 手机端能力边界：在线音源全可用，本地导入用不了

手机上能做的：在线搜索与播放——网易云、QQ 音乐、酷狗三个音源都可用，登录状态存在手机浏览器里；全屏歌词动画；Navidrome 自建曲库，Docker 部署预置凭据时甚至免登录。

手机上做不了的只有一件：导入手机本地的音乐文件。目录导入基于 File System Access API，这是桌面 Chromium 系浏览器才有的能力，手机浏览器没有这个入口，仓库里src/services/localLibraryAvailability.ts的可用性检查也明确把它限定在安全上下文加桌面浏览器。

一句话结论：手机上的 Folia 定位是「在线听歌 + 歌词动画」，想听自己的歌，交给 Navidrome。

接入 Navidrome 自建曲库，在手机上听自己的歌

补上「听自己的歌」这块缺口只要四步：

1. 在 NAS 上用 Docker 起 Navidrome，指向你的音乐目录
2. 手机里打开 Folia 的账户页，填入 Navidrome 地址与账号
3. Folia 自动拉取曲库、封面与歌词
4. 歌词动画照常驱动

如果你走的是 Docker 部署路线，第 2 步可以省掉：在.env里同时填上NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项，backend 会通过/api/navidrome-preset下发凭据，任何新打开的浏览器自动登录并启用 Navidrome——手机、电视、电脑不用各登一次。注意NAVIDROME_URL必须是各设备都能直接连上的地址，Folia 走 HTTPS 时它也要是 HTTPS，否则浏览器会拦截混合内容。

⚠️ 局域网里能打开 Folia 页面的人都能读到这组预置凭据，建议在 Navidrome 里单独建一个账号给 Folia 用。

Folia PWA 安装踩坑速查：四个高频症状的对应解法

手机上看不到安装入口→ 原因：站点没跑在 HTTPS 下，或浏览器不对（安卓用 Chrome、iPhone 用 Safari）。地址确认是 HTTPS 后刷新一次页面——安装提示往往只在首次访问时给出。

重新部署了新版，手机还是旧界面→ 原因：Service Worker 按autoUpdate策略注册，新版本要等下次打开才接管。长期不更新时，清除一次站点数据，或移除图标后重新添加到主屏幕。

想导入本地音乐，找不到入口→ 原因：File System Access API 只在桌面 Chromium 系浏览器提供，手机浏览器没有替代。解法就是 Navidrome：歌放 NAS 上流式提供给手机，封面与歌词自动补齐。

地铁里只剩一格信号，应用能开但歌放不出来→ 原因：界面资源已被 Service Worker 缓存，应用本身很快打开，但音乐流需要网络。想完全离线听歌做不到。

拿到地址、图标进主屏幕、点开听歌——Folia 就是口袋里那台全屏歌词动画播放器。想跨设备同步主题，进阶入口在 deploy/docker/README.md 的 Sync Server 一节。

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major