Requisiti
Per poter utilizzare questi suggerimenti e trucchi, devi essere un amministratore di un’istanza Discourse auto-ospitata o di un piano ospitato da Discourse superiore al Basic.
Introduzione
Discourse supporta diversi metodi per formattare e personalizzare il contenuto di un post. Puoi trovare l’elenco qui:
Ma a volte avrai bisogno di 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 direttamente al prossimo passo ed entrare subito in un esempio pratico 
Discourse consente qualsiasi attributo HTML che inizi con data- nel contenuto di un post.
Questi sono gli attributi che mireremo con il CSS per personalizzare il nostro contenuto.
In questo tutorial li chiamerò attributi data-
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, persino il nome del tuo cane 
):
[wrap=button]some text[/wrap]
Questo genererà un elemento HTML con il seguente attributo: data-wrap="button".
Primo esempio: uno sfondo rosa
Iniziamo con un esempio pratico. Creeremo un testo con uno sfondo rosa.
Come elemento block
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 al Pannello di amministrazione → Personalizza → Temi → Il tuo tema → Modifica CSS/HTML → CSS.
Inserisci il seguente codice CSS:
[data-wrap="pink"] {
background: pink;
}
Poi clicca sul pulsante Salva.
Torna al tuo post e vedi il risultato:
Sì, è già bellissimo 
Noterai che lo sfondo copre tutta la larghezza del post. Poiché il nostro wrap è l’unico elemento sulla sua riga, genera un elemento block.
Puoi saperne di più sulla differenza tra elementi HTML block e inline qui: HTML Block and Inline Elements.
Se desideri che lo sfondo rosa si estenda su più righe (sempre come block), dovrai assicurarti 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 apparirà così:
Come elemento inline
Ora, aggiungiamo del testo prima del [wrap], o dopo, o entrambi 
. Ad esempio:
Ecco un [wrap=pink]testo rosa[/wrap] ed è fantastico ✨
Ecco il risultato:
Se del testo o altri elementi si trovano sulla stessa riga di uno dei tuoi tag [wrap], verrà generato un elemento inline.
Secondo esempio: un link con l’aspetto di un pulsante.
L’uso del tag [wrap] può talvolta portare a risultati indesiderati per vari motivi, uno dei quali è che può essere un elemento block o inline a seconda del contesto.
Quindi, descriveremo due metodi diversi che raggiungono lo stesso risultato, ma potrai scegliere quello che più ti conviene 
Un link-pulsante inline con [wrap]
La sintassi per creare un link usando Markdown è: [qualche testo](https://qualche-link.ecc). Per personalizzare il testo e farlo apparire come un pulsante, inseriremo il wrap tra le parentesi quadre. Ecco un esempio:
Questo [[wrap=button]bel link[/wrap]](https://discourse.org/) è un pulsante blu 🐳 !
Non commenteremo cosa genera questo codice. Lo sai già perché hai scritto [wrap=button], quindi dovrai mirare a [data-wrap="button"] nel tuo CSS.
Quindi, andiamo, aggiungiamo un po’ di CSS elegante per renderlo bello! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
Non entreremo nei dettagli delle regole CSS qui. Ci sono molte risorse CSS su Internet, quindi se desideri effettuare modifiche più specifiche, dovrai prima imparare di più a riguardo.
Il risultato 
:
Non è vero che è bello?
Un link-pulsante inline con contenuto HTML regolare
Poiché Discourse accetta codice HTML, possiamo decidere di non usare i tag [wrap] e utilizzare HTML con un attributo data-. In questo esempio, useremo la sintassi Markdown regolare per il link e lo circonderemo con tag <span>.
Non possiamo usare direttamente un tag di link <a> perché è un’eccezione e non consente attributi data-.
Scrivi:
Questo <span data-button>[link](https://discourse.org/)</span> è un pulsante verde 🐸 !
Genererà un link all’interno di un tag <span> con un attributo data-button, il che significa che il CSS sarà un po’ più complicato. Dovremo mirare sia a data-button che al 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 usando [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 in misura minore dell’HTML).
Fornirò un singolo esempio senza spiegazione, personalizzando un elenco in cui ogni elemento sarà preceduto da un’emoji di gatto:
Testo:
[wrap=cat]
- Felix
- Garfield
- Il gatto di Nat
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
Risultato:
Utilizzando le variabili di colore del tuo tema
Se permetti agli utenti di utilizzare diversi temi o colori, le tue modifiche potrebbero non apparire bene per ciascuno, specialmente 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 userà il colore primario della palette corrente, e il testo userà il colore secondario:
Testo:
Questo [[wrap=button]bel link[/wrap]](https://discourse.org/) è un pulsante 🌈 !
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’utilizzo degli strumenti per sviluppatori del tuo browser Internet ti mostrerà facilmente l’elenco delle variabili di colore di Discourse e come appare ciascuna:
Sentiti libero di suggerire qualsiasi modifica per questa guida!
Questo documento è controllato dalla versione - suggerisci modifiche su github.
