Requisiti
Per poter utilizzare questi suggerimenti e trucchi, devi essere un amministratore di un’istanza Discourse self-hosted o di un piano ospitato da Discourse superiore a Basic.
Introduzione
Discourse supporta diversi metodi per formattare e personalizzare il contenuto di un post. Puoi trovare l’elenco qui:
Ma a volte vorrai qualcosa di più specifico, ad esempio un link che sembri un pulsante.
Questo è il tipo di modifica che impareremo qui.
La logica
Spiegherò brevemente la logica sottostante, ma puoi passare al passaggio successivo e tuffarti in un esempio pratico 
Discourse consente qualsiasi attributo HTML che inizi con data- nel contenuto di un post.
Questi sono gli attributi che targetizzeremo con CSS per personalizzare il nostro contenuto.
Li chiamerò attributi data- in questo tutorial
Un modo per creare elementi con questi attributi è un tag simile a BBcode: [wrap], a cui aggiungeremo un valore a nostra scelta. Qui scegliamo “button” (potrebbe essere qualsiasi altra cosa, anche il nome del tuo cane 
):
[wrap=button]some text[/wrap]
Questo produrrà un elemento HTML con il seguente attributo: data-wrap="button".
Primo esempio: uno sfondo rosa
Iniziamo con un esempio pratico. Creeremo del testo con uno sfondo rosa.
Come elemento blocco
Nel tuo post, su una riga vuota, scrivi:
[wrap=pink]pink text[/wrap]
Questo creerà un elemento div con l’attributo data-wrap="pink".
Quindi, aggiungi il seguente CSS al tuo tema.
Vai a Pannello di amministrazione → Personalizza → Temi → il tuo tema → Modifica CSS/HTML → CSS.
Inserisci il seguente codice CSS all’interno:
[data-wrap="pink"] {
background: pink;
}
Quindi fai clic sul pulsante Salva.
Torna al tuo post e guarda il risultato:
Sì, è già bello 
Noterai che lo sfondo copre tutta la larghezza del post. Poiché il nostro wrap è l’unico elemento sulla sua riga, produce un elemento blocco.
Puoi saperne di più sulla differenza tra elementi HTML blocco e inline qui: HTML Block and Inline Elements.
Se vuoi il tuo sfondo rosa su più righe (ancora come blocco), avrai bisogno che entrambi i tuoi tag [wrap] non abbiano altro contenuto o testo sulla stessa riga:
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
Questo avrà questo aspetto:
Come elemento inline
Ora, aggiungiamo del testo prima del [wrap], o dopo, o entrambi 
. Ad esempio:
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
Ecco il risultato:
Se il testo o altri elementi sono sulla stessa riga di uno dei tuoi tag [wrap], produrrà un elemento inline.
Secondo esempio: un link con l’aspetto di un pulsante.
Sfogliare il tag [wrap] può a volte portare a risultati indesiderati per varie ragioni, una delle quali è che può essere un elemento blocco o inline a seconda del contesto.
Quindi, descriveremo due metodi diversi che ottengono lo stesso risultato, ma potrai scegliere quello che ti si addice di più 
Un link pulsante inline con [wrap]
La sintassi per creare un link utilizzando markdown è: [some text](https://some-link.etc).
Per personalizzare il testo e farlo apparire come un pulsante, inseriamo il wrap all’interno delle parentesi quadre. Ecco un esempio:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
Non commenteremo cosa produce questo codice. Lo sai perché, avendo scritto [wrap=button], dovrai targetizzare [data-wrap="button"] nel tuo CSS.
Quindi, andiamo, aggiungiamo un CSS elegante per renderlo bello! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
Non dettagliamo qui le regole CSS. Ci sono molte risorse CSS su Internet, quindi se vuoi fare modifiche più specifiche, dovrai prima imparare al riguardo.
Il risultato 
:
Sembra bene, no?
Un link pulsante inline con contenuto HTML normale
Poiché Discourse accetta codice HTML, possiamo decidere di non usare i tag [wrap] e usare HTML con un attributo data-. In questo esempio, useremo la sintassi Markdown normale per il link e lo racchiuderemo con tag <span>.
Non possiamo usare direttamente un tag di link <a> perché è un’eccezione e non consentirà alcun attributo data-.
Scrivi:
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
Questo produrrà un link dentro un tag <span> con un attributo data-button, il che significa che il CSS sarà un po’ più complicato. Dovremo targetizzare sia data-button che il link:
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
Ed ecco il risultato!
Per andare oltre
Un elenco personalizzato utilizzando [wrap]
I tag [wrap] e gli attributi data- possono essere utilizzati in molti contesti e puoi personalizzare contenuti più avanzati. Il limite è principalmente la tua conoscenza del CSS (e dell’HTML in misura minore).
Daremo un singolo esempio senza spiegazione personalizzando un elenco in cui ogni elemento sarà preceduto da un’emoji di gatto:
Testo:
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
Risultato:
Utilizzare le variabili di colore del tuo tema
Se consenti agli utenti di utilizzare temi o colori diversi, le tue modifiche potrebbero non sembrare belle per ciascuno, soprattutto se hanno la scelta tra schemi di colori chiari e scuri.
Una buona pratica è utilizzare le variabili di colore di Discourse invece di colori “hardcoded” come red, #FF0000 o rgb(255,0,0).
Ecco un esempio in cui il colore di sfondo del pulsante utilizzerà il colore primario della palette corrente e il testo utilizzerà il colore secondario:
Testo:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
Ecco come apparirà per un utente che utilizza lo schema di colori Solarized Light:
E se utilizzano lo schema di colori Solarized Dark:
Conclusione
Ora hai le basi per creare elementi personalizzati utilizzando l’elemento [wrap] e gli attributi data-.
Per effettuare personalizzazioni più avanzate, imparare il CSS è fondamentale. Troverai molti tutorial su Internet.
La seguente guida di Discourse può anche essere d’aiuto: Making custom CSS changes on your site.
L’uso degli strumenti per sviluppatori del tuo browser Internet mostrerà anche facilmente l’elenco delle variabili di colore di Discourse e come appare ciascuna:
Sentiti libero di suggerire qualsiasi modifica per questa guida!
Questo documento è sotto controllo di versione - suggerisci modifiche su github.
