А это как-то работает с темой Redditish?
У кого-нибудь возникали проблемы с ограничением скорости, связанные с этим компонентом темы?
1 лайк
Не знаю, возможно ли добавить категории-темы для получения постов, которые могут отображать изображения. Я написал свой код с использованием custom-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);
});
</script>
</body>
</html>
Прежде всего, нам очень нравится этот компонент, поэтому спасибо за вашу превосходную работу!
Я заметил обсуждения о ведущих contributors и установленных для них сроках. Мне бы хотелось видеть наших лидеров по пользователям ежемесячно. Кто-то уже добился этого?
Спасибо, Джо
Вы должны иметь возможность добавить параметр period со значением monthly. Это отсутствовало в списке параметров в исходном сообщении, но теперь оно обновлено!
2 лайка
Я не могу получить последние сообщения с помощью этого компонента.
Изменённый мной код отображается, но исчезает при переключении на другие категории.
Я очень надеюсь, что этот компонент сможет поддерживать использование JS или обновление, потому что написанный мной код не работает: он не может получить содержимое последних сообщений, поэтому я вставил его вручную. Надеюсь, что это можно обновить, так как я встроил это в tc-right-sidebar, и после переключения оно перестало работать. Я тоже начинающий программист, поэтому очень-очень-очень-очень надеюсь, что эту функцию можно будет обновить.
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/音乐分享/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 = ""; // Очистить контент-заполнитель
.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);
}
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: 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 (примеры можно найти в разделах #plugin и #theme-component), вы сможете добавить его с помощью отдельного компонента темы, а затем ссылаться на него по имени компонента Ember.
Это также позволит использовать его с Bars, который использует ту же систему.
(Примечание: не путайте компонент темы с компонентом Ember. Компонент темы может содержать множество компонентов Ember)
2 лайка
Вам удалось это выяснить? Мы также хотим отображать все события во всех категориях, независимо от того, в какой категории находится событие.
2 лайка
К сожалению, нет.
В таком случае, есть ли идея, как показать боковую панель только на главной странице?
Я просто экспериментировал с этим в изолированной среде, которую использую как доказательство концепции для кого-то. Было бы здорово не только отображать блок календаря на странице категорий, но и иметь возможность указывать, какой календарь или календари использовать.
У меня есть категория «События», где хранится календарь (в конечном итоге доступ к нему будет ограничен по группам), но я хочу, чтобы участники соответствующей группы могли видеть список предстоящих событий на любой странице платформы, чтобы повысить посещаемость мероприятий.
Пока не знаю, как будут работать ограничения на основе групп в этом случае — я ещё не дошёл до этого этапа тестирования.
Однако, когда я заглядываю в свою категорию «Общее», в блоке правой боковой панели написано «Нет предстоящих событий», но если я нажимаю «Посмотреть все», меня перенаправляет на календарь событий, где я вижу тестовое событие, которое добавил на неделю вперёд.
Вы изучали тему #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 лайк
Вы пробовали использовать discovery.latest и discovery.hot в настройке show_in_routes? В теории это должно позволить избежать форка компонента.
Похоже, это тоже сработало 
Спасибо!
1 лайк
Привет, я не знаю, что я делаю не так, но боковые панели не отображаются на странице.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Всем привет,
Кто-нибудь использовал этот компонент и настраивал собственный контент для создания бегущей строки с гиперссылками на изображения?
Мне нужен небольшой блок с постоянной бегущей строкой изображений, которые ведут на страницу события или статью.
Спасибо, Джо
Что касается тем внутри категорий… может ли это быть «любая тема»?
Я хочу иметь 7–8 тем внутри категории. Затем я хочу выбрать 2–3 из них для отображения в правой «боковой панели». Это возможно?
Возможно ли закрепить эту боковую панель, чтобы она оставалась видимой при прокрутке (аналогично навигации или колонке категорий слева)?
3 лайка