Se você baixar as últimas versões do Discourse, terá a capacidade de incorporar listas de tópicos em outros sites por meio de algum JavaScript e HTML simples.
O caso de uso típico para isso é um blog ou outro site orientado a conteúdo, onde você deseja um widget na lateral da tela que liste tópicos. Você pode filtrar por categoria, tag ou qualquer outra opção de filtro pública disponível.
Como incorporar uma lista de tópicos
Primeiro, você deve ativar a configuração do site embed topics list (incorporar lista de tópicos).
Em seguida, em seu HTML, adicione uma tag <script> que inclua o JavaScript necessário para incorporar os tópicos do Discourse. Você pode adicioná-la onde normalmente adiciona scripts. Por exemplo:
<script src="http://URL/javascripts/embed-topics.js"></script>
Substitua URL pelo endereço do fórum, incluindo a subpasta, se existir.
Depois disso, no <body> do seu documento HTML, adicione uma tag d-topics-list para indicar a lista de tópicos que você deseja incorporar. Você também precisará substituir URL pela sua URL base aqui:
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
Qualquer atributo que você fornecer (exceto discourse-url, que é obrigatório) será convertido em parâmetros de consulta para a pesquisa de tópicos. Então, se você quiser pesquisar tópicos por tag, pode fazer o seguinte:
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
Se um parâmetro de consulta tiver underlines, converta-os para hífens. No exemplo acima, você provavelmente notou que per_page se tornou per-page.
Em contextos SameSite (ou seja, o site de incorporação e seu fórum compartilham um domínio principal), o Discourse saberá se você está logado no fórum e exibirá os resultados de acordo. Não se surpreenda se vir categorias seguras e afins quando estiver logado — usuários anônimos não poderão ver!
Lista de parâmetros
template: Pode ser complete ou basic (padrão). Enquanto o basic é apenas uma lista de títulos de tópicos, o complete traz título, nome do usuário, avatar do usuário, data de criação e miniatura do tópico.
per-page: Número. Controla quantos tópicos retornar.
category: Número. Restringe os tópicos a uma única categoria. Passe o id da categoria de destino.
allow-create: Booleano. Se habilitado, a incorporação terá um botão “Novo Tópico”.
tags: String. Restringe os tópicos aos associados a esta tag.
top_period: Um de all, yearly, quarterly, monthly, weekly, daily. Se habilitado, retornará os tópicos “Top” do período.
Exemplos
Criei um site de exemplo aqui:
Você deve ser capaz de visualizar o código-fonte no seu navegador para ver o código, mas também todo o código-fonte está no GitHub:
Esta é uma funcionalidade totalmente nova, então qualquer feedback ou solicitação será muito apreciada.
Estilizando a lista
Você pode usar nosso recurso de tema existente para adicionar estilos personalizados para a lista incorporada.
Por exemplo, por padrão, nossa lista incorporada usando o modelo complete aparece assim:
Se você quiser que ela se pareça, por exemplo, com uma grade, pode adicionar SCSS personalizado em Tema > Comum > CSS Incorporado:
.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%;
}
}
}
}
O que fará com que ela se pareça com isto:
