Si descargue las últimas versiones de Discourse, obtendrá la capacidad de incrustar listas de temas en otros sitios mediante un sencillo Javascript y HTML.
El caso de uso típico para esto es un blog u otro sitio impulsado por contenido, donde desea un widget en el lateral de la pantalla que liste los temas. Puede filtrar por categoría, etiqueta o cualquiera de las otras opciones de filtrado públicas disponibles.
Cómo incrustar una lista de temas
Primero, debe habilitar la configuración del sitio embed topics list (incrustar lista de temas).
Luego, en su HTML, agregue una etiqueta <script> que incluya el Javascript necesario para incrustar los temas de Discourse. Puede agregar esto donde normalmente agrega scripts. Por ejemplo:
<script src="http://URL/javascripts/embed-topics.js"></script>
Reemplace URL con la dirección del foro, incluida la subcarpeta si existe.
Después de eso, en el <body> de su documento HTML, agregue una etiqueta d-topics-list para indicar la lista de temas que desea incrustar. También deberá reemplazar URL con su URL base aquí:
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
Cualquier atributo que proporcione (excepto discourse-url, que es obligatorio) se convertirá en los parámetros de consulta para la búsqueda de temas. Por lo tanto, si desea buscar temas por etiqueta, podría hacer lo siguiente:
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
Si un parámetro de consulta tiene guiones bajos, conviértalo a guiones. En el ejemplo anterior, probablemente notó que per_page se convirtió en per-page.
En contextos SameSite (es decir, el sitio de incrustación y su foro comparten un dominio principal), Discourse sabrá si ha iniciado sesión en el foro y mostrará los resultados en consecuencia. No se sorprenda si ve categorías seguras y similares cuando ha iniciado sesión; ¡los usuarios anónimos no podrán verlas!
Lista de parámetros
template: complete o basic (predeterminado). Mientras que basic es solo una lista de títulos de temas, complete incluye título, nombre de usuario, avatar del usuario, fecha de creación y miniatura del tema.
per-page: Número. Controla cuántos temas devolver.
category: Número. Restringe los temas a una sola categoría. Pase el id de la categoría objetivo.
allow-create: Booleano. Si está habilitado, la incrustación tendrá un botón “Nuevo tema”.
tags: Cadena. Restringe los temas a aquellos asociados con esta etiqueta.
top_period: Uno de all, yearly, quarterly, monthly, weekly, daily. Si está habilitado, devolverá los temas “Top” del período.
Ejemplos
He creado un sitio de ejemplo aquí:
Debería poder ver el código fuente en su navegador para ver el código, pero también todo el código fuente está en GitHub:
Esta es una función completamente nueva, por lo que cualquier comentario o solicitud sería muy apreciado.
Estilizando la lista
Puede utilizar nuestra función de temas existente para agregar estilos personalizados para la lista incrustada.
Por ejemplo, de forma predeterminada, nuestra lista incrustada que usa la plantilla complete se ve así:
Si desea que se vea, por ejemplo, como una cuadrícula, puede agregar SCSS personalizado a Tema > Común > CSS Incrustado:
.topics-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
.topic-list-item {
.main-link {
border: 1px dotted gray;
padding: 0;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-column.featured-image-column .topic-featured-image img {
max-width: initial;
max-height: initial;
width: 100%;
}
}
}
}
Lo que hará que se vea así:
