当前位置：首页 > news >正文

3步轻松定制你的Emby媒体服务器：从界面美化到功能增强全攻略

news 2026/5/7 11:13:08

3步轻松定制你的Emby媒体服务器：从界面美化到功能增强全攻略

【免费下载链接】Emby.CustomCssJSEasy to manage your Custom JavaScript and Css to modify Emby项目地址: https://gitcode.com/gh_mirrors/em/Emby.CustomCssJS

你是否厌倦了千篇一律的Emby界面？想不想给你的媒体服务器换上专属皮肤，甚至添加一些实用的小功能？今天我要介绍的这个神器——Emby.CustomCssJS插件，就像给你的Emby服务器安装了一个"魔法工具箱"，让你能像装修房子一样自由定制界面和功能。

为什么你需要这个插件？

想象一下，你的Emby服务器就像一个标准化的精装房，功能齐全但缺乏个性。Emby.CustomCssJS插件就是那支神奇的画笔，让你可以：

改变界面颜色和布局：从深色模式到亮色主题，从紧凑布局到宽屏显示
添加实用功能：比如快速搜索按钮、快捷操作菜单、播放统计面板
优化用户体验：调整字体大小、改进按钮位置、增强视觉反馈
解决特定需求：针对特定设备或浏览器进行界面适配

这个插件的核心原理很简单：通过注入自定义的CSS样式和JavaScript代码，在不修改Emby核心代码的情况下，实现界面和功能的个性化定制。就像给你的Emby穿上了一件可随时更换的"外衣"。

第一步：快速安装部署指南

准备工作检查清单

在开始之前，请确保你已经具备以下条件：

运行中的Emby服务器（推荐使用Docker版本，特别是emby/embyserver:beta镜像）
服务器访问权限（SSH或文件管理器访问权限）
基础命令行操作能力（复制文件、编辑配置文件等）

Docker环境一键安装（推荐）

如果你使用的是Docker版Emby服务器，安装过程就像点外卖一样简单。打开终端，输入以下命令：

wget -O script.sh --no-check-certificate https://raw.githubusercontent.com/Shurelol/Emby.CustomCssJS/main/src/script.sh && bash script.sh

这个脚本会自动完成所有配置工作，包括：

下载必要的插件文件
复制到正确的目录
修改前端配置文件
提示你重启服务

手动安装步骤详解

如果你更喜欢手动操作，或者遇到一键脚本不兼容的情况，可以按照以下步骤进行：

服务端安装：

将src/Emby.CustomCssJS.dll文件复制到Emby的插件目录（通常是/volume1/@appdata/EmbyServer/plugins）
将src/CustomCssJS.js文件复制到前端模块目录（通常是system/dashboard-ui/modules）
编辑system/dashboard-ui/app.js文件，在Promise.all(list.map(loadPlugin))这行代码之前添加：
```
list.push("./modules/CustomCssJS.js"),
```

重启Emby服务：安装完成后，需要重启Emby服务器让插件生效。Docker用户可以使用：

docker restart 你的容器名称

第二步：个性化定制实战教程

安装完成后，打开Emby管理界面，你会在左侧菜单看到新增的"自定义JS和CSS"选项。点击进入，就来到了你的定制工作室。

界面美化：从零开始设计专属主题

基础颜色调整示例：

