 |
Riepilogo | Aggiunge avvisi in stile Obsidian come alternativa alle citazioni markdown. |
 |
Anteprima | Theme Creator |
 |
Repository | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
Guida all’installazione | Come installare un tema o un componente del tema |
 |
Nuovo a Discourse Themes? | Guida per principianti all’uso dei temi Discourse |
Installa questo componente del tema
Questo componente del tema aggiunge il supporto per avvisi in stile Obsidian in Discourse come alternativa alle citazioni markdown.
Gli avvisi sono un ottimo modo per evidenziare i contenuti e aggiungere note, avvertimenti o altri messaggi speciali ai tuoi post.
Utilizzo
Per creare un avviso, hai diverse opzioni.
Sintassi Markdown
Aggiungi [!tipo] alla prima riga di una citazione, dove tipo è l’identificatore del tipo. L’identificatore del tipo determina l’aspetto e il comportamento dell’avviso. Per visualizzare tutti i tipi disponibili, consulta la sezione Tipi supportati.
> [!tip]
> **Suggerimento**: Usa gli `snippet di codice` per migliorare la leggibilità. Forniscono chiarezza e precisione.
Anteprima
Puoi cambiare il tipo facendo clic sull'icona:
Editor di testo ricco
È ora pienamente supportato, fai riferimento alla sezione Supporto editor di testo ricco.
Scorciatoia da tastiera
- Ctrl + q — Inserisci un avviso vuoto
Barra degli strumenti
Chat
È disponibile un pulsante nella barra degli strumenti per inserire un avviso predefinito.
Titolo personalizzato
Per impostazione predefinita, il titolo dell’avviso è l’identificatore del tipo in maiuscolo. Puoi modificarlo aggiungendo testo dopo l’identificatore del tipo:
> [!question] Etichetta personalizzata 🤗
> Le etichette degli avvisi possono essere personalizzate.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> Possono anche contenere formattazione speciale in linea come date dinamiche.
Puoi anche creare avvisi con solo il titolo:
> [!success] risolto.
Avvisi collassabili
Puoi rendere un avviso collassabile aggiungendo un più + o un meno - direttamente dopo l’identificatore del tipo.
+espande l’avviso per impostazione predefinita-lo collassa invece
> [!todo]- La mia lista di cose da fare
>
> - [x] Scrivere la documentazione
> - [ ] Aggiungere test
> - [ ] Revisionare il codice
> [!todo]+ La mia lista di cose da fare espansa
>
> - [x] Creare il repository
> - [ ] Configurare CI/CD
> - [ ] Distribuire in produzione
Avvisi nidificati
Puoi nidificare avvisi a più livelli.
> [!question] Gli avvisi possono essere nidificati?
>
> > [!todo] Sì!, possono.
> >
> > > [!example] Puoi persino utilizzare più livelli di nidificazione.
> [!tip]
> Ecco un suggerimento utile
>
> > [!info]
> > Con alcune informazioni aggiuntive
> >
> > > [!example]
> > > E un esempio nidificato
>
> Torna al suggerimento principale
Tipi predefiniti supportati
Puoi utilizzare diversi tipi e alias di avvisi.
Ogni tipo ha un colore di sfondo e un’icona diversi.
Consulta l’impostazionecallouts.
note. Consulta la sezione Default Fallbacks per ulteriori informazioni.
| Tipo | Descrizione | Alias |
|---|---|---|
note |
Per note e informazioni generali | - |
abstract |
Per riepiloghi o sezioni astratte | summary, tldr |
info |
Per contenuti informativi | - |
todo |
Per liste di attività o elementi da fare | - |
tip |
Per suggerimenti e informazioni importanti | hint, important |
success |
Per messaggi di successo | check, done |
question |
Per domande e FAQ | help, faq |
warning |
Per avvertenze | caution, attention |
failure |
Per avvisi di fallimento | fail, missing |
danger |
Per messaggi di pericolo o errore | error |
bug |
Per segnalazioni di bug o problemi noti | - |
example |
Per esempi | - |
quote |
Per citazioni | cite |
Personalizzazione
Icona
Puoi utilizzare un’icona FontAwesome o fornire direttamente un elemento SVG.
Elemento SVG
Sebbene la versione gratuita di FontAwesome offra molte scelte, a volte potresti sentirti limitato.
Puoi fornire un elemento SVG <svg>...</svg>.
Esempio: Icone Lucide – È un ottimo set con il vantaggio di poter scegliere lo spessore del tratto.
- Seleziona un’icona
- Regola lo spessore del tratto
- Fai clic su Copia SVG
- Vai alle impostazioni del componente del tema e incolla il contenuto
Default Fallbacks
Puoi impostare valori predefiniti quando un tipo di avviso specificato non viene trovato con le seguenti impostazioni:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse è fantastico]
> Sì.
Configurazione globale
Puoi personalizzare vari aspetti degli avvisi tramite
- Opacità dello sfondo
- Proprietà del bordo (larghezza, stile, colore, raggio)
- Spazio interno (padding)
- Proprietà del font del titolo (dimensione, peso)
- Spazio tra icona e titolo
Configurazione per avviso
Ogni tipo di avviso può essere personalizzato con:
- Icona personalizzata
- Testo del titolo
- Schema colori
- Proprietà del bordo
Consulta la sezione Impostazioni di seguito.
Impostazioni
Lista
| Impostazione | Descrizione |
|---|---|
| callouts | Definisci gli avvisi. |
| callout_fallback_type | Il tipo di avviso predefinito da utilizzare quando il tipo specificato non viene trovato. Valore predefinito: note |
| callout_fallback_icon | L’icona predefinita da utilizzare quando il tipo specificato non viene trovato. Valore predefinito: far-pen-to-square |
| callout_fallback_color | Il colore predefinito da utilizzare quando il tipo specificato non viene trovato. Valore predefinito: #027aff |
| callout_background_opacity | L’opacità globale dello sfondo per l’avviso (da 1 a 100). Valore predefinito: 10 |
| callout_border_width | La larghezza globale del bordo per l’avviso. Valore predefinito: empty |
| callout_border_style | Lo stile globale del bordo per l’avviso. Valore predefinito: empty |
| callout_border_color | Il colore globale del bordo per l’avviso. Valore predefinito: empty |
| callout_border_radius | Il raggio globale del bordo per l’avviso. Valore predefinito: var(--d-border-radius) |
| callout_padding | Lo spazio interno globale per l’avviso. Valore predefinito: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | La dimensione globale del font per il titolo dell’avviso. Valore predefinito: inherit |
| callout_title_font_weight | Il peso globale del font per il titolo dell’avviso. Valore predefinito: bold |
| callout_title_gap | Lo spazio globale tra l’icona e il titolo dell’avviso. Valore predefinito: 0.5em |
| callout_icon_sizep | La dimensione globale per l’icona dell’avviso. |
| callout_transition_duration_ms | La durata dell’animazione di apertura e chiusura (ms). |
| svg_icons | Elenco delle icone FontAwesome 6 utilizzate in questo componente del tema. |
Pagina delle impostazioni per avviso:
| Impostazione | Descrizione |
|---|---|
| Tipo* | Il tipo dell’avviso. Questo identificatore verrà utilizzato nella sintassi dell’avviso: [!tipo] |
| Alias | Gli alias per l’avviso, separati da |.Esempio: cite|quote |
| Icona | L’icona fontawesome per l’avviso. Potrebbe essere necessario aggiungerla all’impostazione svg_icons se non è disponibile nel sottoinsieme predefinito.In alternativa, puoi fornire direttamente un elemento SVG, ad es. <svg>...</svg> |
| Dimensione icona | La dimensione per l’icona dell’avviso. Nota: Usa solo valori CSS validi, ad es. 1em, 16px, 1.5rem |
| Titolo | Il titolo per l’avviso. Se nessun titolo viene fornito nell’avviso, verrà utilizzata questa impostazione. Nota: se entrambi sono vuoti, il titolo sarà il tipo di avviso. |
| Colore | Il colore per l’avviso. Questo verrà utilizzato per lo sfondo, il titolo e l’icona. Nota: Usa solo codici esadecimali per i colori, ad es. #027aff |
| Larghezza bordo | La larghezza del bordo per l’avviso. |
| Stile bordo | Lo stile del bordo per l’avviso. |
| Colore bordo | Il colore del bordo per l’avviso. Importante: se stai utilizzando funzioni CSS per produrre un valore alfa, come rgba, assicurati di non utilizzare spazi tra i valori, ad es., rgba(145,145,145,0.1) |
| Raggio bordo | Il raggio del bordo per l’avviso. |
* Impostazione obbligatoria
Supporto editor di testo ricco
Questo componente supporta ora l’editor di testo ricco di Discourse, rendendo più facile creare, modificare e organizzare gli avvisi.
Creazione di avvisi
Puoi inserire avvisi in diversi modi:
- Scorciatoia da tastiera: Ctrl + Q
- Pulsante della barra degli strumenti
- Regole di input:
/callout<type>!!<type>
- Supporto incollamento
Video
Modifica degli avvisi
I controlli per modificare un avviso appaiono solo quando lo selezioni prima.
-
Selettore tipo
Facendo clic sull’icona, apparirà un menu fluttuante. -
Titolo personalizzato
Supporta formattazione in linea ed emoji -
Collasso
Imposta gli avvisi come collassabili. Può essere accesso dal menu opzioni.
Video
Controlli di spostamento
-
Desktop
- Trascinamento con un’impugnatura
-
Dispositivi touch
- Sposta gli avvisi su/giù
- Nidifica all’interno di avvisi adiacenti
- Disabilitato per impostazione predefinita (può essere abilitato nelle opzioni)
Video
Navigazione da tastiera
Migliora la navigazione all’interno di avvisi nidificati:
- ← all’inizio del titolo apre il selettore tipo
- ↑ / ↓ all’interno di aree vuote crea/rimuove paragrafi
- Invio nel titolo sposta il cursore nel corpo
Video
Inserimento al clic
- Clicca nelle aree vuote per creare un paragrafo
- Pulsanti opzionali consentono di inserire contenuti all’interno o all’esterno degli avvisi
Video
Roadmap
I piani per lo sviluppo futuro potrebbero includere:
- Completamento automatico dei tipi durante la digitazione
Crediti
- @StefanoCecere – Richiesta di funzionalità, Style blockquotes as callouts in Obsidian
Il tuo sito potrebbe non funzionare perché un tema / componente presenta errori.
