Este componente de tema adiciona uma marca d’água à página.
É possível adicionar qualquer uma das seguintes informações:
uma curta mensagem de texto
o nome de usuário atualmente logado
o timestamp em que a página foi renderizada
Várias configurações permitem personalizar como e quando a marca d’água será renderizada:
show_watermark_in_background: Se ativado, gerará e exibirá uma marca d’água na página.
scroll_enabled: Se ativado, a marca d’água será rolada com a página.
only_in_categories: Lista de categorias nas quais a marca d’água deve ser exibida.
except_in_categories: Lista de categorias nas quais a marca d’água não deve ser exibida.
only_in_tags: Lista de tags nas quais a marca d’água deve ser exibida.
except_in_tags: Lista de tags nas quais a marca d’água não deve ser exibida.
if_site_title_matches: Exibe a marca d’água somente se o título do site corresponder a esta expressão regular. Veja Discourse Web Page Watermark - #5 by pfaffman para um caso de uso.
or_if_url_matches: OU exibe a marca d’água se a URL corresponder a qualquer uma das expressões regulares na lista. Observe que a URL testada não inclui o nome do host.
tile_width: A largura (em px) do bloco que contém as informações da marca d’água.
tile_height: A altura (em px) do bloco que contém as informações da marca d’água.
color: A cor do texto da marca d’água.
text_align: Como o texto deve ser alinhado em relação às coordenadas x,y ao ser desenhado.
text_rotation: O ângulo em que o texto deve ser rotacionado em relação às coordenadas x,y ao ser desenhado.
display_text: Texto a ser renderizado na marca d’água.
display_text_font: A fonte usada para renderizar o texto (interpretada como valor de fonte CSS).
display_text_x: A coordenada do eixo x do ponto em que se deve começar a desenhar o texto na tela do bloco, em pixels.
display_text_y: A coordenada do eixo y do ponto em que se deve começar a desenhar o texto na tela do bloco, em pixels.
display_username: Se ativado, a marca d’água renderizará o nome de usuário atual.
display_username_font: A fonte usada para renderizar o nome de usuário (interpretada como valor de fonte CSS).
display_username_x: A coordenada do eixo x do ponto em que se deve começar a desenhar o nome de usuário na tela do bloco, em pixels.
display_username_y: A coordenada do eixo y do ponto em que se deve começar a desenhar o nome de usuário na tela do bloco, em pixels.
display_timestamp: Se ativado, a marca d’água renderizará o timestamp em que a página foi renderizada.
display_timestamp_format: Como o timestamp será formatado. Para informações sobre os formatos válidos, consulte Moment.js | Docs.
display_timestamp_font: A fonte usada para renderizar o timestamp (interpretada como valor de fonte CSS).
display_timestamp_x: A coordenada do eixo x do ponto em que se deve começar a desenhar o timestamp na tela do bloco, em pixels.
display_timestamp_y: A coordenada do eixo y do ponto em que se deve começar a desenhar o timestamp na tela do bloco, em pixels.
Observações
Se você pretende adicionar uma marca d’água à sua instância do fórum, provavelmente desejará marcar as capturas de tela tiradas dela. Seja para que possam ser rastreadas até você ou para desencorajar seus usuários a tirar capturas de tela e postar em mídias sociais, por exemplo. Mas é importante estar ciente de que adicionar a marca d’água prejudicará a legibilidade. Há um compromisso a ser feito entre UX e tê-la.
A marca d’água é renderizada em um div abaixo da página. Dependendo do seu tema, os componentes acima podem cobri-la, então se você optar por adicioná-la à sua página, seu tema deve ter muita transparência. É possível, no entanto, colocá-la sobre todos os componentes alterando z-index com CSS. Você também deve ajustar mix-blend-mode para melhorar a visibilidade.
Este componente vem com padrões sensatos que devem funcionar bem com a maioria dos temas claros. Adicionar uma marca d’água a temas escuros é complicado, pois provavelmente terá mais impacto na legibilidade. Encorajo fortemente você a ajustar as configurações e o CSS para encontrar o que funciona melhor em seu caso.
Como a marca d’água é renderizada em um div, qualquer usuário que saiba usar as Ferramentas do Desenvolvedor no navegador pode escondê-la. Ela fará o trabalho pretendido para provavelmente 99% dos usuários não técnicos, mas é importante estar ciente de que não é uma solução infalível.
Ah, entendi, confundi isso com marcas d’água para imagens. Vou editar o título para que fique mais claro. Um caso de uso meio incomum… Não conheço nenhum site que coloque marca d’água em todas as páginas da web.
Concordo que é um caso de uso incomum. Do jeito que está agora, acho que é útil principalmente para fóruns privados em empresas com um departamento de segurança paranoico, como empresas do setor financeiro.
Foi um primeiro MVP. Adicionarei funcionalidades com base no feedback recebido da comunidade.
Espero poder adicionar em breve o filtro baseado em categoria que o Sr. X sugeriu e que o tornará mais útil para um público mais amplo.
Isso adiciona uma configuração de tema include_if_title_matches, que está vazia por padrão. Se a configuração estiver vazia, nada será alterado.
Se a configuração tiver um valor, SiteSetting.title deve corresponder para que a marca d’água seja exibida.
O caso de uso é ter a marca d’água exibida em um site de staging, mas não em produção, sem exigir alterações no banco de dados. Definindo include_if_title_matches como “staging” e tendo “staging” em SiteSetting.title do site de staging (definido em uma variável de ambiente para que persista quando o banco de dados de produção for restaurado nele), a marca d’água é exibida no site de staging, mas não na produção.
Com esta mudança, instalarei isso em todos os sites que tiverem um site de staging.
Posso confirmar que funciona em meus sites de produção e de homologação; o primeiro estava funcionando com Discourse.siteSettings.xxx quando eu estava trabalhando nisso (estou prestes a fazer uma atualização que acho que pode mudar isso).
É uma grande ajuda ver meu site de homologação com a marca d’água nele. Obrigado pelo tema!
É possível adicionar uma opção para criar uma marca d’água (funcionalmente) invisível? Por exemplo, um ou dois valores de cor diferentes do fundo e abaixo de todo o resto? Poderíamos então olhar para qualquer captura de tela e procurar por esses valores de cor para descobrir o texto do nome de usuário.
O caso de uso não é dissuadir capturas de tela, mas descobrir qual usuário está tirando capturas de tela e distribuindo postagens de um fórum privado.
Alternativamente, como nosso fórum usa alternância automática de claro/escuro, é possível executar duas cópias do tema para codificar os valores de cor? Ou talvez tornar a cor da marca d’água uma configuração por tema?
Obrigado por isso. Pode ser uma solução perfeita para nós.
Talvez se você puder dissuadi-los, eles pararão e não importará quem foi?
Acho que fazer com que ele mude de cor dependendo do tema atual será difícil. Se o que você quer é tentar pegar alguém tendo uma marca d’água secreta, então sua melhor aposta seria desativar o outro tema.
[quote=“baylands, post:8, topic:214108”]
É possível adicionar uma opção para criar uma marca d’água (funcionalmente) invisível? Diga, um ou dois valores de cor diferentes do fundo, e abaixo de todo o resto? Poderíamos então olhar para qualquer captura de tela e procurar por esses valores de cor para descobrir o texto do nome de usuário.
O caso de uso não é dissuadir capturas de tela, mas descobrir qual usuário está capturando a tela e distribuindo postagens de um fórum privado.
[/quote]Teoricamente, é possível. Mas eu testaria cuidadosamente antes de usá-lo em produção. Como no seu caso de uso quase não haverá contraste entre a marca d’água e a cor de fundo, há uma chance muito boa de que essa informação possa ser perdida na compressão, dependendo do formato e das configurações aplicadas ao fazer o upload.
O principal caso de uso para este componente é dissuadir as capturas de tela, mas você pode tentar sua abordagem e ver se funciona. Esse seria um caso de uso que eu nunca tinha pensado antes.
É possível usar este componente com temas claro e escuro simultaneamente. É um caso de uso que pensei ao desenvolvê-lo. Você nem precisa executar várias cópias do mesmo componente.
A configuração color suporta o uso de uma variável CSS. Por exemplo, o valor padrão para esta configuração é var(--primary-low).
Portanto, desde que uma variável CSS definida com as cores apropriadas seja usada em todos os temas que você deseja que sejam marcados com água, você estará pronto!
Se você tentar, por favor, me diga se funciona como você esperava.
Encontrei um problema ao tentar a rota da variável.
Nosso único tema é o tema claro, que usa as paletas de cores clara e escura para seu modo escuro automático.
Posso adicionar uma variável “–secondary-watermark” ao CSS do tema claro, mas ela não muda ao usar a paleta de cores escura no tema claro.
Não consigo descobrir como adicionar a variável à paleta de cores em vez do tema, então, como resultado, a substituição do tema claro só funciona com a paleta de cores clara, e quando a paleta de cores muda automaticamente para escura, a marca d’água se torna instantaneamente visível.
É uma peculiaridade estranha que tive que pensar por um tempo. De imediato, você sabe se é possível realizar cálculos com uma variável? Tal que eu possa definir --secondary-watermark como --secondary menos 10? Ou algo assim? Se sim, acho que isso resolveria.
Nosso caso de uso é, admitidamente, um pouco específico. Duvido que uma marca d’água visível dissuadiria, pois as pessoas tentariam descobrir como contorná-la. Somos um grupo de membros fechados e precisamos ser capazes de expulsar as pessoas que espalham capturas de tela. Isso é mais importante para nós.
Isso é ótimo para nós, continuávamos recebendo posts do fórum privado publicados nas redes sociais por pessoas infiltradas em nosso grupo para tentar nos prejudicar, então ter isso impediria ou permitiria facilmente bloquear os usuários infratores. Obrigado @saquetim por desenvolver isso.
deprecate-shim.js:33 DEPRECATION: [THEME 15 'discourse-watermark'] O uso do Ember Global está obsoleto. Você deve importar o módulo Ember ou a API específica em vez disso. [deprecation id: ember-global] Veja https://deprecations.emberjs.com/v3.x/#toc_ember-global para mais detalhes.
DEPRECATION: [THEME 15 'discourse-watermark'] O uso de `run.schedule` foi preterido. Em vez disso, importe o valor diretamente de @ember/runloop:
import { schedule } from '@ember/runloop'; [deprecation id: deprecated-run-loop-and-computed-dot-access]
Eu tentaria ajudar, mas estou apagando meu próprio
Não funciona muito bem no tema que estou usando, mais opções personalizáveis seriam ótimas, como poder decidir quanto da página a marca d’água ocupa (para que ocupe apenas o conteúdo da postagem/fundo da página, não, por exemplo, o cabeçalho ao navegar pelas seções).
Em relação ao meu tema, não importa qual seletor de cor CSS eu use e não importa o quão brilhante seja a cor, o texto/SVG aparece escuro/preto.
|Prévia| Discourse Watermark - Theme Creator|
|Repositório| Discourse-Watermark |
|Guia de Instalação|Como instalar um tema ou componente de tema|
|Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse|
