Isso funciona no tema redditish por acaso?
Alguém teve problemas de limite de taxa conectados a este componente de tema?
1 curtida
Não sei se é possível adicionar tópicos de categoria para obter posts que possam exibir imagens. Eu fiz meu próprio código usando custom-html, mas ele não está funcionando, então, por favor, ajude!
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>Últimos posts de jogos</h2>
<ul class="topic-list" id="topic-list">
<!-- Os posts aqui serão renderizados dinamicamente via JavaScript -->
</ul>
</div>
<script>
// Busca dados e renderiza posts (até 5)
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // Analisa os dados JSON
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// Obtém o array de tópicos e limita a 5 posts
const topics = data.topic_list.topics.slice(0, 5); // Pega apenas os 5 primeiros posts
topics.forEach(topic => {
// Cria um item de lista
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// Cria um elemento de imagem
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // Usa uma imagem de placeholder se não houver imagem
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // Clica na imagem para ir para o post
};
// Cria um elemento de título
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // Clica no título para ir para o post
title.textContent = topic.title;
// Adiciona a imagem e o título ao item da lista
listItem.appendChild(image);
listItem.appendChild(title);
// Adiciona o item da lista ao contêiner da lista
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
</script>
</body>
</html>
Adoro este componente antes de mais nada, então obrigado por todo o seu excelente trabalho nele!
Notei algumas conversas sobre os principais contribuidores e prazos definidos para eles, eu adoraria ter os nossos como os principais usuários mensais, alguém já conseguiu isso?
Obrigado Joe
Você deve ser capaz de adicionar um parâmetro period com o valor monthly. Isso estava faltando na lista de parâmetros na postagem original, mas agora foi atualizado!
2 curtidas
Não consigo obter as últimas postagens usando este componente.
O código que alterei aparece, mas desaparece quando clico nas outras categorias.
Espero realmente que este componente possa suportar o uso de js ou atualização, porque o componente de código que escrevi não funciona, ele não consegue obter o conteúdo da postagem mais recente, então escrevi um manualmente. Espero que ele possa ser atualizado porque fui incorporado ao tc-right-sidebar depois que ele mudou, não está mais disponível. Também sou um programador novato, espero que este recurso possa ser atualizado, por favor, por favor, por favor, por favor
HTML+JS
// Garante que o DOM esteja totalmente carregado antes de executar o código
document.addEventListener("DOMContentLoaded", () => {
// Obtém o contêiner da barra lateral
const sidebar = document.querySelector(".tc-right-sidebar");
// Verifica se o contêiner da barra lateral foi encontrado
if (!sidebar) {
console.error("Contêiner da barra lateral .tc-right-sidebar não encontrado!");
return;
}
// Adiciona conteúdo 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 Postagens de Jogos</h2> <!-- Adiciona ícone e título -->
</div>
<ul class="recommendation-list">
<!-- Conteúdo de espaço reservado padrão -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Imagem de Espaço Reservado 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Carrega dados dinamicamente
fetchTopics();
// Escuta as mudanças de tema
observeThemeChanges();
});
/**
* Busca dados de tópicos da API especificada
*/
async function fetchTopics() {
try {
// Solicita dados da API
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Falha na recuperação de dados");
}
const jsonData = await response.json();
// Extrai os dados dos primeiros 4 tópicos
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",
}));
// Renderiza na página
renderTopics(topics);
} catch (error) {
console.error("Erro ao buscar dados:", error);
}
}
/**
* Renderiza o conteúdo recomendado na página
* @param {Array} topics - Dados do tópico
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Limpa o conteúdo de espaço reservado
.custom-sidebar {
padding: 10px;
background-color: #fff; /* Fundo branco */
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; /* Corrigido erro de digitação de "23x" para "23px" */
margin-bottom: 10px;
color: #333; /* Título em preto */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Largura fixa */
height: 156px; /* Altura fixa, mantendo a consistência */
object-fit: cover; /* Mantém a proporção da imagem */
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";
// Cria o HTML do item 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; /* Fundo branco */
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; /* Corrigido erro de digitação de "23x" para "23px" */
margin-bottom: 10px;
color: #333; /* Título em preto */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Largura fixa */
height: 156px; /* Altura fixa, mantendo a consistência */
object-fit: cover; /* Mantém a proporção da imagem */
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);
}
Se você o transformar em um Componente Ember (procure por Plugin e Theme component para exemplos), você pode adicioná-lo com um Componente de Tema separado e, em seguida, referenciá-lo pelo nome do Componente Ember.
Ele também funcionaria com Bars, que usa o mesmo sistema.
(NB não confunda Componente de Tema com Componente Ember. Um Componente de Tema pode conter muitos Componentes Ember)
2 curtidas
Você já descobriu isso? Nós também gostaríamos de mostrar todos os eventos em todas as categorias, independentemente da categoria em que o evento se encontra.
2 curtidas
Infelizmente não.
Nesse caso, alguma ideia de como mostrar a barra lateral apenas na página inicial?
Eu estava apenas brincando com isso em um ambiente isolado que estou usando como POC para alguém, e não seria apenas bom poder ter o bloco de calendário exibido na página de categorias, mas também seria bom poder especificar qual(is) calendário(s) usar.
Tenho uma categoria de Eventos que contém o calendário (acesso restrito por grupo é onde ele acabará), mas quero que os membros do grupo ao qual ele é restrito possam ver a lista de eventos futuros em qualquer lugar da plataforma para impulsionar a participação nos eventos.
Não sei o que acontecerá com as restrições baseadas em grupo para isso - ainda não cheguei a esse ponto nos testes.
No entanto, quando olho em minha categoria Geral, o bloco da barra lateral direita diz “Nenhum evento futuro” - mas se eu clicar em “Ver tudo”, sou levado ao calendário de eventos e vejo o evento de teste que coloquei nele com uma semana de antecedência.
Você já analisou o componente de tema do Robert?
Se você tiver um orçamento, se necessário, um componente de tema poderia ser criado para colocar eventos de calendário em uma barra lateral ou onde você quiser.
1 curtida
Compartilho uma versão modificada em Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. O layout não é feito para a barra lateral, mas para o meu componente Homepage Blocks. Ainda assim, a lógica deve funcionar em qualquer um dos frameworks de layout de blocos.
3 curtidas
Para nós, apenas mostrar os blocos corretos nas páginas mais recentes ou populares funciona bem. O que eu fiz foi criar um fork do repositório e alterar o comportamento padrão quando nenhuma rota é fornecida. Para fazer isso, basta modificar o arquivo javascripts/connectors/before-list-area/tc-right-sidebar.js e alterar a última linha para:
// Se nenhuma rota for especificada, mostrar apenas nas páginas "Mais recentes" ou "Populares"
return ["discovery.latest", "discovery.hot"].includes(currentRouteName);
Como somos novos no Discourse, não tenho certeza de quanta manutenção isso exigirá, mas acho que veremos.
1 curtida
Você tentou usar discovery.latest e discovery.hot na configuração show_in_routes? Isso, em teoria, deve evitar a necessidade de fazer um fork do componente.
Parece que isso também resolve o problema 
Obrigado!
1 curtida
Olá, não sei o que estou fazendo de errado, mas não consigo fazer a barra lateral aparecer na página.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Olá a todos,
Alguém já usou este componente e utilizou conteúdo personalizado para criar um marquee com hiperlink para imagens?
Eu queria ter uma pequena seção com um marquee constante de imagens com hiperlink para uma página de evento ou uma página de artigo.
Obrigado, Joe
Quando se trata de Tópicos dentro de categorias.. Pode ser "qualquer tópico"?
Eu quero ter 7-8 Tópicos dentro de uma categoria. e então eu quero escolher 2-3 deles para estarem na "Barra lateral" direita, isso é possível?
É possível fixar esta barra lateral para que ela permaneça visível ao rolar (semelhante à coluna de navegação/categorias do lado esquerdo)?
3 curtidas