这个在 redditish 主题下能用吗？
有人遇到过与此主题组件相关的速率限制问题吗？
1 个赞
我不知道是否可以添加类别主题来获取可以显示我用自定义 HTML 制作的图片的帖子，但代码无效，所以请帮忙！
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>
首先，我非常喜欢这个组件，感谢您为此付出的出色工作！
我注意到有人在谈论顶级贡献者以及为他们设定的时间表，我很想让我们的顶级用户成为月度用户，有人实现过吗？
谢谢 Joe
你应该能够添加一个值为 monthly 的 period 参数。这个参数在最初的帖子中已从参数列表中移除，但现在已更新！
2 个赞
我无法使用此组件获取最新帖子。
我修改的代码显示出来了，但在我点击其他类别时消失了。
我非常希望此组件能够支持使用 js 或刷新，因为我编写的代码组件不起作用，它无法获取最新的帖子内容，所以我手动编写了一个，希望它能更新，因为我将其嵌入到 tc-right-sidebar 后，切换后它就不再可用了，我还是一个新手程序员，我希望此功能能够更新，拜托拜托拜托拜托
HTML+JS
// 确保在执行代码之前 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/音乐分享/12.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);
});
}
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: 23px; /* 已更正拼写错误，从 "23x" 改为 "23px" */
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);
}
如果你将其制作成 Ember Component（请查看 Plugin 和 Theme component 中的示例），你可以单独添加一个 Theme Component，然后通过 Ember Component 名称引用它。
这样它也能与使用相同系统的 Bars 一起使用。
（请注意，不要将 Theme Component 与 Ember Component 混淆。一个 Theme Component 可以包含多个 Ember Component）
2 个赞
您弄清楚这个问题了吗？我们也希望显示所有类别中的所有事件，无论事件属于哪个类别。
2 个赞
不幸的是，不是。
在这种情况下，有什么办法可以让侧边栏仅显示在主页上吗？
我在一个我正在为某人使用的 POC 沙盒环境中玩这个东西，不仅能够让日历块显示在类别页面上，而且还能够指定使用哪个日历/哪些日历会很棒。
我有一个活动类别，其中包含日历（最终将按组限制访问），但我希望属于该组的成员能够在平台上的任何位置看到即将举行的活动列表，以提高活动的出勤率。
我不知道这对基于组的限制会发生什么——我还没有在测试中进行到那一步。
但是，当我查看我的“常规”类别时，右侧边栏块显示“无即将举行的活动”——但如果我点击“查看全部”，我会被带到活动日历并看到一周前我放在上面的测试活动。
您看过 Robert 的开发者 Theme component 了吗？
如果需要预算，也许可以做一个 TC，将日历事件放入侧边栏或您想要的任何位置。
1 个赞
我在 Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab 上分享了一个修改版本。该布局不是为侧边栏设计的，而是为我的 Homepage Blocks 组件设计的。不过，该逻辑应该可以在任何块布局框架中工作。
3 个赞
对我们来说，仅在最新或热门页面上显示正确的块即可正常工作。我所做的是分叉了存储库，并在未提供路由时更改了默认行为。为此，只需修改 javascripts/connectors/before-list-area/tc-right-sidebar.js 文件，并将最后一行更改为：
// 如果未指定路由，则仅在“最新”或“热门”页面上显示
return ["discovery.latest", "discovery.hot"].includes(currentRouteName);
由于我们刚接触 Discourse，我不确定这样做需要多少维护工作，但我想我们会拭目以待。
1 个赞
你尝试过在 show_in_routes 设置中使用 discovery.latest 和 discovery.hot 吗？理论上，这样应该可以避免拆分组件。
看起来这招也管用 
谢谢！
1 个赞
嘿，我不知道我哪里做错了，但我似乎无法让侧边栏显示在页面上。
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
大家好，
有人使用过此组件并使用自定义内容创建了用于图像的超链接跑马灯吗？
我想要一个小型区域，其中包含一个链接到事件页面或文章页面的图像的恒定跑马灯。
谢谢 Joe
当涉及到类别中的主题时…可以是“任何主题”吗？
我想在一个类别中有 7-8 个主题。然后我想选择其中的 2-3 个放在右侧的“侧边栏”中，这可能吗？
是否可以固定这个侧边栏，使其在滚动时保持可见（类似于左侧的导航/类别栏）？
3 个赞