Funziona anche con il tema redditish per caso?
Qualcuno ha riscontrato problemi di limitazione della frequenza collegati a questo componente tematico?
1 Mi Piace
Non so se sia possibile aggiungere argomenti di categoria per ottenere post che possano visualizzare immagini. Ho creato il mio codice usando html personalizzato ma non ha effetto, quindi ti prego!
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>Ultimi post di giochi</h2>
<ul class="topic-list" id="topic-list">
<!-- I post qui verranno renderizzati dinamicamente tramite JavaScript -->
</ul>
</div>
<script>
// Recupera i dati e renderizza i post (massimo 5)
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // Analizza i dati JSON
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// Ottieni l'array dei post e limita a un massimo di 5 post
const topics = data.topic_list.topics.slice(0, 5); // Prendi solo i primi 5 post
topics.forEach(topic => {
// Crea un elemento di lista
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// Crea un elemento immagine
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // Usa un'immagine segnaposto se non c'è un'immagine
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // Clicca sull'immagine per navigare al post
};
// Crea un elemento titolo
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // Clicca sul titolo per navigare al post
title.textContent = topic.title;
// Aggiungi immagine e titolo all'elemento di lista
listItem.appendChild(image);
listItem.appendChild(title);
// Aggiungi l'elemento di lista al contenitore della lista
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Errore nel recupero dei dati:', error);
});
</script>
</body>
</html>
Adoro questo componente prima di tutto, quindi grazie per tutto il tuo eccellente lavoro su di esso!
Ho notato alcune discussioni sui principali contributori e sui tempi stabiliti per loro, mi piacerebbe avere i nostri come primi utenti mensili, qualcuno ci è riuscito?
Grazie Joe
Dovresti essere in grado di aggiungere un parametro period con il valore monthly. Questo mancava dall’elenco dei parametri nel post originale, ma ora è stato aggiornato!
2 Mi Piace
Non riesco a ottenere gli ultimi post usando questo componente.
Il codice che ho modificato viene visualizzato ma scompare quando clicco sulle altre categorie.
Spero davvero che questo componente possa supportare l’uso di js o il refresh perché il componente di codice che ho scritto non funziona, non riesce a ottenere il contenuto dell’ultimo post, quindi ne ho scritto uno a mano, spero che possa essere aggiornato perché l’ho incorporato nel tc-right-sidebar dopo averlo cambiato non è più disponibile, sono anche un programmatore alle prime armi, spero che questa funzionalità possa essere aggiornata, per favore, per favore, per favore
HTML+JS
// Assicurati che il DOM sia completamente caricato prima di eseguire il codice
document.addEventListener("DOMContentLoaded", () => {
// Ottieni il contenitore della barra laterale
const sidebar = document.querySelector(".tc-right-sidebar");
// Controlla se il contenitore della barra laterale è stato trovato
if (!sidebar) {
console.error("Contenitore della barra laterale .tc-right-sidebar non trovato!");
return;
}
// Aggiungi contenuti consigliati
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>Ultimi post di giochi</h2> <!-- Aggiungi icona e titolo -->
</div>
<ul class="recommendation-list">
<!-- Contenuto segnaposto predefinito -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Immagine segnaposto 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Carica dinamicamente i dati
fetchTopics();
// Ascolta i cambiamenti del tema
observeThemeChanges();
});
/**
* Recupera i dati degli argomenti dall'API specificata
*/
async function fetchTopics() {
try {
// Richiedi dati API
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Recupero dati fallito");
}
const jsonData = await response.json();
// Estrai i primi 4 dati degli argomenti
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",
}));
// Renderizza sulla pagina
renderTopics(topics);
} catch (error) {
console.error("Errore nel recupero dei dati:", error);
}
}
/**
* Renderizza il contenuto consigliato sulla pagina
* @param {Array} topics - Dati degli argomenti
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Cancella il contenuto segnaposto
.custom-sidebar {
padding: 10px;
background-color: #fff; /* Sfondo bianco */
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; /* Corretto refuso da "23x" a "23px" */
margin-bottom: 10px;
color: #333; /* Titolo in nero */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Larghezza fissa */
height: 156px; /* Altezza fissa, mantenendola coerente */
object-fit: cover; /* Mantieni il rapporto d'aspetto del contenuto dell'immagine */
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";
// Crea l'HTML dell'elemento consigliato
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; /* Sfondo bianco */
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; /* Corretto refuso da "23x" a "23px" */
margin-bottom: 10px;
color: #333; /* Titolo in nero */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Larghezza fissa */
height: 156px; /* Altezza fissa, mantenendola coerente */
object-fit: cover; /* Mantieni il rapporto d'aspetto del contenuto dell'immagine */
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 lo rendi un Componente Ember (guarda Plugin e Theme component per esempi), puoi aggiungerlo con un Componente Tema separato e quindi fare riferimento ad esso tramite il nome del Componente Ember.
Funzionerebbe quindi anche con Bars che utilizza lo stesso sistema.
(NB non confondere Componente Tema con Componente Ember. Un Componente Tema può contenere molti Componenti Ember)
2 Mi Piace
Sei mai riuscito a risolvere questo problema? Vorremmo anche mostrare tutti gli eventi in tutte le categorie, indipendentemente dalla categoria in cui si trova l’evento.
2 Mi Piace
Purtroppo no.
In tal caso, hai qualche idea su come mostrare la barra laterale solo sulla home page?
Stavo solo sperimentando in un ambiente sandbox che sto usando come POC per qualcuno, e non solo sarebbe bello poter visualizzare il blocco del calendario nella pagina delle categorie, ma sarebbe anche bello poter specificare quale/quali calendari utilizzare.
Ho una categoria Eventi che contiene il calendario (l’accesso limitato per gruppo è dove finirà alla fine), ma voglio che i membri del gruppo a cui è limitato possano vedere l’elenco degli eventi imminenti ovunque sulla piattaforma per promuovere la partecipazione agli eventi.
Non so cosa succederà con le restrizioni basate sui gruppi per questo - non ci sono ancora arrivato nei test.
Tuttavia, quando guardo nella mia categoria Generale, il blocco della barra laterale destra dice “Nessun evento imminente” - ma se clicco su “Visualizza tutto”, vengo portato al calendario degli eventi e vedo l’evento di test che ho inserito una settimana prima.
Hai esaminato il Theme component per sviluppatori di Robert?
Se hai un budget, se necessario, un TC potrebbe essere creato per inserire gli eventi del calendario in una barra laterale o ovunque tu voglia.
1 Mi Piace
Condivido una versione modificata su Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. Il layout non è pensato per la barra laterale, ma per il mio componente Homepage Blocks. Tuttavia, la logica dovrebbe funzionare in qualsiasi framework di layout a blocchi.
3 Mi Piace
Per noi, mostrare solo i blocchi giusti nelle pagine “latest” o “hot” funziona bene. Quello che ho fatto è stato fare un fork del repository e cambiare il comportamento predefinito quando non viene fornito alcun percorso. Per fare ciò, basta modificare il file javascripts/connectors/before-list-area/tc-right-sidebar.js e cambiare l’ultima riga in:
// Se non sono specificati percorsi, mostra solo nelle pagine "Latest" o "Hot"
return [\"discovery.latest\", \"discovery.hot\"].includes(currentRouteName);
Dato che siamo nuovi a Discourse, non sono sicuro di quanta manutenzione richiederà fare questo, ma immagino che vedremo.
1 Mi Piace
Hai provato a usare discovery.latest e discovery.hot nelle impostazioni di show_in_routes? In teoria, questo dovrebbe evitare di dover biforcare il componente.
Sembra che funzioni anche quello 
Grazie!
1 Mi Piace
Ehi, non so cosa sto sbagliando ma non riesco a far apparire la barra laterale nella pagina.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Ciao a tutti,
Qualcuno ha utilizzato questo componente e ha usato contenuti personalizzati per creare un’insegna lampeggiante collegata a un link per le immagini?
Volevo avere una piccola sezione con un’insegna lampeggiante costante di immagini collegate a un link a una pagina di eventi o a una pagina di articoli.
Grazie Joe
Per quanto riguarda gli argomenti all’interno delle categorie… Può essere “qualsiasi argomento”?
Voglio avere 7-8 argomenti all’interno di una categoria. e poi voglio sceglierne 2-3 da inserire nella “barra laterale” destra, è possibile?
È possibile bloccare questa barra laterale in modo che rimanga visibile durante lo scorrimento (simile alla colonna di navigazione/categorie sul lato sinistro)?
3 Mi Piace