homepage使用TMDB热门影视剧海报做背景-老付blog

每次登录MoviePilot看到不一样的背景图很惊艳，于是想着把一直使用的homepage也改成这种随机背景。

MoviePilot 登录页面的背景图数据主要调用自 TMDB (The Movie Database) 的热门电影或电视剧的海报/剧照。

1. 数据来源：TMDB API

MoviePilot 会通过 API 请求 TMDB 的 “Trending”（趋势/热门） 接口。它会随机抓取当前热门的影视项目，并获取其 backdrop（背景大图）或 poster（海报）的资源地址。

在 MoviePilot 的代码逻辑中，前端通常会向后端请求一个特定的 API 路径：

API 路径示例：/api/v1/login/wallpapers

方案一：调用 MoviePilot API

API 地址：http://[你的MoviePilot地址]:[端口]/api/v1/login/wallpapers

可以看到已经拿到了 API 地址和返回的数据结构（一个包含图片 URL 的纯数组）。
由于主页是通过加密的 https://home.com 访问的，但脚本尝试请求非加密的 http://192.168.99.3:3000。出于安全考虑，浏览器严禁在 HTTPS 页面中通过脚本调用 HTTP 接口。CORS & Private Network (跨域与私有网络限制)：浏览器拒绝了从公网域名向内网 IP 发起的请求。
方法行不通，那就直接调用TMDB的api。

方案二：

这套方案通过直接调用 TMDB 官方 HTTPS 接口，完美绕过了之前遇到的 Mixed Content（混合内容拦截）和 CORS（跨域）问题。

由于 Homepage是静态配置的，它没有直接提供“调用外部接口作为背景”的选项，要在Homepage实现每次刷新随机切换背景可以通过修改 custom.js 来实现：

先去TMDB 官方申请api https://www.themoviedb.org/settings/api
进入你的 Homepage 配置目录（通常是 config 文件夹）。
在 custom.js 文件中添加以下代码：

(function() {
    // ================= 配置区 =================
    const TMDB_API_KEY = 'TMDB_API_KEY'; 
    
    // 在 URL 后添加时间戳 _t=${new Date().getTime()} 防止浏览器缓存结果导致图片不刷新
    const API_URL = `https://api.themoviedb.org/3/trending/all/day?api_key=${TMDB_API_KEY}&language=zh-CN&_t=${new Date().getTime()}`;
    // ==========================================

    async function fetchTmdbWallpaper() {
        try {
            const response = await fetch(API_URL);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            
            const data = await response.json();
            const allItems = data.results.filter(item => item.backdrop_path);
            
            // 锁定前 20 热门
            const topTenItems = allItems.slice(0, 20);
            
            if (topTenItems.length > 0) {
                const randomIndex = Math.floor(Math.random() * topTenItems.length);
                const randomItem = topTenItems[randomIndex];
                
                // 【优化点】将 original 改为 w1280，大幅提升图片加载速度
                const imageUrl = `https://image.tmdb.org/t/p/original${randomItem.backdrop_path}`;
                
                console.log(`[Homepage] 随机切换至: ${randomItem.title || randomItem.name}`);
                applyBackground(imageUrl);
            }
        } catch (error) {
            console.error("[Homepage] 背景加载失败: ", error);
            applyBackground("https://image.tmdb.org/t/p/original/coaPCIqQBPUZsOnJcWZxhaORcDT.jpg");
        }
    }

    function applyBackground(url) {
        const body = document.body;
        // 使用 CSS 变量预加载，减少白屏感
        const img = new Image();
        img.src = url;
        img.onload = function() {
            body.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${url}')`;
            body.style.backgroundSize = 'cover';
            body.style.backgroundPosition = 'center';
            body.style.backgroundAttachment = 'fixed';
            body.style.backgroundRepeat = 'no-repeat';
        };
    }

    fetchTmdbWallpaper();
})();