Ce composant de thème ajoute un filigrane à la page.
Il est possible d’ajouter l’une des informations suivantes :
un court message texte
le nom d’utilisateur actuellement connecté
l’horodatage du rendu de la page
Plusieurs paramètres permettent de personnaliser comment et quand le filigrane sera rendu :
show_watermark_in_background: S’il est activé, il générera et affichera un filigrane sur la page.
scroll_enabled: S’il est activé, le filigrane défilera avec la page.
only_in_categories: Liste des catégories dans lesquelles le filigrane doit être affiché.
except_in_categories: Liste des catégories dans lesquelles le filigrane ne doit pas être affiché.
only_in_tags: Liste des tags dans lesquels le filigrane doit être affiché.
except_in_tags: Liste des tags dans lesquels le filigrane ne doit pas être affiché.
if_site_title_matches: Affiche le filigrane uniquement si le titre du site correspond à cette expression régulière. Voir Discourse Web Page Watermark - #5 by pfaffman pour un cas d’utilisation.
or_if_url_matches: OU affiche le filigrane si l’URL correspond à l’une des expressions régulières de la liste. Notez que l’URL testée n’inclut pas le nom de l’hôte.
tile_width: La largeur (en px) de la tuile contenant les informations du filigrane.
tile_height: La hauteur (en px) de la tuile contenant les informations du filigrane.
color: La couleur du texte du filigrane.
text_align: Comment le texte doit être aligné par rapport aux coordonnées x,y lors du dessin.
text_rotation: L’angle selon lequel le texte doit être tourné par rapport aux coordonnées x,y lors du dessin.
display_text: Texte à rendre dans le filigrane.
display_text_font: La police utilisée pour rendre le texte (analysée comme une valeur de police CSS).
display_text_x: La coordonnée de l’axe x du point où commencer à dessiner le texte dans la zone de dessin de la tuile, en pixels.
display_text_y: La coordonnée de l’axe y du point où commencer à dessiner le texte dans la zone de dessin de la tuile, en pixels.
display_username: S’il est activé, le filigrane affichera le nom d’utilisateur actuel.
display_username_font: La police utilisée pour rendre le nom d’utilisateur (analysée comme une valeur de police CSS).
display_username_x: La coordonnée de l’axe x du point où commencer à dessiner le nom d’utilisateur dans la zone de dessin de la tuile, en pixels.
display_username_y: La coordonnée de l’axe y du point où commencer à dessiner le nom d’utilisateur dans la zone de dessin de la tuile, en pixels.
display_timestamp: S’il est activé, le filigrane affichera l’horodatage du rendu de la page.
display_timestamp_format: Comment l’horodatage sera formaté. Pour plus d’informations sur les formats valides, veuillez vous référer à Moment.js | Docs.
display_timestamp_font: La police utilisée pour rendre l’horodatage (analysée comme une valeur de police CSS).
display_timestamp_x: La coordonnée de l’axe x du point où commencer à dessiner l’horodatage dans la zone de dessin de la tuile, en pixels.
display_timestamp_y: La coordonnée de l’axe y du point où commencer à dessiner l’horodatage dans la zone de dessin de la tuile, en pixels.
Remarques
Si vous avez l’intention d’ajouter un filigrane à votre instance de forum, vous voudrez probablement marquer les captures d’écran qui en sont prises. Que ce soit pour qu’elles puissent être retracées jusqu’à vous ou pour décourager vos utilisateurs de prendre des captures d’écran et de les publier sur les réseaux sociaux, par exemple. Mais il est important de savoir que l’ajout du filigrane nuira à la lisibilité. Il y a un compromis à faire entre l’expérience utilisateur et sa présence.
Le filigrane est rendu dans un div sous la page. Selon votre thème, les composants ci-dessus peuvent le masquer, donc si vous choisissez de l’ajouter à votre page, votre thème doit avoir beaucoup de transparence. Il est cependant possible de le placer par-dessus tous les composants en changeant z-index avec CSS. Vous devriez également ajuster mix-blend-mode pour améliorer la visibilité.
Ce composant est livré avec des valeurs par défaut raisonnables qui devraient bien fonctionner avec la plupart des thèmes clairs. L’ajout d’un filigrane aux thèmes sombres est cependant délicat car il aura probablement plus d’impact sur la lisibilité. Je vous encourage vivement à ajuster les paramètres et le CSS pour trouver ce qui fonctionne le mieux dans votre cas.
Étant donné que le filigrane est rendu dans un div, tout utilisateur qui sait utiliser les outils de développement du navigateur peut le masquer. Il fera le travail prévu pour probablement 99% des utilisateurs non techniques, mais il est important de savoir que ce n’est pas une solution infaillible.
Est-ce que cela peut être basé sur des catégories ? Certains d’entre nous pourraient avoir uniquement une certaine catégorie qui nécessite un filigrane.
Ah, je vois, j’ai confondu cela avec les filigranes pour les images. Je vais modifier le titre pour qu’il soit plus clair. C’est une utilisation plutôt inhabituelle… Je ne connais aucun site web qui applique un filigrane à chaque page web.
Je suis d’accord que c’est un cas d’utilisation inhabituel. Tel qu’il est actuellement, je pense qu’il est surtout utile pour les forums privés dans les entreprises ayant un département de sécurité paranoïaque, comme les entreprises du secteur financier.
C’était un premier MVP. J’ajouterai des fonctionnalités basées sur les retours reçus de la communauté.
J’espère pouvoir bientôt ajouter le filtre basé sur la catégorie suggéré par M. X, ce qui le rendra plus utile à un public plus large.
Cela ajoute un paramètre de thème include_if_title_matches, qui est vide par défaut. Si le paramètre est vide, rien ne change.
Si le paramètre a une valeur, SiteSetting.title doit correspondre pour que le filigrane s’affiche.
Le cas d’utilisation est d’avoir le filigrane affiché sur un site de staging, mais pas en production, sans nécessiter de modifications de la base de données. En définissant include_if_title_matches sur « staging » et en ayant « staging » dans SiteSetting.title du site de staging (défini dans une variable d’environnement afin qu’il persiste lorsque la base de données de production y est restaurée), le filigrane s’affiche sur le site de staging mais pas sur la production.
Avec ce changement, je l’installerai sur chaque site qui a un site de staging.
Je peux confirmer que cela fonctionne sur mes sites de production et de staging ; le premier fonctionnait avec Discourse.siteSettings.xxx lorsque je travaillais sur cela (je suis sur le point de faire une mise à niveau qui, je pense, pourrait changer cela).
C’est d’une grande aide de voir mon site de staging avec le filigrane dessus. Merci pour le thème !
Est-il possible d’ajouter une option pour créer un filigrane (fonctionnellement) invisible ? Par exemple, à une ou deux valeurs de couleur près de l’arrière-plan, et sous tout le reste ? Nous pourrions alors examiner n’importe quelle capture d’écran et rechercher ces valeurs de couleur pour découvrir le texte du nom d’utilisateur.
Le cas d’utilisation n’est pas de dissuader les captures d’écran, mais de découvrir quel utilisateur effectue des captures d’écran et distribue des publications d’un forum privé.
Alternativement, étant donné que notre forum utilise la commutation automatique clair/sombre, est-il possible d’exécuter deux copies du thème afin de coder en dur les valeurs de couleur ? Ou peut-être faire de la couleur du filigrane un paramètre par thème ?
Merci pour cela. Cela pourrait être une solution parfaite pour nous.
Peut-être que si vous pouvez les dissuader, ils arrêteront et cela n’aura pas d’importance de qui il s’agissait ?
Je pense qu’il sera difficile de faire en sorte qu’il change de couleur en fonction du thème actuel. Si ce que vous voulez est d’essayer d’attraper quelqu’un en ayant un filigrane secret, alors votre meilleure option serait de désactiver l’autre thème.
[quote=“baylands, post:8, topic:214108”]
Est-il possible d’ajouter une option pour créer un filigrane (fonctionnellement) invisible ? Disons, un ou deux valeurs de couleur différentes de l’arrière-plan, et sous tout le reste ? Nous pourrions alors regarder n’importe quelle capture d’écran et rechercher ces valeurs de couleur pour découvrir le texte du nom d’utilisateur.
Le cas d’utilisation n’est pas de dissuader les captures d’écran, mais de découvrir quel utilisateur capture et distribue des messages d’un forum privé.
[/quote]Théoriquement, c’est possible. Mais je le testerais soigneusement avant de l’utiliser en production. Comme dans votre cas d’utilisation, il y aura très peu de contraste entre le filigrane et la couleur de fond, il y a une très bonne chance que ces informations puissent être perdues lors de la compression, en fonction du format et des paramètres appliqués lors du téléchargement.
Le cas d’utilisation principal de ce composant est de dissuader les captures d’écran, mais vous pouvez essayer votre approche et voir si elle fonctionne. Ce serait un cas d’utilisation auquel je n’avais jamais pensé auparavant.
Il est possible d’utiliser ce composant avec les thèmes clairs et sombres simultanément. C’est un cas d’utilisation auquel j’ai pensé lors de son développement. Vous n’avez même pas besoin d’exécuter plusieurs copies du même composant.
Le paramètre color prend en charge l’utilisation d’une variable CSS. Par exemple, la valeur par défaut de ce paramètre est var(--primary-low).
Donc, tant qu’une variable CSS définie avec les bonnes couleurs est utilisée dans tous les thèmes que vous souhaitez filigraner. Vous devriez être prêt à partir !
Si vous essayez, faites-moi savoir si cela fonctionne comme vous l’attendiez.
J’ai rencontré un problème en essayant la route des variables.
Notre seul thème est le thème clair, qui utilise les palettes de couleurs claires et sombres pour son mode sombre automatique.
Je peux ajouter une variable « --secondary-watermark » au CSS du thème clair, mais elle ne change pas lorsque j’utilise la palette de couleurs sombre sur le thème clair.
Je n’arrive pas à trouver comment ajouter la variable à la palette de couleurs plutôt qu’au thème, de sorte que la substitution du thème clair ne fonctionne qu’avec la palette de couleurs claire, et lorsque la palette de couleurs passe automatiquement au sombre, le filigrane devient instantanément visible.
C’est une bizarrerie à laquelle j’ai dû réfléchir un moment. À première vue, savez-vous si l’on peut effectuer des calculs avec une variable ? Comme si je pouvais définir --secondary-watermark comme --secondary moins 10 ? Ou quelque chose comme ça ? Si oui, je pense que cela résoudrait le problème.
Notre cas d’utilisation est certes un peu particulier. Je doute qu’un filigrane visible dissuade, car les gens essaieraient de trouver un moyen de le contourner. Nous sommes un groupe à adhésion fermée et devons pouvoir exclure ceux qui diffusent des captures d’écran. C’est plus important pour nous.
C’est en fait génial pour nous, nous recevions des publications de forum privées publiées sur les réseaux sociaux par des personnes qui infiltraient notre groupe pour essayer de nous faire paraître mal, donc avoir cela empêcherait cela ou nous permettrait facilement de bloquer les utilisateurs fautifs. Merci @saquetim de l’avoir développé.
deprecate-shim.js:33 DÉPRÉCIATION : [THEME 15 'discourse-watermark'] L'utilisation de l'Ember Global est dépréciée. Vous devriez importer le module Ember ou l'API spécifique à la place. [id de dépréciation : ember-global] Voir https://deprecations.emberjs.com/v3.x/#toc_ember-global pour plus de détails.
DÉPRÉCIATION : [THEME 15 'discourse-watermark'] L'utilisation de `run.schedule` a été dépréciée. Importez plutôt la valeur directement depuis @ember/runloop :
import { schedule } from '@ember/runloop'; [id de dépréciation : deprecated-run-loop-and-computed-dot-access]
Il ne fonctionne pas très bien sur le thème que j’utilise, plus d’options personnalisables seraient les bienvenues, comme la possibilité de décider quelle partie de la page la marque d’eau occupe (afin qu’elle n’occupe que le contenu du message/l’arrière-plan de la page, pas par exemple l’en-tête lors de la navigation dans les sections).
Concernant mon thème, peu importe le sélecteur de couleur CSS que j’utilise et peu importe la luminosité de la couleur, le texte/SVG apparaît sombre/noir.
Bon composant, mais il ne prend pas en charge Ember 5 ?
J’obtiens l’erreur : ReferenceError: Ember is not defined,
Ma version d’Ember d’instance est v5.5.0. @saquetim
