在信息快速迭代的互联网时代，为网站添加“今日热搜”聚合功能，不仅能提升用户体验，还能增强网站的实时性和互动性。本文将详细介绍如何将提供的HTML代码集成到你的网站中，尤其针对WordPress用户，提供完整的操作指南。
![图片[1]-给自己的网站添加聚合今日热搜功能模块-QQ沐编程](https://www.qqmu.com/wp-content/uploads/2025/07/resou.jpg)
一、代码功能解析
1. 页面结构
- Header部分：包含主题切换按钮（深色/浅色模式）和标题“今日热榜聚合”。
- Platform Selector：平台选择器，支持按社交媒体、新闻资讯、科技等分类筛选热搜内容。
- Grid Container：动态加载的热搜展示区域，默认显示“正在加载热榜数据…”。
- Footer：版权信息与数据来源说明。
2. 核心功能
- 动态加载热搜：通过
https://api.pearktrue.cn/api/dailyhot/接口实时获取32个平台的热搜数据。 - 主题切换：通过CSS类切换深色/浅色模式，并支持本地存储用户偏好。
- 动态粒子背景：随机生成粒子动画，增强视觉吸引力。
二、代码部署方式
方式一：单独HTML文件部署
- 保存文件
将提供的HTML代码保存为resou.html，上传至网站服务器的根目录（如/var/www/html/）。 - 访问路径
通过浏览器访问https://你的域名/resou.html，即可查看效果。
方式二：直接嵌入现有页面
- 编辑页面
在WordPress后台进入“页面 > 所有页面”，选择需要插入代码的页面。 - 切换代码编辑器
点击编辑器右上角的“代码编辑器”按钮（Gutenberg编辑器需切换到“代码”标签）。 - 粘贴代码
将HTML代码粘贴到编辑器中，保存并发布页面。
三、WordPress后台菜单设置
- 进入菜单设置
登录WordPress后台，点击“外观 > 菜单”。 - 添加自定义链接
- 在“自定义链接”栏输入URL：
https://你的域名/resou.html。 - 链接文本填写“今日热搜”。
- 点击“添加到菜单”。
- 保存菜单
确保菜单已启用，点击“保存菜单”按钮。
四、自定义与扩展
1. 修改样式
- 标题颜色：修改CSS中
.container h1的color属性。 - 粒子背景：调整
initializeDynamicBackground()函数中的颜色和粒子数量。
2. 添加新平台
- 更新平台列表：在
platforms数组中添加新平台对象，格式如下：
{ id: 'newPlatform', name: '新平台', title: '平台名称' }- 分类按钮：在
categories数组中添加对应分类，并确保platforms字段匹配新平台ID。
五、注意事项
- API可用性：确保
https://api.pearktrue.cn/api/dailyhot/接口可访问，建议定期测试。 - 兼容性：代码兼容主流浏览器，若需支持IE11，需补充Polyfill。
- 性能优化：若页面加载较慢，可异步加载热搜数据或压缩JavaScript代码。
通过上述步骤，你可以在网站中快速集成“今日热搜”功能，为用户提供实时热点资讯服务。无论是静态HTML文件部署还是WordPress动态页面集成，操作均简单高效。如需进一步定制，可通过修改CSS和JavaScript实现更多个性化功能。
六、源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日热榜聚合</title>
<style>
:root {
--bg-primary: #f8f9fa;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--text-primary: #333333;
--text-secondary: #666666;
--accent-gradient-1: #f72585;
--accent-gradient-2: #4361ee;
--border-color: rgba(0, 0, 0, 0.1);
--card-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--rank-bg: rgba(0, 0, 0, 0.1);
}
.dark {
--bg-primary: #1a1a2e;
--bg-secondary: #16213e;
--bg-card: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff;
--text-secondary: #cccccc;
--border-color: rgba(255, 255, 255, 0.1);
--card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
--rank-bg: rgba(255, 255, 255, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
padding: 20px;
position: relative;
overflow-x: hidden;
transition: background 0.3s ease;
}
/* Background animation */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 20%, var(--bg-secondary) 20%, var(--bg-secondary) 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, var(--bg-secondary) 20%, var(--bg-secondary) 80%, transparent 80%, transparent) 50px 50px;
background-size: 100px 100px;
animation: backgroundMove 15s linear infinite;
opacity: 0.3;
z-index: -1;
transition: background 0.3s ease;
}
@keyframes backgroundMove {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 100px;
}
}
/* Dynamic background */
.particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
opacity: 0.5;
animation: float 15s infinite ease-in-out;
}
@keyframes float {
0% {
transform: translateY(0) translateX(0);
}
25% {
transform: translateY(-30px) translateX(15px);
}
50% {
transform: translateY(-10px) translateX(30px);
}
75% {
transform: translateY(-25px) translateX(5px);
}
100% {
transform: translateY(0) translateX(0);
}
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: var(--bg-card);
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: var(--card-shadow);
position: relative;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
background: linear-gradient(90deg, var(--accent-gradient-1), var(--accent-gradient-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.subtitle {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 20px;
}
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
background: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-primary);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.theme-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.theme-toggle svg {
width: 20px;
height: 20px;
transition: all 0.3s ease;
}
.platform-selector {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.platform-btn {
background: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.platform-btn:hover {
background: var(--bg-secondary);
transform: translateY(-2px);
}
.platform-btn.active {
background: linear-gradient(90deg, var(--accent-gradient-1), var(--accent-gradient-2));
color: white;
border: none;
box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
}
.card {
background: var(--bg-card);
border-radius: 15px;
padding: 20px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
height: 100%;
min-height: 400px; /* Fixed minimum height for all cards */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.platform-icon {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 50%;
background: linear-gradient(45deg, var(--accent-gradient-1), var(--accent-gradient-2));
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
color: white;
}
.platform-name {
font-size: 1.2rem;
font-weight: bold;
background: linear-gradient(90deg, var(--accent-gradient-1), var(--accent-gradient-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.trending-list {
list-style: none;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.trending-item {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
display: flex;
}
.trending-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.trending-rank {
min-width: 24px;
height: 24px;
background: var(--rank-bg);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 0.8rem;
font-weight: bold;
}
.trending-rank.top1 {
background: linear-gradient(45deg, #ff4d4d, #f9cb28);
}
.trending-rank.top2 {
background: linear-gradient(45deg, #a2a2a2, #d4d4d4);
}
.trending-rank.top3 {
background: linear-gradient(45deg, #cd7f32, #e6be8a);
}
.trending-title {
font-size: 0.9rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex-grow: 1;
}
.trending-title a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.3s ease;
}
.trending-title a:hover {
color: var(--accent-gradient-2);
}
.trending-hot {
font-size: 0.8rem;
color: var(--accent-gradient-1);
white-space: nowrap;
margin-left: 8px;
}
.loading {
text-align: center;
padding: 50px;
grid-column: span 4;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid var(--border-color);
border-radius: 50%;
border-top-color: var(--accent-gradient-2);
animation: spin 1s ease-in-out infinite;
margin: 0 auto 20px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.error-message {
background: rgba(255, 0, 0, 0.1);
color: #ff4d4d;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Responsive design */
@media (max-width: 1200px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
.platform-btn {
font-size: 0.8rem;
padding: 6px 12px;
}
.theme-toggle {
top: 10px;
right: 10px;
width: 35px;
height: 35px;
}
}
</style>
</head>
<body>
<div class="particles-container" id="particlesContainer"></div>
<div class="container">
<header>
<button class="theme-toggle" id="themeToggle" aria-label="切换深色/浅色模式">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="moon-icon" style="display: none;">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
<h1>今日热榜聚合</h1>
<p class="subtitle">实时聚合各大平台热门内容</p>
<div class="platform-selector" id="platformSelector">
<!-- Platform buttons will be generated here -->
</div>
</header>
<div id="errorContainer"></div>
<div class="grid-container" id="gridContainer">
<div class="loading">
<div class="loading-spinner"></div>
<p>正在加载热榜数据...</p>
</div>
</div>
<footer>
<p>© 2025 今日热榜聚合 | 数据来源于各大平台</p>
</footer>
</div>
<script>
// Platform data
const platforms = [
{ id: 'bilibili', name: '哔哩哔哩', title: '哔哩哔哩' },
{ id: 'weibo', name: '微博', title: '微博' },
{ id: 'zhihu', name: '知乎', title: '知乎' },
{ id: 'baidu', name: '百度', title: '百度' },
{ id: 'douyin', name: '抖音', title: '抖音' },
{ id: 'doubanMovie', name: '豆瓣电影', title: '豆瓣电影' },
{ id: 'doubanGroup', name: '豆瓣小组', title: '豆瓣讨论小组' },
{ id: 'tieba', name: '百度贴吧', title: '百度贴吧' },
{ id: 'sspai', name: '少数派', title: '少数派' },
{ id: 'ithome', name: 'IT之家', title: 'IT之家' },
{ id: 'ithomeJoy', name: 'IT之家喜加一', title: 'IT之家「喜加一」' },
{ id: 'thepaper', name: '澎湃新闻', title: '澎湃新闻' },
{ id: 'toutiao', name: '今日头条', title: '今日头条' },
{ id: '36kr', name: '36氪', title: '36 氪' },
{ id: '51cto', name: '51CTO', title: '51CTO' },
{ id: 'csdn', name: 'CSDN', title: 'CSDN' },
{ id: 'juejin', name: '掘金', title: '稀土掘金' },
{ id: 'tencentNews', name: '腾讯新闻', title: '腾讯新闻' },
{ id: 'neteaseNews', name: '网易新闻', title: '网易新闻' },
{ id: 'hostloc', name: '全球主机交流', title: '全球主机交流' },
{ id: 'huxiu', name: '虎嗅', title: '虎嗅' },
{ id: 'ifanr', name: '爱范儿', title: '爱范儿' },
{ id: 'lol', name: '英雄联盟', title: '英雄联盟' },
{ id: 'genshin', name: '原神', title: '原神' },
{ id: 'honkai3', name: '崩坏3', title: '崩坏3' },
{ id: 'starrail', name: '星穹铁道', title: '崩坏：星穹铁道' },
{ id: 'weread', name: '微信读书', title: '微信读书' },
{ id: 'nga', name: 'NGA', title: 'NGA' },
{ id: 'v2ex', name: 'V2EX', title: 'V2EX' },
{ id: 'github', name: 'GitHub', title: 'HelloGitHub' },
{ id: 'weather', name: '中央气象台', title: '中央气象台' },
{ id: 'earthquake', name: '中国地震台', title: '中国地震台' },
{ id: 'history', name: '历史上的今天', title: '历史上的今天' }
];
// Selected platforms (default: first 32 platforms)
let selectedPlatforms = platforms.slice(0, 32);
// API base URL
const API_BASE_URL = 'https://api.pearktrue.cn/api/dailyhot/';
// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
initializeTheme();
initializeDynamicBackground();
initializePlatformSelector();
loadSelectedPlatforms();
});
// Initialize theme
function initializeTheme() {
const themeToggle = document.getElementById('themeToggle');
const sunIcon = themeToggle.querySelector('.sun-icon');
const moonIcon = themeToggle.querySelector('.moon-icon');
// Check for saved theme preference or use preferred color scheme
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.body.classList.add('dark');
sunIcon.style.display = 'none';
moonIcon.style.display = 'block';
}
// Theme toggle event listener
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark');
const isDark = document.body.classList.contains('dark');
// Update icons
sunIcon.style.display = isDark ? 'none' : 'block';
moonIcon.style.display = isDark ? 'block' : 'none';
// Save preference
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
}
// Initialize dynamic background
function initializeDynamicBackground() {
const container = document.getElementById('particlesContainer');
const particleCount = 20;
const colors = [
'rgba(247, 37, 133, 0.3)',
'rgba(67, 97, 238, 0.3)',
'rgba(58, 12, 163, 0.3)',
'rgba(114, 9, 183, 0.3)',
'rgba(67, 97, 238, 0.2)'
];
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// Random properties
const size = Math.random() * 80 + 20; // 20-100px
const color = colors[Math.floor(Math.random() * colors.length)];
// Position
const left = Math.random() * 100;
const top = Math.random() * 100;
// Style
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.backgroundColor = color;
particle.style.left = `${left}%`;
particle.style.top = `${top}%`;
// Animation delay
particle.style.animationDelay = `${Math.random() * 10}s`;
particle.style.animationDuration = `${15 + Math.random() * 15}s`;
container.appendChild(particle);
}
}
// Initialize platform selector
function initializePlatformSelector() {
const platformSelector = document.getElementById('platformSelector');
// Create "All" button
const allButton = document.createElement('button');
allButton.className = 'platform-btn active';
allButton.textContent = '全部';
allButton.addEventListener('click', () => {
document.querySelectorAll('.platform-btn').forEach(btn => btn.classList.remove('active'));
allButton.classList.add('active');
selectedPlatforms = platforms.slice(0, 32); // First 32 platforms
loadSelectedPlatforms();
});
platformSelector.appendChild(allButton);
// Create category buttons
const categories = [
{ name: '社交媒体', platforms: ['bilibili', 'weibo', 'zhihu', 'douyin', 'tieba'] },
{ name: '新闻资讯', platforms: ['thepaper', 'toutiao', 'tencentNews', 'neteaseNews'] },
{ name: '科技', platforms: ['ithome', 'sspai', '36kr', 'csdn', 'juejin', '51cto', 'huxiu', 'ifanr'] },
{ name: '娱乐', platforms: ['doubanMovie', 'doubanGroup', 'weread'] },
{ name: '游戏', platforms: ['lol', 'genshin', 'honkai3', 'starrail', 'nga'] },
{ name: '其他', platforms: ['github', 'v2ex', 'hostloc', 'weather', 'earthquake', 'history'] }
];
categories.forEach(category => {
const button = document.createElement('button');
button.className = 'platform-btn';
button.textContent = category.name;
button.addEventListener('click', () => {
document.querySelectorAll('.platform-btn').forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
selectedPlatforms = platforms.filter(p => category.platforms.includes(p.id));
loadSelectedPlatforms();
});
platformSelector.appendChild(button);
});
}
// Load selected platforms
function loadSelectedPlatforms() {
const gridContainer = document.getElementById('gridContainer');
gridContainer.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>正在加载热榜数据...</p></div>';
// Create a grid with 4 columns and 8 rows (32 cards)
const maxCards = 32;
const platformsToLoad = selectedPlatforms.slice(0, maxCards);
// Clear error container
document.getElementById('errorContainer').innerHTML = '';
// Create cards for each platform
Promise.all(platformsToLoad.map(platform => fetchPlatformData(platform)))
.then(results => {
gridContainer.innerHTML = '';
// Filter out failed platforms
const successfulResults = results.filter((result, index) => {
return result.data && !result.error;
});
// If all platforms failed, show an error
if (successfulResults.length === 0) {
showError('所有平台数据加载失败，请稍后重试');
return;
}
// Create a grid layout with equal rows
const rowCount = Math.ceil(successfulResults.length / 4);
gridContainer.style.gridTemplateRows = `repeat(${rowCount}, 1fr)`;
// Create cards for successful platforms
successfulResults.forEach((result, index) => {
const platformIndex = results.findIndex(r => r === result);
const card = createPlatformCard(platformsToLoad[platformIndex], result.data);
gridContainer.appendChild(card);
});
// Ensure all cards have the same height
equalizeCardHeights();
})
.catch(error => {
console.error('Error loading platforms:', error);
showError('加载数据时发生错误，请刷新页面重试');
});
}
// Equalize card heights
function equalizeCardHeights() {
const cards = document.querySelectorAll('.card');
if (cards.length === 0) return;
// Reset heights first
cards.forEach(card => {
card.style.height = 'auto';
});
// Find the tallest card in each row
const cardsPerRow = window.innerWidth > 1200 ? 4 : window.innerWidth > 900 ? 3 : window.innerWidth > 600 ? 2 : 1;
if (cardsPerRow === 1) {
// For mobile, don't equalize heights
return;
}
const rows = Math.ceil(cards.length / cardsPerRow);
for (let row = 0; row < rows; row++) {
let maxHeight = 0;
// Find max height in this row
for (let i = 0; i < cardsPerRow; i++) {
const index = row * cardsPerRow + i;
if (index >= cards.length) break;
const cardHeight = cards[index].offsetHeight;
maxHeight = Math.max(maxHeight, cardHeight);
}
// Set all cards in this row to the max height
for (let i = 0; i < cardsPerRow; i++) {
const index = row * cardsPerRow + i;
if (index >= cards.length) break;
cards[index].style.height = `${maxHeight}px`;
}
}
}
// Add window resize listener to re-equalize card heights
window.addEventListener('resize', debounce(equalizeCardHeights, 250));
// Debounce function to limit resize events
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// Fetch platform data
async function fetchPlatformData(platform) {
try {
const response = await fetch(`${API_BASE_URL}?title=${encodeURIComponent(platform.title)}`);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
if (data.code !== 200) {
throw new Error(data.msg || '获取数据失败');
}
return { data: data.data, error: null };
} catch (error) {
console.error(`Error fetching data for ${platform.name}:`, error);
return { data: null, error: error.message };
}
}
// Create platform card
function createPlatformCard(platform, data) {
const card = document.createElement('div');
card.className = 'card';
// Card header
const cardHeader = document.createElement('div');
cardHeader.className = 'card-header';
const platformIcon = document.createElement('div');
platformIcon.className = 'platform-icon';
platformIcon.textContent = platform.name.charAt(0);
const platformName = document.createElement('div');
platformName.className = 'platform-name';
platformName.textContent = platform.name;
cardHeader.appendChild(platformIcon);
cardHeader.appendChild(platformName);
card.appendChild(cardHeader);
// Card content
if (!data || data.length === 0) {
const emptyMsg = document.createElement('p');
emptyMsg.textContent = '暂无数据';
emptyMsg.style.color = 'var(--text-secondary)';
card.appendChild(emptyMsg);
} else {
const trendingList = document.createElement('ul');
trendingList.className = 'trending-list';
// Show only top 10 items
const items = data.slice(0, 10);
items.forEach((item, index) => {
const listItem = document.createElement('li');
listItem.className = 'trending-item';
const rank = document.createElement('div');
rank.className = `trending-rank ${index < 3 ? 'top' + (index + 1) : ''}`;
rank.textContent = index + 1;
const title = document.createElement('div');
title.className = 'trending-title';
const link = document.createElement('a');
link.href = item.url || '#';
link.target = '_blank';
link.textContent = item.title;
title.appendChild(link);
const hot = document.createElement('div');
hot.className = 'trending-hot';
hot.textContent = formatHotValue(item.hot);
listItem.appendChild(rank);
listItem.appendChild(title);
listItem.appendChild(hot);
trendingList.appendChild(listItem);
});
card.appendChild(trendingList);
}
return card;
}
// Format hot value
function formatHotValue(hot) {
if (!hot) return '';
if (typeof hot === 'number') {
if (hot >= 10000) {
return (hot / 10000).toFixed(1) + '万';
}
return hot.toString();
}
return hot;
}
// Show error message
function showError(message) {
const errorContainer = document.getElementById('errorContainer');
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
errorContainer.appendChild(errorDiv);
}
</script>
</body>
</html>
© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
