ubuntu jellyfin定制主题

Ubuntu 下 Jellyfin 定制主题实用指南

一 前置准备与访问路径

• 在 Ubuntu 上安装并启动 Jellyfin 后，使用浏览器访问 http://服务器IP:8096 进入 Web 管理端。
• 进入 控制台（Dashboard）> 常规（General），在 自定义 CSS 代码（Custom CSS） 区域即可添加你的样式；保存后刷新页面即可看到效果。该方法无需改动服务器文件，适合快速尝试与迭代。

二 三种常用定制方式

• 方式一 使用在线主题一键导入

  • 在 控制台 > 常规 > 自定义 CSS 代码 中粘贴主题提供的 @import 链接，保存并刷新。
  • 示例（JellyFlix：仿 Netflix 风格）：
    • 基础版：

      @import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");
      

    • 带 Logo 版：

      @import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");
      @import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/addons/Logo.css");
      

    • 配色扩展（蓝色/紫色）：

      @import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@9.0.4/addons/jf-blue.css");
      @import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@9.0.4/addons/jf-purple.css");
      

  • 适合快速切换整体风格；注意版本号与链接可用性。

• 方式二 使用 JellySkin 等单文件 CSS 方案

  • 将主题作者提供的 CSS 内容直接粘贴到 自定义 CSS 代码 中，保存并刷新。
  • 适合轻量级定制（如配色、间距、按钮样式等）；如需恢复，清空 CSS 并刷新即可。

• 方式三 进阶修改前端资源（系统级，持久化）

  • 适用场景：替换 Logo、全局背景、深度样式覆盖等。
  • 基本步骤：
    1. 备份原始文件与配置；
    2. 定位前端资源目录（常见为 /usr/share/jellyfin/web 或 /usr/lib/jellyfin/web；不同安装方式与版本可能位于 /var/lib/jellyfin 下的相应子目录）；
    3. 替换或新增资源（如 /usr/share/jellyfin/web/css/ 下的样式文件、替换 /usr/share/jellyfin/web/logo.svg 等）；
    4. 重启服务生效：sudo systemctl restart jellyfin；
    5. 清理浏览器与 CDN 缓存后验证。
  • 提示：该方法在升级后可能被覆盖，建议记录改动并配合自定义 CSS 做增量覆盖。

三 常见问题与排查

• 样式不生效或只在某些页面生效
  • 确认 CSS 规则优先级足够（必要时使用 !important），并避免语法错误；不同页面（如 Web/Android TV/iOS）渲染差异可能导致效果不同。
• 修改后看不到变化
  • 强制刷新浏览器缓存（如 Ctrl+Shift+R），或在隐私/无痕窗口测试；若使用反向代理/CDN，请刷新其缓存。
• 升级后自定义丢失
  • 方式三的改动可能被覆盖。建议将核心样式放到 自定义 CSS，并在升级后复核；系统级改动请保留补丁脚本或说明以便重放。
• Logo 与背景替换无效
  • 先确认对应元素选择器是否正确；若通过方式三替换资源，确保新资源路径、文件名与权限正确，并重启服务后再测试。

四 安全与维护建议

• 任何改动前先做完整备份（配置文件、数据库、前端目录与自定义 CSS）。
• 尽量优先使用 自定义 CSS 实现外观定制，减少对系统文件的改动，便于回滚与升级。
• 若需对外观做长期维护，建议将 CSS 纳入版本控制（如 Git），并记录每次修改的用途与日期。