¿Funciona esto en el tema redditish por casualidad?
¿Alguien ha experimentado problemas de límite de tasa conectados a este componente temático?
1 me gusta
No sé si es posible agregar temas de categoría para obtener publicaciones que puedan mostrar imágenes. Hice mi propio código usando HTML personalizado, pero no tiene efecto, ¡así que por favor ayúdame!
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>Últimas publicaciones de juegos</h2>
<ul class="topic-list" id="topic-list">
<!-- Las publicaciones aquí se renderizarán dinámicamente a través de JavaScript -->
</ul>
</div>
<script>
// Obtener datos y renderizar publicaciones (hasta 5)
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // Analizar datos JSON
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// Obtener el array de temas y limitar a un máximo de 5 temas
const topics = data.topic_list.topics.slice(0, 5); // Tomar solo los primeros 5 temas
topics.forEach(topic => {
// Crear elemento de lista
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// Crear elemento de imagen
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // Usar imagen de marcador de posición si no hay imagen
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // Hacer clic en la imagen para ir a la publicación
};
// Crear elemento de título
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // Hacer clic en el título para ir a la publicación
title.textContent = topic.title;
// Añadir imagen y título al elemento de lista
listItem.appendChild(image);
listItem.appendChild(title);
// Añadir elemento de lista al contenedor de lista
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Error al obtener datos:', error);
});
</script>
</body>
</html>
¡Realmente me encanta este componente, ante todo, así que gracias por todo su excelente trabajo en él!
He notado algunas conversaciones sobre los principales contribuyentes y los plazos establecidos para ellos, me encantaría que los nuestros fueran usuarios destacados mensuales, ¿alguien ha logrado esto?
Gracias Joe
Deberías poder añadir un parámetro period con el valor monthly. Esto faltaba en la lista de parámetros de la publicación original, ¡pero ya se ha actualizado!
2 Me gusta
No puedo obtener las últimas publicaciones con este componente.
El código que cambié aparece pero desaparece cuando hago clic en las otras categorías.
Realmente espero que este componente pueda admitir el uso de js o actualización porque el componente de código que escribí no funciona, no puede obtener el contenido de la última publicación, así que escribí uno a mano, espero que se actualice porque lo incrusté en el tc-right-sidebar después de cambiarlo, ya no está disponible. También soy un programador novato, espero que esta función se pueda actualizar, por favor, por favor, por favor.
HTML+JS
// Asegúrate de que el DOM esté completamente cargado antes de ejecutar el código
document.addEventListener("DOMContentLoaded", () => {
// Obtener el contenedor de la barra lateral
const sidebar = document.querySelector(".tc-right-sidebar");
// Comprobar si se encuentra el contenedor de la barra lateral
if (!sidebar) {
console.error("¡Contenedor de barra lateral .tc-right-sidebar no encontrado!");
return;
}
// Añadir contenido recomendado
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>Últimas publicaciones de juegos</h2> <!-- Añadir icono y título -->
</div>
<ul class="recommendation-list">
<!-- Contenido marcador de posición predeterminado -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Imagen marcador de posición 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Cargar datos dinámicamente
fetchTopics();
// Escuchar cambios de tema
observeThemeChanges();
});
/**
* Obtener datos de temas de la API especificada
*/
async function fetchTopics() {
try {
// Solicitar datos de la API
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Fallo al recuperar los datos");
}
const jsonData = await response.json();
// Extraer los primeros 4 datos de temas
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",
}));
// Renderizar en la página
renderTopics(topics);
} catch (error) {
console.error("Error al obtener datos:", error);
}
}
/**
* Renderizar el contenido recomendado en la página
* @param {Array} topics - Datos de temas
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Limpiar contenido marcador de posición
.custom-sidebar {
padding: 10px;
background-color: #fff; /* Fondo blanco */
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; /* Error tipográfico corregido de "23x" a "23px" */
margin-bottom: 10px;
color: #333; /* Título en negro */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Ancho fijo */
height: 156px; /* Altura fija, manteniéndola consistente */
object-fit: cover; /* Mantener la relación de aspecto del contenido de la imagen */
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";
// Crear HTML del elemento recomendado
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; /* Fondo blanco */
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; /* Error tipográfico corregido de "23x" a "23px" */
margin-bottom: 10px;
color: #333; /* Título en negro */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Ancho fijo */
height: 156px; /* Altura fija, manteniéndola consistente */
object-fit: cover; /* Mantener la relación de aspecto del contenido de la imagen */
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);
}
Si lo conviertes en un Componente Ember (mira Plugin y Theme component para ver ejemplos), puedes añadirlo con un Componente de Tema separado y luego referenciarlo por el nombre del Componente Ember.
Entonces también funcionaría con Bars, que utiliza el mismo sistema.
(Nota: no confundas Componente de Tema con Componente Ember. Un Componente de Tema puede contener muchos Componentes Ember)
2 Me gusta
¿Alguna vez resolviste esto? También nos gustaría mostrar todos los eventos en todas las categorías, independientemente de la categoría en la que se encuentre el evento.
2 Me gusta
Desafortunadamente no.
En ese caso, ¿tienes alguna idea de cómo mostrar la barra lateral solo en la página de inicio?
Estaba jugando con esto en un entorno aislado que estoy usando como prueba de concepto para alguien, y no solo sería bueno poder mostrar el bloque del calendario en la página de categorías, sino que también sería bueno poder especificar qué calendario o calendarios usar.
Tengo una categoría de Eventos que contiene el calendario (acceso restringido por grupo es donde terminará), pero quiero que los miembros del grupo al que está restringido puedan ver la lista de próximos eventos en cualquier lugar de la plataforma para impulsar la asistencia a los eventos.
No sé qué sucederá con las restricciones basadas en grupos para esto; aún no he llegado tan lejos en las pruebas.
Sin embargo, cuando miro en mi categoría General, el bloque de la barra lateral derecha dice “No hay próximos eventos”, pero si hago clic en “Ver todo”, me lleva al calendario de eventos y veo el evento de prueba que puse hace una semana.
¿Has revisado el componente temático de Robert?
Si necesitas presupuesto, quizás se podría crear un componente temático para poner eventos del calendario en una barra lateral o donde quieras.
1 me gusta
Comparto una versión modificada en Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. El diseño no está hecho para la barra lateral, sino para mi componente Homepage Blocks. Aún así, la lógica debería funcionar en cualquiera de los marcos de diseño de bloques.
3 Me gusta
Para nosotros, simplemente mostrar los bloques correctos en las páginas “latest” o “hot” funciona bien. Lo que hice fue bifurcar el repositorio y cambiar el comportamiento predeterminado cuando no se proporciona ninguna ruta. Para hacer esto, simplemente modifique el archivo javascripts/connectors/before-list-area/tc-right-sidebar.js y cambie la última línea a:
// Si no se especifican rutas, solo mostrar en las páginas "Latest" o "Hot"
return ["discovery.latest", "discovery.hot"].includes(currentRouteName);
Dado que somos nuevos en Discourse, no estoy seguro de cuánto mantenimiento requerirá hacer esto, pero supongo que ya veremos.
1 me gusta
¿Intentaste usar discovery.latest y discovery.hot en la configuración show_in_routes? En teoría, eso debería evitar tener que bifurcar el componente.
Parece que eso también funciona 
¡Gracias!
1 me gusta
Oye, no sé qué estoy haciendo mal, pero no parece que pueda hacer que la barra lateral aparezca en la página.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Hola a todos,
¿Alguien ha utilizado este componente y ha usado contenido personalizado para crear una marquesina hipervinculada para imágenes?
Quería tener una pequeña sección con una marquesina constante de imágenes hipervinculadas a una página de evento o a una página de artículo.
Gracias, Joe
Cuando se trata de temas dentro de categorías… ¿Puede ser “cualquier tema”?
Quiero tener 7-8 temas dentro de una categoría. y luego quiero elegir 2-3 de ellos para que estén dentro de la “barra lateral” derecha, ¿es eso posible?
¿Es posible fijar esta barra lateral para que permanezca visible al desplazarse (similar a la columna de navegación/categorías del lado izquierdo)?
3 Me gusta