手把手教你为 zibll 子比主题添加实时热搜聚合模块，涵盖 12 大平台热点数据，提升网站内容新鲜度与 SEO 排名。含 API 状态解析。
一、zibll 子比主题热搜聚合功能详解
在 WordPress 主题优化中，实时热点追踪是提升用户粘性与搜索引擎收录的关键。本文以 2025 版 zibll 子比主题为例，演示如何通过添加每日聚合热搜模块实现网站内容动态更新。
二、当前 API 状态与热搜数据展示
系统已成功加载 12 个平台数据，11 个平台数据正常，1 个平台（百度）因 API 问题使用替代数据：
注意事项：
- 确保 API 接口稳定性，避免因数据延迟影响用户体验；
- 定期清理无效缓存，保证数据实时性。
使用教程：
复制代码，直接在网站根目录新建html文件即可
<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>热搜聚合平台 Www.FuLiWu.Vip</title>
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\">
<style>
:root {
--primary-color: #3a86ff;
--secondary-color: #8338ec;
--background-color: rgba(248, 249, 250, 0.9);
--card-background: rgba(255, 255, 255, 0.95);
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #e9ecef;
--shadow-color: rgba(0, 0, 0, 0.05);
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
}
.dark-mode {
--primary-color: #60a5fa;
--secondary-color: #a78bfa;
--background-color: rgba(17, 24, 39, 0.92);
--card-background: rgba(31, 41, 55, 0.95);
--text-primary: #f9fafb;
--text-secondary: #9ca3af;
--border-color: #374151;
--shadow-color: rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: \'Inter\', \'PingFang SC\', \'Microsoft YaHei\', sans-serif;
}
body {
color: var(--text-primary);
padding: 20px;
transition: background-color 0.3s ease, color 0.3s ease;
background-image: url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjZmZmZmZmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VlZWVlZSIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VlZWVlZSIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+Cjwvc3ZnPg==\');
background-attachment: fixed;
position: relative;
}
body::before {
content: \'\';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--background-color);
z-index: -1;
}
.dark-mode body {
background-image: url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjMTExODI3Ij48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIxMjgzNiIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIxMjgzNiIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+Cjwvc3ZnPg==\');
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
background-color: var(--card-background);
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 25px var(--shadow-color);
}
.header-left {
display: flex;
flex-direction: column;
}
h1 {
color: var(--text-primary);
margin-bottom: 10px;
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
}
h1::after {
content: \'\';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border-radius: 3px;
}
.update-time {
color: var(--text-secondary);
font-size: 0.9rem;
display: flex;
align-items: center;
margin-top: 5px;
}
.update-time i {
margin-right: 6px;
}
.header-right {
display: flex;
gap: 15px;
}
.theme-toggle {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.2rem;
cursor: pointer;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
.theme-toggle:hover {
background-color: var(--border-color);
color: var(--text-primary);
}
.refresh-btn {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--primary-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.refresh-btn:hover {
background-color: var(--secondary-color);
}
.refresh-btn:active {
transform: scale(0.98);
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.card {
background-color: var(--card-background);
border-radius: 16px;
box-shadow: 0 10px 25px var(--shadow-color);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px var(--shadow-color);
}
.card-header {
padding: 20px;
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.card-header::before {
content: \'\';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
z-index: -1;
}
.card-header h2 {
font-size: 1.3rem;
margin: 0;
font-weight: 600;
color: white;
display: flex;
align-items: center;
}
.card-header h2 i {
margin-right: 8px;
font-size: 1.1rem;
}
.card-header .subtitle {
font-size: 0.85rem;
opacity: 0.8;
color: white;
background-color: rgba(255, 255, 255, 0.2);
padding: 4px 10px;
border-radius: 20px;
}
.card-body {
padding: 15px 20px;
}
.hot-list {
list-style: none;
}
.hot-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
transition: background-color 0.2s ease;
}
.hot-item:last-child {
border-bottom: none;
}
.hot-item:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.hot-rank {
width: 28px;
height: 28px;
border-radius: 8px;
background-color: #f0f0f0;
color: var(--text-secondary);
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
margin-right: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.hot-rank.top1 {
background-color: #ef4444;
color: white;
}
.hot-rank.top2 {
background-color: #f59e0b;
color: white;
}
.hot-rank.top3 {
background-color: #3b82f6;
color: white;
}
.hot-title {
flex: 1;
font-size: 0.95rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s ease;
}
.hot-title a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.2s ease;
display: block;
padding: 4px 0;
}
.hot-title a:hover {
color: var(--primary-color);
}
.hot-info {
display: flex;
align-items: center;
font-size: 0.8rem;
color: var(--text-secondary);
margin-left: 10px;
}
.hot-info i {
margin-right: 4px;
}
.loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
color: var(--text-secondary);
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--primary-color);
animation: spin 1s linear infinite;
margin-bottom: 15px;
}
.dark-mode .spinner {
border-color: rgba(255, 255, 255, 0.1);
border-top-color: var(--primary-color);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.error-message {
color: var(--danger-color);
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.error-message i {
font-size: 2rem;
}
.retry-btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
margin-top: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.retry-btn:hover {
background-color: var(--secondary-color);
}
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 15px 20px;
background-color: var(--card-background);
border-radius: 12px;
box-shadow: 0 4px 15px var(--shadow-color);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.status-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--text-secondary);
}
.status-success {
color: var(--success-color);
}
.status-warning {
color: var(--warning-color);
}
.status-error {
color: var(--danger-color);
}
.floating-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border-radius: 50%;
opacity: 0.3;
animation: float 15s infinite linear;
}
.fallback-notice {
background-color: rgba(var(--warning-color-rgb, 245, 158, 11), 0.1);
border-left: 3px solid var(--warning-color);
padding: 8px 12px;
margin-top: 10px;
border-radius: 4px;
font-size: 0.85rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.fallback-notice i {
color: var(--warning-color);
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-100vh) rotate(360deg);
}
}
@media (max-width: 1200px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.header-right {
width: 100%;
justify-content: flex-end;
}
}
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
.card-header {
padding: 15px;
}
.card-body {
padding: 10px 15px;
}
h1 {
font-size: 1.8rem;
}
.status-bar {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: fadeIn 0.5s ease forwards;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
opacity: 0;
animation: fadeIn 0.5s ease forwards;
animation-delay: 0.2s;
}
.hot-item {
opacity: 0;
animation: fadeIn 0.3s ease forwards;
}
.hot-item:nth-child(1) { animation-delay: 0.1s; }
.hot-item:nth-child(2) { animation-delay: 0.15s; }
.hot-item:nth-child(3) { animation-delay: 0.2s; }
.hot-item:nth-child(4) { animation-delay: 0.25s; }
.hot-item:nth-child(5) { animation-delay: 0.3s; }
.hot-item:nth-child(6) { animation-delay: 0.35s; }
.hot-item:nth-child(7) { animation-delay: 0.4s; }
.hot-item:nth-child(8) { animation-delay: 0.45s; }
.hot-item:nth-child(9) { animation-delay: 0.5s; }
.hot-item:nth-child(10) { animation-delay: 0.55s; }
</style>
</head>
<body>
<div class=\"floating-particles\" id=\"particles\"></div>
<div class=\"container\">
<header>
<div class=\"header-left\">
<h1>热搜聚合平台</h1>
<div class=\"update-time\">
<i class=\"fas fa-sync-alt\"></i>
最后更新时间: <span id=\"update-time\">加载中...</span>
</div>
</div>
<div class=\"header-right\">
<button class=\"theme-toggle\" id=\"theme-toggle\" title=\"切换主题\">
<i class=\"fas fa-moon\"></i>
</button>
<button class=\"refresh-btn\" id=\"refresh-btn\">
<i class=\"fas fa-sync-alt\"></i>
刷新数据
</button>
</div>
</header>
<div class=\"status-bar\">
<div class=\"status-item\">
<i class=\"fas fa-server\"></i>
API状态: <span id=\"api-status\">检查中...</span>
</div>
<div class=\"status-item\">
<i class=\"fas fa-chart-line\"></i>
已加载平台: <span id=\"loaded-count\">0</span>/<span id=\"total-count\">12</span>
</div>
<div class=\"status-item\">
<i class=\"fas fa-random\"></i>
数据替换: <span id=\"fallback-count\">0</span> 个平台
</div>
</div>
<div class=\"grid\" id=\"hot-grid\"></div>
</div>
<script>
// 平台列表及配置
const platforms = [
{name: \'哔哩哔哩\', icon: \'fa-brands fa-bilibili\', color: \'#fb7299\', priority: 2},
{name: \'百度\', icon: \'fa-solid fa-compass\', color: \'#4e6ef2\', priority: 1},
{name: \'知乎\', icon: \'fa-brands fa-zhihu\', color: \'#0084ff\', priority: 3},
{name: \'微博热搜\', icon: \'fa-brands fa-weibo\', color: \'#ff8200\', priority: 4, disabled: true},
{name: \'今日头条\', icon: \'fa-solid fa-newspaper\', color: \'#ed4040\', priority: 5},
{name: \'百度贴吧\', icon: \'fa-solid fa-comments\', color: \'#4879bd\', priority: 6},
{name: \'少数派\', icon: \'fa-solid fa-feather-pointed\', color: \'#d71a1b\', priority: 7},
{name: \'IT之家\', icon: \'fa-solid fa-laptop-code\', color: \'#2e74b5\', priority: 8},
{name: \'澎湃新闻\', icon: \'fa-solid fa-rss\', color: \'#ee0000\', priority: 9},
{name: \'36氪\', icon: \'fa-solid fa-rocket\', color: \'#4a4a4a\', priority: 10},
{name: \'稀土掘金\', icon: \'fa-solid fa-gem\', color: \'#1e80ff\', priority: 11},
{name: \'腾讯新闻\', icon: \'fa-solid fa-comment-dots\', color: \'#2c2c2c\', priority: 12}
];
// 备用API列表
const apiEndpoints = [
\'https://api.vvhan.com/api/hotlist\',
\'https://api.codelife.cc/api/hot/list\',
\'https://api.pearktrue.cn/api/dailyhot/\'
];
// 全局变量
let currentApiIndex = 0;
let loadedCount = 0;
let successCount = 0;
let failedCount = 0;
let fallbackCount = 0;
let isDarkMode = false;
let successfulData = {}; // 存储成功获取的数据，用于替换失败的平台
// 初始化页面
function initPage() {
const grid = document.getElementById(\'hot-grid\');
grid.innerHTML = \'\';
loadedCount = 0;
successCount = 0;
failedCount = 0;
fallbackCount = 0;
successfulData = {};
updateLoadedCount();
updateFallbackCount();
updateApiStatus(\'checking\');
// 为每个平台创建卡片
platforms.forEach(platform => {
const card = document.createElement(\'div\');
card.className = \'card\';
card.id = `card-${platform.name}`;
card.style.animationDelay = `${Math.random() * 0.3}s`;
const cardHeader = document.createElement(\'div\');
cardHeader.className = \'card-header\';
cardHeader.style.backgroundColor = platform.color;
const cardBody = document.createElement(\'div\');
cardBody.className = \'card-body\';
// 添加加载中的提示
cardBody.innerHTML = `
<div class=\"loading\">
<div class=\"spinner\"></div>
<span>正在获取${platform.name}热搜...</span>
</div>
`;
card.appendChild(cardHeader);
card.appendChild(cardBody);
grid.appendChild(card);
// 获取该平台的热搜数据
if (platform.disabled) {
// 如果平台被标记为禁用，直接跳过API请求
setTimeout(() => {
cardBody.innerHTML = `
<div class=\"loading\">
<div class=\"spinner\"></div>
<span>正在查找替代数据源...</span>
</div>
`;
// 延迟一下，等待其他平台数据加载
setTimeout(() => {
useFallbackData(platform);
}, 1500);
}, 1000);
} else {
fetchHotData(platform);
}
});
// 初始化主题
initTheme();
// 添加事件监听器
document.getElementById(\'theme-toggle\').addEventListener(\'click\', toggleTheme);
document.getElementById(\'refresh-btn\').addEventListener(\'click\', refreshAllData);
// 创建背景粒子
createParticles();
}
// 创建背景粒子
function createParticles() {
const particlesContainer = document.getElementById(\'particles\');
particlesContainer.innerHTML = \'\';
const particleCount = 15;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement(\'div\');
particle.className = \'particle\';
// 随机大小
const size = Math.random() * 30 + 10;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 随机位置
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100 + 100}%`;
// 随机动画持续时间和延迟
const duration = Math.random() * 30 + 15;
const delay = Math.random() * 10;
particle.style.animationDuration = `${duration}s`;
particle.style.animationDelay = `${delay}s`;
// 随机透明度
particle.style.opacity = Math.random() * 0.2 + 0.1;
particlesContainer.appendChild(particle);
}
}
// 初始化主题
function initTheme() {
// 检查本地存储中的主题设置
const savedTheme = localStorage.getItem(\'theme\');
if (savedTheme === \'dark\') {
enableDarkMode();
} else {
disableDarkMode();
}
// 检查系统主题偏好
const prefersDarkMode = window.matchMedia(\'(prefers-color-scheme: dark)\').matches;
if (prefersDarkMode && !savedTheme) {
enableDarkMode();
}
}
// 启用暗色模式
function enableDarkMode() {
document.body.classList.add(\'dark-mode\');
document.getElementById(\'theme-toggle\').innerHTML = \'<i class=\"fas fa-sun\"></i>\';
isDarkMode = true;
localStorage.setItem(\'theme\', \'dark\');
}
// 禁用暗色模式
function disableDarkMode() {
document.body.classList.remove(\'dark-mode\');
document.getElementById(\'theme-toggle\').innerHTML = \'<i class=\"fas fa-moon\"></i>\';
isDarkMode = false;
localStorage.setItem(\'theme\', \'light\');
}
// 切换主题
function toggleTheme() {
if (isDarkMode) {
disableDarkMode();
} else {
enableDarkMode();
}
}
// 刷新所有数据
function refreshAllData() {
const refreshBtn = document.getElementById(\'refresh-btn\');
refreshBtn.disabled = true;
refreshBtn.innerHTML = \'<i class=\"fas fa-spinner fa-spin\"></i> 刷新中...\';
initPage();
setTimeout(() => {
refreshBtn.disabled = false;
refreshBtn.innerHTML = \'<i class=\"fas fa-sync-alt\"></i> 刷新数据\';
}, 2000);
}
// 更新已加载计数
function updateLoadedCount() {
document.getElementById(\'loaded-count\').textContent = loadedCount;
document.getElementById(\'total-count\').textContent = platforms.length;
// 更新API状态
updateApiStatusBasedOnCounts();
}
// 更新替换计数
function updateFallbackCount() {
document.getElementById(\'fallback-count\').textContent = fallbackCount;
}
// 根据加载计数更新API状态
function updateApiStatusBasedOnCounts() {
if (loadedCount === platforms.length) {
if (successCount === platforms.length) {
updateApiStatus(\'success\');
} else if (failedCount === platforms.length) {
updateApiStatus(\'error\', \'所有API均不可用\');
} else {
updateApiStatus(\'warning\', `${successCount}个平台加载成功，${failedCount}个平台使用替代数据`);
}
}
}
// 更新API状态
function updateApiStatus(status, message = \'\') {
const apiStatusEl = document.getElementById(\'api-status\');
if (status === \'success\') {
apiStatusEl.innerHTML = \'<span class=\"status-success\"><i class=\"fas fa-check-circle\"></i> 正常</span>\';
} else if (status === \'warning\') {
apiStatusEl.innerHTML = `<span class=\"status-warning\"><i class=\"fas fa-exclamation-triangle\"></i> 部分可用 (${message})</span>`;
} else if (status === \'error\') {
apiStatusEl.innerHTML = `<span class=\"status-error\"><i class=\"fas fa-times-circle\"></i> 不可用 (${message})</span>`;
} else if (status === \'checking\') {
apiStatusEl.innerHTML = \'<i class=\"fas fa-spinner fa-spin\"></i> 检查中...\';
}
}
// 获取热搜数据
async function fetchHotData(platform, retryCount = 0) {
const card = document.getElementById(`card-${platform.name}`);
const cardHeader = card.querySelector(\'.card-header\');
const cardBody = card.querySelector(\'.card-body\');
// 如果重试次数超过API端点数量，则尝试使用替代数据
if (retryCount >= apiEndpoints.length) {
useFallbackData(platform);
return;
}
try {
const apiUrl = apiEndpoints[retryCount];
let url;
// 根据不同的API构建不同的URL
if (apiUrl.includes(\'pearktrue\')) {
url = `${apiUrl}?title=${encodeURIComponent(platform.name)}`;
} else if (apiUrl.includes(\'vvhan\')) {
// vvhan API使用不同的参数格式
const typeMap = {
\'哔哩哔哩\': \'bili\',
\'百度\': \'baidu\',
\'知乎\': \'zhihu\',
\'微博热搜\': \'weibo\',
\'今日头条\': \'toutiao\',
\'百度贴吧\': \'tieba\',
\'少数派\': \'sspai\',
\'IT之家\': \'ithome\',
\'澎湃新闻\': \'thepaper\',
\'36氪\': \'36kr\',
\'稀土掘金\': \'juejin\',
\'腾讯新闻\': \'newsqq\'
};
const type = typeMap[platform.name] || \'baidu\';
url = `${apiUrl}?type=${type}`;
} else {
// 其他API的格式
const typeMap = {
\'哔哩哔哩\': \'bilibili\',
\'百度\': \'baidu\',
\'知乎\': \'zhihu\',
\'微博热搜\': \'weibo\',
\'今日头条\': \'toutiao\',
\'百度贴吧\': \'tieba\',
\'少数派\': \'sspai\',
\'IT之家\': \'ithome\',
\'澎湃新闻\': \'thepaper\',
\'36氪\': \'36kr\',
\'稀土掘金\': \'juejin\',
\'腾讯新闻\': \'qq\'
};
const type = typeMap[platform.name] || \'baidu\';
url = `${apiUrl}?type=${type}`;
}
const response = await fetch(url);
const data = await response.json();
// 根据不同的API格式处理数据
let processedData;
if (apiUrl.includes(\'pearktrue\')) {
if (data.code === 200) {
processedData = {
title: data.title,
subtitle: data.subtitle,
items: data.data.slice(0, 10).map(item => ({
title: item.title,
url: item.url || \'#\',
hot: item.hot || \'\'
}))
};
} else {
throw new Error(data.message || \'获取数据失败\');
}
} else if (apiUrl.includes(\'vvhan\')) {
if (data.success) {
processedData = {
title: platform.name,
subtitle: \'热门榜\',
items: data.data.slice(0, 10).map(item => ({
title: item.title,
url: item.url || \'#\',
hot: item.hot || \'\'
}))
};
} else {
throw new Error(\'获取数据失败\');
}
} else {
// 处理其他API的数据格式
if (data.code === 200) {
processedData = {
title: platform.name,
subtitle: \'热门榜\',
items: data.data.slice(0, 10).map(item => ({
title: item.title,
url: item.url || \'#\',
hot: item.hot || \'\'
}))
};
} else {
throw new Error(\'获取数据失败\');
}
}
// 保存成功获取的数据，以便其他平台使用
successfulData[platform.name] = {
data: processedData,
platform: platform
};
// 更新卡片内容
updateCardContent(platform, cardHeader, cardBody, processedData);
// 更新成功计数
successCount++;
// 更新加载计数
loadedCount++;
updateLoadedCount();
// 更新最后更新时间
document.getElementById(\'update-time\').textContent = new Date().toLocaleString();
} catch (error) {
console.error(`获取${platform.name}数据失败:`, error);
// 尝试下一个API
if (retryCount < apiEndpoints.length - 1) {
cardBody.innerHTML = `
<div class=\"loading\">
<div class=\"spinner\"></div>
<span>主API不可用，尝试备用API...</span>
</div>
`;
// 延迟一下再重试，避免同时发送太多请求
setTimeout(() => {
fetchHotData(platform, retryCount + 1);
}, 500);
} else {
// 所有API都失败，尝试使用替代数据
useFallbackData(platform);
}
}
}
// 使用替代数据
function useFallbackData(platform) {
const card = document.getElementById(`card-${platform.name}`);
const cardHeader = card.querySelector(\'.card-header\');
const cardBody = card.querySelector(\'.card-body\');
// 查找可用的替代数据源
const availableSources = Object.keys(successfulData).filter(name => name !== platform.name);
if (availableSources.length > 0) {
// 按优先级排序可用的数据源
availableSources.sort((a, b) => {
const platformA = platforms.find(p => p.name === a);
const platformB = platforms.find(p => p.name === b);
return (platformA?.priority || 999) - (platformB?.priority || 999);
});
// 使用优先级最高的数据源
const sourceName = availableSources[0];
const sourceData = successfulData[sourceName];
// 更新卡片内容
updateCardContent(platform, cardHeader, cardBody, sourceData.data, false, sourceName);
// 更新替换计数
fallbackCount++;
updateFallbackCount();
// 更新失败计数
failedCount++;
// 更新加载计数
loadedCount++;
updateLoadedCount();
} else {
// 没有可用的替代数据源，使用模拟数据
useMockData(platform, cardHeader, cardBody);
}
}
// 使用模拟数据
function useMockData(platform, cardHeader, cardBody) {
console.log(`使用${platform.name}的模拟数据`);
// 更新失败计数
failedCount++;
// 生成模拟数据
const mockData = {
title: platform.name,
subtitle: \'热门榜 (模拟数据)\',
items: []
};
// 根据不同平台生成不同的模拟数据
if (platform.name === \'哔哩哔哩\') {
mockData.items = [
{ title: \'【模拟数据】2023年度弹幕总结\', url: \'#\', hot: \'999.9万\' },
{ title: \'【模拟数据】UP主年度颁奖典礼\', url: \'#\', hot: \'876.5万\' },
{ title: \'【模拟数据】B站跨年晚会节目单公布\', url: \'#\', hot: \'765.3万\' },
{ title: \'【模拟数据】新番动画排行榜\', url: \'#\', hot: \'654.2万\' },
{ title: \'【模拟数据】国创动画最新话\', url: \'#\', hot: \'543.1万\' },
{ title: \'【模拟数据】游戏区年度盘点\', url: \'#\', hot: \'432.0万\' },
{ title: \'【模拟数据】音乐区热门歌曲\', url: \'#\', hot: \'321.9万\' },
{ title: \'【模拟数据】知识区精选视频\', url: \'#\', hot: \'210.8万\' },
{ title: \'【模拟数据】美食区人气作品\', url: \'#\', hot: \'109.7万\' },
{ title: \'【模拟数据】生活区热门vlog\', url: \'#\', hot: \'98.6万\' }
];
} else if (platform.name === \'百度\') {
mockData.items = [
{ title: \'【模拟数据】国内新闻热点\', url: \'#\', hot: \'5482万\' },
{ title: \'【模拟数据】国际局势最新进展\', url: \'#\', hot: \'4321万\' },
{ title: \'【模拟数据】体育赛事实况\', url: \'#\', hot: \'3210万\' },
{ title: \'【模拟数据】娱乐明星动态\', url: \'#\', hot: \'2109万\' },
{ title: \'【模拟数据】科技行业新闻\', url: \'#\', hot: \'1987万\' },
{ title: \'【模拟数据】教育政策解读\', url: \'#\', hot: \'1765万\' },
{ title: \'【模拟数据】健康生活指南\', url: \'#\', hot: \'1654万\' },
{ title: \'【模拟数据】财经市场分析\', url: \'#\', hot: \'1543万\' },
{ title: \'【模拟数据】社会热点话题\', url: \'#\', hot: \'1432万\' },
{ title: \'【模拟数据】文化艺术活动\', url: \'#\', hot: \'1321万\' }
];
} else if (platform.name === \'知乎\') {
mockData.items = [
{ title: \'【模拟数据】年度十大高赞回答\', url: \'#\', hot: \'12.5万\' },
{ title: \'【模拟数据】科学家新发现讨论\', url: \'#\', hot: \'10.8万\' },
{ title: \'【模拟数据】职场经验分享\', url: \'#\', hot: \'9.7万\' },
{ title: \'【模拟数据】读书心得交流\', url: \'#\', hot: \'8.6万\' },
{ title: \'【模拟数据】电影影评精选\', url: \'#\', hot: \'7.5万\' },
{ title: \'【模拟数据】旅行攻略推荐\', url: \'#\', hot: \'6.4万\' },
{ title: \'【模拟数据】美食探店记录\', url: \'#\', hot: \'5.3万\' },
{ title: \'【模拟数据】数码产品评测\', url: \'#\', hot: \'4.2万\' },
{ title: \'【模拟数据】历史事件解析\', url: \'#\', hot: \'3.1万\' },
{ title: \'【模拟数据】心理学话题探讨\', url: \'#\', hot: \'2.0万\' }
];
} else {
// 通用模拟数据
for (let i = 1; i <= 10; i++) {
mockData.items.push({
title: `【模拟数据】${platform.name}热搜话题${i}`,
url: \'#\',
hot: `${Math.floor(Math.random() * 1000)}万`
});
}
}
// 更新卡片内容
updateCardContent(platform, cardHeader, cardBody, mockData, true);
// 更新加载计数
loadedCount++;
updateLoadedCount();
}
// 更新卡片内容
function updateCardContent(platform, cardHeader, cardBody, data, isMock = false, sourceName = null) {
// 更新卡片标题
cardHeader.innerHTML = `
<h2><i class=\"${platform.icon}\"></i> ${data.title}</h2>
<span class=\"subtitle\">${data.subtitle}</span>
`;
// 更新热搜列表
let listHTML = \'<ul class=\"hot-list\">\';
data.items.forEach((item, index) => {
const rankClass = index < 3 ? `top${index + 1}` : \'\';
listHTML += `
<li class=\"hot-item\">
<div class=\"hot-rank ${rankClass}\">${index + 1}</div>
<div class=\"hot-title\">
<a href=\"${item.url}\" target=\"_blank\" title=\"${item.title}\">${item.title}</a>
</div>
${item.hot ? `<div class=\"hot-info\"><i class=\"fas fa-fire\"></i>${item.hot}</div>` : \'\'}
</li>
`;
});
listHTML += \'</ul>\';
// 如果使用了替代数据源，添加提示
if (sourceName) {
listHTML += `
<div class=\"fallback-notice\">
<i class=\"fas fa-exchange-alt\"></i>
由于API不可用，当前显示的是来自 <strong>${sourceName}</strong> 的数据
<button class=\"retry-btn\" onclick=\"retryFetchData(\'${platform.name}\')\">
<i class=\"fas fa-sync-alt\"></i> 重试
</button>
</div>
`;
}
// 如果是模拟数据，添加提示和重试按钮
else if (isMock) {
listHTML += `
<div class=\"fallback-notice\">
<i class=\"fas fa-info-circle\"></i> 当前显示的是模拟数据
<button class=\"retry-btn\" onclick=\"retryFetchData(\'${platform.name}\')\">
<i class=\"fas fa-sync-alt\"></i> 重试
</button>
</div>
`;
}
cardBody.innerHTML = listHTML;
}
// 重试获取数据
function retryFetchData(platformName) {
const platform = platforms.find(p => p.name === platformName);
if (platform) {
const card = document.getElementById(`card-${platform.name}`);
const cardBody = card.querySelector(\'.card-body\');
cardBody.innerHTML = `
<div class=\"loading\">
<div class=\"spinner\"></div>
<span>正在重新获取${platform.name}热搜...</span>
</div>
`;
// 重试时减少成功或失败计数
if (failedCount > 0) failedCount--;
if (fallbackCount > 0 && platform.disabled) fallbackCount--;
// 如果平台被标记为禁用，使用替代数据
if (platform.disabled) {
setTimeout(() => {
useFallbackData(platform);
}, 1000);
} else {
fetchHotData(platform);
}
}
}
// 页面加载完成后初始化
document.addEventListener(\'DOMContentLoaded\', initPage);
// 添加到全局作用域，以便HTML中的onclick调用
window.retryFetchData = retryFetchData;
</script>
<footer style=\"text-align: center; padding: 20px; margin-top: 30px; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.9rem;\">
© 版权所有 | 网站：<a href=\"https://www.sdxsis.com\" style=\"color: var(--primary-color); text-decoration: none;\">访问网站</a>
</footer>
</body>
</html>重要提示
如有解压密码： 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性： 建议具有一定思考和动手能力的用户购买。
请谨慎考虑： 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知： 虚拟类商品，一经购买打赏赞助，不支持退款。请谅解，谢谢合作！
© 版权声明
THE END
![子比主题美化 – 文章列表显示修改 列表[一行两个]卡片[一行五个]-源码资源网](/wp-content/uploads/2026/09/12/1ac3a94d5772e2b11a0ee37f3fbe3763.webp)
暂无评论内容