Questo componente del tema aggiunge una filigrana alla pagina.
È possibile aggiungere una qualsiasi delle seguenti informazioni:
un breve messaggio di testo
il nome utente attualmente connesso
l’ora di visualizzazione della pagina
Diverse impostazioni consentono di personalizzare come e quando verrà visualizzata la filigrana:
show_watermark_in_background: Se abilitato, genererà e visualizzerà una filigrana sulla pagina.
scroll_enabled: Se abilitato, la filigrana scorrerà con la pagina.
only_in_categories: Elenco delle categorie in cui dovrebbe essere visualizzata la filigrana.
except_in_categories: Elenco delle categorie in cui la filigrana non dovrebbe essere visualizzata.
only_in_tags: Elenco dei tag in cui dovrebbe essere visualizzata la filigrana.
except_in_tags: Elenco dei tag in cui la filigrana non dovrebbe essere visualizzata.
if_site_title_matches: Visualizza la filigrana solo se il titolo del sito corrisponde a questa espressione regolare. Vedi Discourse Web Page Watermark - #5 by pfaffman per un caso d’uso.
or_if_url_matches: OPPURE visualizza la filigrana se l’URL corrisponde a una qualsiasi delle espressioni regolari nell’elenco. Si noti che l’URL testato non include il nome host.
tile_width: La larghezza (in px) della tessera che contiene le informazioni della filigrana.
tile_height: L’altezza (in px) della tessera che contiene le informazioni della filigrana.
color: Il colore del testo della filigrana.
text_align: Come il testo deve essere allineato rispetto alle coordinate x,y durante il disegno.
text_rotation: L’angolo in cui il testo deve essere ruotato rispetto alle coordinate x,y durante il disegno.
display_text: Testo da visualizzare nella filigrana.
display_text_font: Il font utilizzato per visualizzare il testo (analizzato come valore del font CSS).
display_text_x: La coordinata dell’asse x del punto in cui iniziare a disegnare il testo nell’area di disegno della tessera, in pixel.
display_text_y: La coordinata dell’asse y del punto in cui iniziare a disegnare il testo nell’area di disegno della tessera, in pixel.
display_username: Se abilitato, la filigrana visualizzerà il nome utente corrente.
display_username_font: Il font utilizzato per visualizzare il nome utente (analizzato come valore del font CSS).
display_username_x: La coordinata dell’asse x del punto in cui iniziare a disegnare il nome utente nell’area di disegno della tessera, in pixel.
display_username_y: La coordinata dell’asse y del punto in cui iniziare a disegnare il nome utente nell’area di disegno della tessera, in pixel.
display_timestamp: Se abilitato, la filigrana visualizzerà l’ora di visualizzazione della pagina.
display_timestamp_format: Come verrà formattato l’orario. Per informazioni sui formati validi, fare riferimento a Moment.js | Docs.
display_timestamp_font: Il font utilizzato per visualizzare l’orario (analizzato come valore del font CSS).
display_timestamp_x: La coordinata dell’asse x del punto in cui iniziare a disegnare l’orario nell’area di disegno della tessera, in pixel.
display_timestamp_y: La coordinata dell’asse y del punto in cui iniziare a disegnare l’orario nell’area di disegno della tessera, in pixel.
Avvertenze
Caveats
Se si intende aggiungere una filigrana all’istanza del proprio forum, probabilmente si vorrà taggare gli screenshot da essa estratti. Sia che possano essere ricondotti a te, sia per scoraggiare i tuoi utenti dal fare screenshot e pubblicarli sui social media, ad esempio. Ma è importante essere consapevoli che l’aggiunta della filigrana danneggerà la leggibilità. C’è un compromesso da fare tra UX e averla.
La filigrana viene visualizzata in un div sotto la pagina. A seconda del tema, i componenti sopra potrebbero coprirla, quindi se si sceglie di aggiungerla alla pagina, il tema deve avere molta trasparenza. È possibile però posizionarla sopra tutti i componenti cambiando z-index con CSS. Dovresti anche regolare mix-blend-mode per migliorare la visibilità.
Questo componente viene fornito con impostazioni predefinite sensate che dovrebbero funzionare bene con la maggior parte dei temi chiari. Aggiungere una filigrana ai temi scuri è complicato, poiché probabilmente avrà un impatto maggiore sulla leggibilità. Incoraggio vivamente a modificare le impostazioni e il CSS per trovare ciò che funziona meglio nel tuo caso.
Poiché la filigrana viene visualizzata in un div, qualsiasi utente che sappia usare gli Strumenti per sviluppatori nel browser può nasconderla. Farà il lavoro previsto per probabilmente il 99% degli utenti non tecnici, ma è importante essere consapevoli che non è una soluzione infallibile.
Oh, capisco, ho confuso questo con le filigrane per le immagini. Modificherò il titolo in modo che sia più chiaro. Un caso d’uso piuttosto insolito… Non sono a conoscenza di alcun sito web che apponga una filigrana su ogni pagina web.
Concordo sul fatto che si tratti di un caso d’uso insolito. Per come stanno le cose al momento, penso che sia utile principalmente per forum privati in aziende con un reparto di sicurezza paranoico, come le aziende del settore finanziario.
È stato un primo MVP. Aggiungerò funzionalità in base al feedback ricevuto dalla community.
Spero di poter aggiungere presto il filtro basato su categorie suggerito da Mr. X, che lo renderà più utile a un pubblico più ampio.
Questo aggiunge un’impostazione del tema include_if_title_matches, che è vuota per impostazione predefinita. Se l’impostazione è vuota, non viene apportata alcuna modifica.
Se l’impostazione ha un valore, SiteSetting.title deve corrispondere affinché venga visualizzata la filigrana.
Il caso d’uso è quello di visualizzare la filigrana su un sito di staging, ma non su quello di produzione, senza richiedere modifiche al database. Impostando include_if_title_matches su “staging” e avendo “staging” in SiteSetting.title del sito di staging (impostato in una variabile ENV in modo che persista quando il database di produzione viene ripristinato su di esso), la filigrana viene visualizzata sul sito di staging ma non su quello di produzione.
Con questa modifica, la installerò su ogni sito che ha un sito di staging.
Posso confermare che funziona sia sul mio sito di produzione che su quello di staging; il primo funzionava con Discourse.siteSettings.xxx mentre ci stavo lavorando (sto per fare un aggiornamento che penso possa cambiare questo).
È di grande aiuto vedere il mio sito di staging con la filigrana. Grazie per il tema!
È possibile aggiungere un’opzione per creare una filigrana (funzionalmente) invisibile? Ad esempio, uno o due valori di colore diversi dallo sfondo e sotto tutto il resto? Potremmo quindi esaminare qualsiasi screenshot e cercare quei valori di colore per scoprire il testo del nome utente.
Il caso d’uso non è quello di scoraggiare gli screenshot, ma di scoprire quale utente sta effettuando screenshot e distribuendo post da un forum privato.
In alternativa, poiché il nostro forum utilizza il cambio automatico chiaro/scuro, è possibile eseguire due copie del tema per codificare i valori di colore? O forse rendere il colore della filigrana un’impostazione per tema?
Grazie per questo. Potrebbe essere una soluzione perfetta per noi.
Forse se riesci a dissuaderli allora smetteranno e non importerà chi era?
Penso che far cambiare colore a seconda del tema corrente sarà difficile. Se quello che vuoi è provare a catturare qualcuno avendo una filigrana segreta, allora la tua migliore opzione sarebbe disabilitare l’altro tema.
[quote=“baylands, post:8, topic:214108”]
È possibile aggiungere un’opzione per creare una filigrana (funzionalmente) invisibile? Ad esempio, uno o due valori di colore diversi dallo sfondo e sotto tutto il resto? Potremmo quindi esaminare qualsiasi screenshot e cercare quei valori di colore per scoprire il testo del nome utente.
Il caso d’uso non è quello di scoraggiare gli screenshot, ma di scoprire quale utente sta facendo screenshot e distribuendo post da un forum privato.
[/quote]Teoricamente, è possibile. Ma lo proverei attentamente prima di usarlo in produzione. Poiché nel tuo caso d’uso ci sarà quasi nessun contrasto tra la filigrana e il colore di sfondo, c’è una buona probabilità che queste informazioni vadano perse nella compressione a seconda del formato e delle impostazioni applicate al momento del caricamento.
Il caso d’uso principale per questo componente è scoraggiare gli screenshot, ma puoi provare il tuo approccio e vedere se funziona. Sarebbe un caso d’uso a cui non avevo mai pensato prima.
È possibile utilizzare questo componente contemporaneamente con temi chiari e scuri. È un caso d’uso a cui ho pensato durante lo sviluppo. Non è nemmeno necessario eseguire più copie dello stesso componente.
L’impostazione color supporta l’uso di una variabile CSS. Ad esempio, il valore predefinito per questa impostazione è var(--primary-low).
Quindi, finché viene utilizzata una variabile CSS impostata con i colori appropriati in tutti i temi che si desidera filigranare. Dovresti essere a posto!
Se provi, fammi sapere se funziona come ti aspettavi.
Ho riscontrato un problema durante il tentativo del percorso della variabile.
Il nostro unico tema è il tema chiaro, che utilizza le palette di colori chiare e scure per la sua modalità scura automatica.
Posso aggiungere una variabile “–secondary-watermark” al CSS del tema chiaro, ma non cambia quando si utilizza la palette di colori scura sul tema chiaro.
Non riesco a capire come aggiungere la variabile alla palette di colori anziché al tema, quindi, di conseguenza, l’override del tema chiaro funziona solo con la palette di colori chiara e, quando la palette di colori passa automaticamente al buio, la filigrana diventa istantaneamente visibile.
È una strana particolarità a cui ho dovuto pensare per un po’. Di punto in bianco, sai se è possibile eseguire calcoli con una variabile? In modo tale che potrei definire --secondary-watermark come --secondary meno 10? O qualcosa del genere? Se sì, penso che risolverebbe il problema.
Il nostro caso d’uso è ammettiamolo un po’ di nicchia. Dubito che una filigrana visibile scoraggerebbe perché la gente cercherebbe di aggirarla. Siamo un gruppo a iscrizione chiusa e dobbiamo essere in grado di espellere le persone che diffondono screenshot. Questo è più importante per noi.
Questo è in realtà ottimo per noi, continuavamo a ricevere post di forum privati pubblicati sui social media da persone che si infiltrano nel nostro gruppo per cercare di farci fare brutta figura, quindi averlo eviterebbe questo o ci permetterebbe facilmente di bloccare gli utenti offensivi. Grazie @saquetim per aver sviluppato questo.
deprecate-shim.js:33 DEPRECATION: [THEME 15 'discourse-watermark'] L'uso dell'Ember Global è deprecato. Dovresti importare il modulo Ember o l'API specifica invece. [deprecation id: ember-global] Vedi https://deprecations.emberjs.com/v3.x/#toc_ember-global per maggiori dettagli.
DEPRECATION: [THEME 15 'discourse-watermark'] L'uso di `run.schedule` è stato deprecato. Invece, importa il valore direttamente da @ember/runloop:
import { schedule } from '@ember/runloop'; [deprecation id: deprecated-run-loop-and-computed-dot-access]
Proverei ad aiutarti ma sto spegnendo i miei stessi :fuoco:
Non funziona molto bene con il tema che sto usando, sarebbero utili più opzioni personalizzabili, come la possibilità di decidere quanta parte della pagina occupa la filigrana (in modo che occupi solo il contenuto del post/lo sfondo della pagina, non ad esempio l’intestazione durante la navigazione tra le sezioni).
Per quanto riguarda il mio tema, non importa quale selettore di colore CSS uso e non importa quanto sia brillante il colore, il testo/SVG appare scuro/nero.
|Anteprima| Discourse Watermark - Theme Creator|
|Repository| Discourse-Watermark |
|Guida all’installazione|Come installare un tema o un componente del tema|
|Nuovo ai temi di Discourse?| Guida per principianti all’uso dei temi di Discourse|
