Barra di avanzamento

[Canapin (Coin-coin le Canapin)]

	Riepilogo	Aggiungi una barra di avanzamento al tuo sito
	Anteprima	\[todo\]
	Repository	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	Guida all’installazione	Come installare un tema o un componente tema
	Nuovo ai temi di Discourse?	Guida per principianti all’utilizzo dei temi di Discourse

Installa questo componente tema

Barra di Avanzamento di Discourse

Descrizione

Questo componente aggiunge una barra di avanzamento a qualsiasi punto di uscita disponibile del tuo sito.

È meglio utilizzarlo con script che aggiornano automaticamente il valore della barra di avanzamento effettuando una richiesta PUT a /admin/theme/[theme_component_ID]/setting con il payload {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"}.

La barra di avanzamento è ottimizzata per adattarsi ai seguenti punti di uscita:

• above-main-container
• above-site-header
• before-header-panel
• below-site-header
• before-sidebar-sections

Caso d’uso

Questo componente è stato sviluppato per visualizzare pubblicamente il progresso delle donazioni su un forum finanziato dalla comunità.

Uno script personalizzato ha utilizzato gli webhook di Ko-fi per aggiornare dinamicamente la barra di avanzamento per ogni donazione.

Avere una barra di avanzamento è diventato un enorme incentivo per la comunità a donare.
In precedenza, veniva utilizzato solo un argomento bloccato e l’obiettivo di donazione veniva raggiunto nell’arco di diversi mesi.
Con la barra di avanzamento, l’obiettivo di donazione è stato raggiunto in un paio di giorni negli ultimi anni!

Questa barra di avanzamento può ovviamente essere utilizzata per altri scopi. Condividi per cosa la utilizzi!

Screenshot

Desktop

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (solo desktop)

below-site-header

Mobile

above-main-container e below-site-header

before-sidebar-sections

above-site-header

Impostazioni

Impostazione	Descrizione
content_before	Testo mostrato sopra la barra di avanzamento (HTML consentito). Predefinito: \u003cstrong\u003eProgresso donazioni\u003c/strong\u003e
content_after	Testo mostrato sotto la barra di avanzamento (HTML consentito). Predefinito: vuoto
progress_bar_width	Larghezza del contenitore della barra di avanzamento. Predefinito: 50%
progress_bar_height	Altezza della barra di avanzamento. Predefinito: 10px
max_value	Valore massimo per la barra di avanzamento. Predefinito: 300
current_value	Valore corrente della barra di avanzamento. Predefinito: 150
value_display	Formato di visualizzazione del valore mostrato accanto alla barra di avanzamento. Segnaposto disponibili: {current}, {max}, {percentage}. Esempi:\u003cbr\u003e{percentage}% mostra 33%.\u003cbr\u003e{current} di {max} paperelle di gomma mostra 9 di 15 paperelle di gomma. Predefinito: {percentage}%
hide_when_full	Nasconde la barra di avanzamento quando è piena. Predefinito: false
outlet_name	Posizione nel sito in cui viene visualizzata la barra di avanzamento. Punti di uscita consigliati: above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. Predefinito: above-main-container
display_on_mobile	Mostra la barra di avanzamento sui dispositivi mobili. Predefinito: true
display_on_homepage	Mostra la barra di avanzamento sulla homepage. Predefinito: true
url_must_contain	URL in cui viene visualizzata la barra di avanzamento. Predefinito: `/latest
progress_bar_color	Valore CSS background valido. Esempi:\u003cbr\u003e#FC0FC0\u003cbr\u003ergb(252,15,192)\u003cbr\u003evar(--tertiary)\u003cbr\u003elinear-gradient(0deg, white 0%, var(--tertiary) 100%)\u003cbr\u003eNota: se vuoto, viene utilizzato un colore dinamico da rosso (0%) a verde (100%). Predefinito: var(--tertiary)

Ringraziamenti

Grazie a @Arkshine, per l’aiuto generale con il codice e i consigli