/* 将Emby主色调改为深蓝色 */ .backgroundContainer { background-color: #1a1a2e !important; } /* 修改导航栏颜色 */ .navMenu { background-color: #16213e !important; } /* 调整卡片阴影和圆角 */ .card { border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; }

字体和排版优化：

/* 统一字体设置 */ body { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif !important; font-size: 14px !important; } /* 标题样式增强 */ .pageTitle { font-weight: 600 !important; color: #ffffff !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important; }

功能增强：让Emby更智能

添加快捷操作按钮：

// 在播放器界面添加下载按钮 function addDownloadButton() { const playerPage = document.querySelector('.videoPlayerContainer'); if (playerPage && !document.getElementById('customDownloadBtn')) { const downloadBtn = document.createElement('button'); downloadBtn.id = 'customDownloadBtn'; downloadBtn.innerHTML = '📥 下载'; downloadBtn.style.cssText = ` position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 25px; cursor: pointer; z-index: 9999; font-weight: bold; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); `; downloadBtn.onclick = function() { // 这里可以添加下载逻辑 alert('下载功能需要根据你的具体需求实现'); }; playerPage.appendChild(downloadBtn); } } // 页面加载完成后执行 setTimeout(addDownloadButton, 3000);

增强搜索功能：

// 为搜索框添加自动完成功能 function enhanceSearchBox() { const searchInput = document.querySelector('input[type="search"]'); if (searchInput) { searchInput.setAttribute('autocomplete', 'on'); searchInput.setAttribute('list', 'searchSuggestions'); // 创建建议列表 const datalist = document.createElement('datalist'); datalist.id = 'searchSuggestions'; // 这里可以添加常用的搜索建议 const suggestions = ['电影', '电视剧', '音乐', '照片', '最近添加']; suggestions.forEach(item => { const option = document.createElement('option'); option.value = item; datalist.appendChild(option); }); document.body.appendChild(datalist); } }

第三步：多平台部署与同步

桌面客户端配置

想让你的定制效果在桌面客户端也生效？只需要一个简单的文件复制操作：

将src/CustomCssJS.js文件复制到桌面客户端的electronapp/plugins目录
重启客户端应用，你的自定义样式和脚本就会自动加载

移动应用（安卓）适配

安卓端的配置稍微复杂一些，但按照以下步骤操作也很简单：

复制文件：将src/CustomCssJS.js复制到assets/www/modules目录
修改配置文件：编辑assets/www/app.js，在Promise.all(list.map(loadPlugin))之前添加：
```
list.push("./modules/CustomCssJS.js"),
```
解除限制：编辑assets/www/native/android/apphost.js，将features.restrictedplugins的值改为false

安全使用与问题排查

重要安全提醒

⚠️ XSS风险警告：自定义JavaScript代码具有强大的能力，但也可能带来安全风险。请务必：

只使用信任的代码：不要随意粘贴来源不明的代码片段
定期检查代码：确保没有恶意脚本
备份重要数据：在进行重大修改前备份你的配置

数据存储机制

插件使用浏览器的localStorage来存储配置信息，包括：

服务器端脚本配置：customcssServerConfig_${serverID}和customjsServerConfig_${serverID}
本地脚本配置：customcssLocalConfig和customjsLocalConfig

重要提示：清除浏览器数据会删除这些配置，建议定期导出重要配置。

常见问题解决方案

问题1：插件安装后不显示

检查Emby服务器版本是否兼容（基于mediabrowser.server.core 4.8.0.24-beta）
确认插件文件已复制到正确的目录
检查config文件夹的读写权限

问题2：自定义代码不生效

打开浏览器开发者工具（F12），查看控制台是否有错误信息
确认代码语法正确，没有JavaScript错误
检查CSS选择器是否正确匹配Emby的DOM结构

问题3：配置错误导致无法访问如果因为错误的配置导致无法进入Emby，可以通过删除localStorage中的相关键值来恢复：

打开浏览器开发者工具
进入Application（应用）标签
找到Local Storage，删除以下键值：
- customcssServerConfig_你的服务器ID
- customjsServerConfig_你的服务器ID
- customcssLocalConfig
- customjsLocalConfig

进阶技巧与创意灵感

响应式设计适配

/* 针对不同屏幕尺寸的适配 */ @media (max-width: 768px) { /* 移动端优化 */ .card { margin: 10px !important; width: calc(100% - 20px) !important; } /* 调整字体大小 */ body { font-size: 13px !important; } } @media (min-width: 1200px) { /* 大屏幕优化 */ .itemContainer { grid-template-columns: repeat(6, 1fr) !important; } }

动态主题切换

// 根据时间自动切换主题 function autoThemeSwitcher() { const hour = new Date().getHours(); const isNight = hour >= 18 || hour <= 6; if (isNight) { // 夜间模式 document.documentElement.style.setProperty('--primary-bg', '#0f0f23'); document.documentElement.style.setProperty('--text-color', '#e0e0e0'); } else { // 日间模式 document.documentElement.style.setProperty('--primary-bg', '#f5f5f5'); document.documentElement.style.setProperty('--text-color', '#333333'); } } // 每小时检查一次 setInterval(autoThemeSwitcher, 3600000);

性能优化建议

CSS优化：
- 使用CSS变量（Custom Properties）便于主题管理
- 避免使用!important过度，尽量提高选择器特异性
- 合并相似的样式规则，减少重复代码
JavaScript优化：
- 使用事件委托减少事件监听器数量
- 避免在循环中进行DOM操作
- 使用requestAnimationFrame进行动画优化
加载策略：
- 将不影响首屏的脚本延迟加载
- 使用CSS的will-change属性提示浏览器优化