Con la possibilità di cambiare automaticamente lo schema dei colori, mi chiedo se esista anche un modo per passare avanti e indietro tra le modalità chiara e scura di Discourse quando è incorporato come commenti in un blog. In particolare, il mio blog Ghost ha un pulsante che gli utenti possono cliccare per passare manualmente tra le modalità chiara e scura. So che il CSS del mio blog non può influenzare il CSS all’interno dell’iframe di Discourse, ma con questa nuova aggiunta, potrebbe esserci un altro modo per cui il pulsante possa anche cambiare lo schema dei colori di Discourse? Puoi vedere un esempio di post con commenti nella parte inferiore di questo post.
Questo è potenzialmente fattibile, ma un po’ complicato. Al momento, non abbiamo aggiunto l’interruzione automatica della modalità scura all’endpoint dei commenti incorporati. Possiamo aggiungerla, e funzionerebbe se il tuo sito Ghost passasse automaticamente alla modalità scura quando il browser lo fa. Ma, per quanto posso vedere, il tuo sito Ghost utilizza un pulsante per la modalità scura, che non funzionerebbe con l’implementazione di Discourse.
Quello che puoi fare nel tuo caso specifico è attivare una classe nell’iframe dei commenti incorporati di Discourse quando si clicca sul pulsante, e poi utilizzare quella classe per cambiare i colori nel tuo foglio di stile incorporato.
Sembra una buona idea. Mentre sto attualmente preparando diversi temi (Ghost) che utilizzano la modalità scura per alcuni colleghi, tutti i quali condivideranno un’unica istanza di Discourse, questo è ancora un obiettivo più a lungo termine.
Purtroppo non ho ben capito cosa stai suggerendo qui. Attualmente, tutti gli elementi che voglio stilizzare con la modalità scura nel mio blog hanno il loro CSS duplicato, anteponendo tali elementi a body.dark. Come in:
p {
color: #000;
}
body.dark p {
color: #FFF;
}
Stai forse suggerendo di usare quel codice body.dark per modificare le cose nell’iframe di Discourse? Perché ho provato a inserire quanto segue nel campo CSS incorporato di Discourse, ma purtroppo non ha avuto alcun effetto:
.FF2F-discourse p {
color: #000;
}
body.dark .FF2F-discourse p {
color: #FFF;
}
Detto questo, stai invece suggerendo di scrivere del JavaScript separato in modo che il pulsante attivi un cambiamento specifico mirando a una classe nell’iframe? Perché come ho detto nel mio commento precedente, non pensavo che codice esterno potesse influenzare il CSS all’interno di un iframe, da cui la mia confusione. Ma sono solo un principiante in HTML/CSS, quindi non c’è dubbio che tu sappia più di me e/o che io stia fraintendendo qualcos’altro.
Sì, è esattamente ciò che sto suggerendo. I fogli di stile del tuo blog non possono essere applicati all’iframe, ma puoi utilizzare JS per attivare o disattivare la classe dark nell’elemento html o body dell’iframe e aggiornare di conseguenza il tuo foglio di stile incorporato di Discourse.
Ho trovato due pagine che spiegano come si potrebbe gestire il passaggio tra modalità chiara e scura per l’embedding di Discourse, ma lo sviluppatore JS che mi segue si chiede se il metodo che stai suggerendo richieda l’uso di postMessage (come indicano le pagine che ho trovato) o qualcosa di diverso.
Ecco una pagina che spiega come implementare la comunicazione tra finestre con postMessage:
Mentre questa è in realtà un tutorial su come modificare il CSS all’interno di un iframe tramite postMessage, specificamente per il passaggio tra modalità chiara e scura:
Mi scuso per aver riesumato un argomento così datato, ma ci sono piani per implementare il cambio automatico della modalità scura per l’endpoint dei commenti incorporati?
Al momento non abbiamo in programma di aggiungere questa funzionalità. I siti possono aggiungere stili in modalità scura al loro foglio di stile incorporato come soluzione alternativa (o utilizzare la tecnica postMessage discussa in precedenza).
Il blocco di codice ① aggiunge un listener di eventi nell’iframe Discourse incorporato che invierà un messaggio al mio sito web che contiene l’iframe Discourse incorporato una volta che Discourse incorporato sarà caricato.
Quando il mio sito web riceve un messaggio da Discourse incorporato, effettuerà una validazione, come mostrato nel blocco di codice ②, e se superata, chiamerà la funzione setIframeStyle per impostare Discourse incorporato.
La funzione setIframeStyle, mostrata nel blocco di codice ③, passa la modalità colore, “dark” o “light”, all’iframe chiamando postMessage. Inoltre, una volta attivata la modalità scura, la funzione può essere chiamata per mantenere Discourse incorporato con la stessa modalità colore del mio sito web.
Il blocco di codice ④ consente a Discourse incorporato di elaborare il messaggio della modalità colore inviato dal mio sito web. Qui cambio la modalità colore cambiando il nome della classe nel tag body.
Inoltre, i blocchi di codice ① e ④ sono aggiunti dalla pagina di amministrazione di Discourse, come segue:
Grazie per la panoramica sopra @mikeguo, è spiegata meravigliosamente!
Nota anche che devi essere sull’ultima versione di Discourse per realizzare questo, la funzionalità Embedded Header è stata aggiunta solo pochi giorni fa.
Posso confermare che il metodo sopra funziona ancora, ma sarebbe stato bello non dover digitare il codice da uno screenshot Quindi, eccolo qui, leggermente aggiornato:
Passaggi
L’iframe dei commenti finisce di renderizzarsi e invia un messaggio alla finestra principale del browser, informandola.
Il browser interroga la sua impostazione di modalità scura/chiara e invia il valore indietro nell’iframe.
L’iframe riceve il messaggio e imposta un attributo data, una classe o simile, in base all’impostazione della modalità scura/chiara.
Codice
Una volta caricato l’iframe, invia una notifica alla finestra padre. Questo deve essere inserito su Discourse, sotto Admin -> Personalizza -> (seleziona tema) -> Modifica CSS/HTML -> Intestazione incorporata.
Gestisci questo trigger in arrivo nella finestra principale. Questo codice si trova sul tuo sito blog:
<script type="text/javascript">
const discourse_url = "https://your.discourse-instance.org";
// Qui, determiniamo il tema e inviamo un messaggio all'iframe per informarlo del tema
// Vedi sotto come impostiamo notifyFrameStyle
const notifyIFrameOfTheme = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
// Modifica la riga sottostante per recuperare l'impostazione della modalità scura, a seconda di come la memorizzi
theme: document.documentElement.getAttribute("data-theme")
},
discourse_url
);
}
};
// Chiama setFrameStyle quando riceviamo il messaggio "iframe loaded"
const handleMessageListener = (event) => {
var origin = event.origin;
if ((origin === discourse_url) && (event.data == "iframe loaded")) {
notifyIFrameOfTheme();
}
};
</script>
Nel blocco <script> da (1), aggiungi un listener per il messaggio del tema inviato da notifyFrameStyle:
window.addEventListener("message", (event) => {
const payload = event.data;
if (payload.theme) {
// Fai qualcosa con l'impostazione del tema; ho impostato l'attributo `data-theme` sull' `<html>` dell'iframe,
// ma potresti voler impostare un attributo di classe o simile
document.documentElement.setAttribute("data-theme", payload.theme);
}
}, false);
Stile
Sotto Admin -> Personalizza -> (seleziona tema) -> Modifica CSS/HTML -> CSS incorporato, puoi ora fornire CSS per ogni modalità. Ad esempio, puoi sovrascrivere le variabili di stile di Discourse:
Grazie per avermelo fatto notare! Non posso più modificare il post qui sopra, ma window.addEventListener va in fondo allo snippet di codice sotto il punto (2).
Quindi, eccolo qui, leggermente aggiornato: