前往我的论坛
目前这个只兼容我的论坛 你需要自己修改我的源码来兼容你自己的
目前不支持 切换黑夜后 标题和背景变成灰色 不知道是什么问题
html+JS
<script>
// 确保 DOM 完全加载后再执行代码
document.addEventListener("DOMContentLoaded", () => {
// 获取侧边栏容器
const sidebar = document.querySelector(".tc-right-sidebar");
// 检查是否找到侧边栏容器
if (!sidebar) {
console.error("未找到 .tc-right-sidebar 容器！");
return;
}
// 添加热点推荐内容
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>最新游戏帖</h2> <!-- 添加图标和标题 -->
</div>
<ul class="recommendation-list">
<!-- 默认占位内容 -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="占位图1">
</a>
</li>
</ul>
</div>
</div>
`;
// 动态加载数据
fetchTopics();
// 监听主题切换
observeThemeChanges();
});
/**
* 从指定 API 获取主题数据
*/
async function fetchTopics() {
try {
// 请求 API 数据
const response = await fetch("https://www.justnainai.com/c/游戏中心/5/l/latest.json");
if (!response.ok) {
throw new Error("数据获取失败");
}
const jsonData = await response.json();
// 提取前4条主题数据
const topics = jsonData.topic_list.topics.slice(0, 4).map(topic => ({
id: topic.id,
title: topic.title,
slug: topic.slug,
image_url: topic.image_url || "https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg",
}));
// 渲染到页面
renderTopics(topics);
} catch (error) {
console.error("获取数据时出错:", error);
}
}
/**
* 渲染推荐内容到页面
* @param {Array} topics - 主题数据
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // 清空占位内容
topics.forEach(topic => {
const link = `https://www.justnainai.com/t/${topic.slug}/${topic.id}`;
const image = topic.image_url;
const listItem = document.createElement("li");
listItem.className = "recommendation-item";
// 创建推荐项 HTML
listItem.innerHTML = `
<a href="${link}" title="${topic.title}" target="_blank">
<img src="${image}" alt="${topic.title}">
</a>
`;
recommendationList.appendChild(listItem);
});
}
</script>
CSS
.custom-sidebar {
padding: 10px;
background-color: #fff; /* 白色背景 */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23x;
margin-bottom: 10px;
color: #333; /* 标题黑色 */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* 固定宽度 */
height: 156px; /* 固定高度，保持一致 */
object-fit: cover; /* 保持图片内容的比例 */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
