Does this work on redditish theme by any chance?
Did anyone experience rate limit problems connected to this theme component?
1 Like
I don’t know if it’s possible to add category-topics to get posts that can display images I made my own code using custom-html can’t take effect so please beg!
html
<head>
<style>
.topic-list {
list-style: none;
padding: 0;
}
.topic-list-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.topic-list-item img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
}
.topic-list-item a {
text-decoration: none;
font-size: 16px;
color: #333;
}
.topic-list-item a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="topic-list-container">
<h2>最新游戏帖子</h2>
<ul class="topic-list" id="topic-list">
<!-- 这里的帖子将通过 JavaScript 动态渲染 -->
</ul>
</div>
<script>
// 获取数据并渲染帖子（最多5个）
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // 解析 JSON 数据
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// 获取帖子的数组，并限制最多 5 个帖子
const topics = data.topic_list.topics.slice(0, 5); // 只取前 5 个帖子
topics.forEach(topic => {
// 创建列表项
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// 创建图片元素
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // 如果没有图片，使用占位图
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // 点击图片跳转到帖子
};
// 创建标题元素
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // 点击标题跳转到帖子
title.textContent = topic.title;
// 将图片和标题添加到列表项
listItem.appendChild(image);
listItem.appendChild(title);
// 将列表项添加到列表容器
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
Really love this component first and foremost so thank you for all your superb work on it!
I have noticed some chatter about top contributors and set timescales for them, I would love to have ours as a monthly top users, has anyone achieved this?
Thanks Joe
You should be able to add a period parameter with the value monthly. This was missing from the parameter list in the original post, but it has now been updated!
1 Like
I can’t get the latest posts using this component.
The code I changed shows up but disappears when I click on the other categories.
I really hope that this component can support the use of js or refresh because the code component I wrote does not work he can not get the latest post content so I wrote one by hand I hope it can be updated because I was embedded into the tc-right-sidebar after switching it is no longer available I’m also a rookie coder I hope that this feature can be updated please please please please
HTML+JS
<script>
// Ensure the DOM is fully loaded before executing the code
document.addEventListener("DOMContentLoaded", () => {
// Get the sidebar container
const sidebar = document.querySelector(".tc-right-sidebar");
// Check if the sidebar container is found
if (!sidebar) {
console.error("Sidebar container .tc-right-sidebar not found!");
return;
}
// Add recommended content
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>Latest Game Posts</h2> <!-- Add icon and title -->
</div>
<ul class="recommendation-list">
<!-- Default placeholder content -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Placeholder Image 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Dynamically load data
fetchTopics();
// Listen for theme changes
observeThemeChanges();
});
/**
* Fetch topic data from the specified API
*/
async function fetchTopics() {
try {
// Request API data
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Data retrieval failed");
}
const jsonData = await response.json();
// Extract the first 4 topic data
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",
}));
// Render to the page
renderTopics(topics);
} catch (error) {
console.error("Error fetching data:", error);
}
}
/**
* Render the recommended content to the page
* @param {Array} topics - Topic data
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Clear placeholder content
.custom-sidebar {
padding: 10px;
background-color: #fff; /* White background */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* Corrected typo from "23x" to "23px" */
margin-bottom: 10px;
color: #333; /* Title in black */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Fixed width */
height: 156px; /* Fixed height, keeping it consistent */
object-fit: cover; /* Maintain the aspect ratio of the image content */
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);
}
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";
// Create recommended 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; /* White background */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* Corrected typo from "23x" to "23px" */
margin-bottom: 10px;
color: #333; /* Title in black */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Fixed width */
height: 156px; /* Fixed height, keeping it consistent */
object-fit: cover; /* Maintain the aspect ratio of the image content */
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);
}
If you make it an Ember Component (look through Plugin and Theme component for examples), you can add it with a separate Theme Component then reference it by Ember Component name.
It would then also work with Bars which uses the same system.
(NB don’t confuse Theme Component witb Ember Component. A Theme Component can contain many Ember Components)
2 Likes