Ah, ora capisco. Pensavo che lo scopo di embedMaxHeight fosse di rendere i commenti in uno stile più nativo, minimizzando lo scrolling il più possibile (tranne nei thread estesi, che richiederebbero comunque lo scrolling). Ecco perché l’ho impostato a 15000px. Lo ridurrò un po’.
In tal caso, credo che embedMinHeight non funzioni come previsto. Anche con un valore di 400px, l’embed ha comunque un’altezza di almeno 600px, con un piccolo spazio vuoto alla fine.
Ciao!
Il modulo dei commenti, ridisegnato di recente, è nettamente superiore, soprattutto nell’esperienza mobile! Tuttavia, ho individuato due piccoli problemi:
Esatto! @keegan lo ha sviluppato proprio con questo come caso d’uso principale, quindi sono felice che ti piaccia. Lo abbiamo appena integrato poche ore fa, quindi stiamo ancora lavorando a delle migliorie, come la larghezza della barra degli strumenti e il comportamento di invio premendo Invio.
Mi chiedo se non sarebbe una buona idea visualizzare anche questo modulo direttamente nel thread (su Discourse). Avere il modulo aperto è solitamente molto più invitante e user-friendly per un pubblico non tecnico. Forse vale la pena fare una prova per vedere se aumenta l’engagement?
Era effettivamente un bug, l’ho appena corretto in
Questo è stato corretto, aggiorna per favore!
Ho notato un altro problema sul tuo sito. Vedo che hai integrato il sistema darkmode/lightmode del tuo blog con il nuovo embed di Discourse, in modo che cambiando la modalità del blog cambi automaticamente anche quella dell’embed. Tuttavia, mentre l’integrazione funziona bene in Firefox e Chrome, non funziona con Safari. Immagino che si tratti di un problema di Discourse, dato che non solo il popup “Consenti accesso” è rilevante solo per Safari, ma un altro problema relativo al funzionamento errato della barra di scorrimento colpisce anch’esso solo Safari.
A parte questo, sono curioso di sapere come hai reso funzionante l’integrazione darkmode/lightmode. Alcuni anni fa ho avviato un post su Modalità scura automatica per i commenti incorporati, e da allora sono riuscito a far scrivere a qualcuno uno script usando postMessage per far funzionare i due sistemi insieme. Ma con il nuovo sistema di embed completo dei commenti di Discourse, lo script sembra essersi rotto (con l’impostazione predefinita stranamente sulla modalità scura del tema di Discourse). Quindi la mia domanda è: avevi scritto in precedenza uno script postMessage, che hai poi aggiornato per il nuovo sistema di embed di Discourse? E in caso affermativo (e anche se tu usi WordPress e io uso Ghost), ti dispiacerebbe condividere il tuo codice? Forse potrei confrontarlo con quello che ho io per cercare di far funzionare le cose con Ghost e con la mia configurazione darkmode del blog.
Se sia il tuo blog che Discourse utilizzano la modalità scura automatica in base al sistema, resteranno sincronizzati.
Abbiamo aggiunto la modalità scura automatica a Discourse in Automatic Dark Mode color scheme switching
Sì, ma se ho capito e ricordo bene, ciò consente a Discourse di rilevare se il sistema operativo sta utilizzando la modalità scura e di adattarsi di conseguenza. Il post che ho avviato, che era una risposta a quello che hai linkato (e che a sua volta lo linkava), riguardava il pulsante/toggle in un blog che passa manualmente tra le modalità chiara e scura del blog (indipendentemente dalla modalità del sistema operativo). Ti sembra corretto (e rende quindi rilevante la mia domanda precedente)?
Per essere chiaro, questo è lo script che ho fatto scrivere a qualcuno per l’uso sul mio blog, che immagino abbia bisogno di qualche aggiustamento (forse basta cambiare alcune classi, non sono sicuro).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// Aggiorna gli elementi dopo domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>
Ho appena aggiornato Discourse all’ultima versione, ma sto riscontrando due problemi:
Certo,
Questo è il CSS che sto usando in Discourse
header a.button {
color: #fff;
padding: 6px 8px;
background-color: var(--tertiary);
display: inline-block;
}
.username a.staff {
padding: 2px 5px;
border-radius: 4px;
color: var(--tertiary-hover);
// text-shadow: 0px 0px 14px var(--tertiary-400);
background-color: var(--tertiary-400);
}
@media (prefers-color-scheme: light) {
/* Sfondo principale dell'Iframe */
html, body {
font-family: 'Inter', sans-serif;
}
}
@media (prefers-color-scheme: dark) {
/* Sfondo principale dell'Iframe */
html, body {
background-color: #1e2021 !important; /* Il tuo --bg */
color: #f7f7f7 !important; /* Il tuo --body-color */
font-family: 'Inter', sans-serif;
}
header.discourse {
border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
}
article.post {
border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
}
/* Colore del testo principale */
.embedded-posts,
.embedded-posts p,
.embedded-posts h1,
.embedded-posts h2,
.embedded-posts h3 {
color: #f7f7f7 !important;
}
/* Sfondo dei blocchi, come il footer dell'embed (opzioni di risposta) */
.embedded-footer {
background: #27292b !important; /* Il tuo --bg-2 */
border-top: 1px solid #27292b !important;
}
/* Colore dei bordi (per evitare che i bordi chiari siano visibili) */
.embedded-posts, .embedded-footer {
border-color: #27292b !important;
}
/* Garantisce che link e pulsanti abbiano il colore corretto */
// a:link, a:visited, .topic-post .post-action-list button {
// color: #35bcf1 !important; /* Il tuo --link-color */
// }
}
In questo caso, credo che l’approccio corretto sia quello di attivare l’evento di monitoraggio senza far scattare l’intero tag. La configurazione attuale distorce i nostri Analytics perché attiva un evento page_view, che gonfia artificialmente tutte le statistiche del sito.
Nel giro di una notte, le nostre visualizzazioni di pagina sono schizzate alle stelle, ma questi numeri sono artificiali: non hanno alcun senso commerciale.
Per non parlare del fatto che stiamo attualmente duplicando il caricamento e l’elaborazione degli script.
Nel caso di GTM (Google Tag Manager), la situazione è ancora peggiore: ogni altro script presente nell’account viene iniettato due volte, inclusi i pixel di Google e Meta Ads, gli script delle reti pubblicitarie di terze parti e così via.
Per quanto riguarda gli analytics nativi di Discourse, suggerisco un ulteriore aggiustamento: segmentare il traffico dell’Embed in una categoria a sé stante. Questo ci permetterebbe di visualizzare separatamente il traffico della community e il traffico dell’embed.
Grazie mille, lo apprezzo. Tuttavia mi lascia un po’ perplesso. Quando cercavo di far funzionare il toggle per la modalità scura sul mio blog basato su Ghost con l’embed di Discourse (poiché non funzionava di default), mi è stato detto che avrei dovuto implementare del codice che utilizzasse postMessage (che ho fatto costruire a qualcuno e che ha funzionato). Ma il codice che hai fornito non include alcun JS, il che non mi ha senso, e non riesco a capire perché dovrebbe funzionare tutto automaticamente grazie all’uso di WordPress. Comunque, grazie comunque.
Ciao a tutti, volevo solo controllare se qualcuno ha avuto modo di esaminare la questione finora?
I miei utenti segnalano che non riescono a utilizzare il modulo a causa del problema con il campo di testo, quindi sta diventando un po’ un ostacolo per la nostra community.
LucasMiller: L’interfaccia dei commenti sotto gli articoli ha un bug; non riesco a digitare nulla per pubblicare (testato sia su iPhone che su Android/Xiaomi). Si clicca sul campo di testo per scrivere, ma semplicemente non registra alcun input. Dateci un’occhiata quando potete!
Questo succede solo negli articoli in cui sarebbe il primo commento.
LucasMiller: Sono riuscito a pubblicare solo creando una citazione senza aggiungere alcun testo. Solo dopo che mi ha reindirizzato all’interfaccia della Community (invece di rimanere sotto l’articolo) sono riuscito ad aggiungere effettivamente il mio commento.
La soluzione alternativa con Markdown aiuta, ma non è ideale per l’utente medio. Qualsiasi insight o soluzione temporanea sarebbe molto apprezzata! Grazie ancora per l’aiuto.
cc @Falco
Questo dovrebbe risolvere il problema, verrà integrato più tardi oggi
Grazie @renato
Grazie @renato, è stato risolto!
Solo un avviso: lo scorrimento orizzontale è ancora visibile su mobile, quando hai un attimo per dare un’occhiata
Mi succede su tutti gli articoli. Forse è un problema solo su iOS? Ecco alcuni screenshot da Safari e Chrome.
