Водяной знак веб-страницы Discourse

[saquetim (Sérgio Saquetim)]

Этот компонент темы добавляет водяной знак на страницу.

Вы можете добавить любую из следующей информации:

• короткое текстовое сообщение
• имя пользователя, вошедшего в систему
• временную метку рендеринга страницы

Несколько настроек позволяют настроить способ и время отображения водяного знака:

• show_watermark_in_background: Если включено, на странице будет создан и отображён водяной знак.

• scroll_enabled: Если включено, водяной знак будет прокручиваться вместе со страницей.

• only_in_categories: Список категорий, в которых должен отображаться водяной знак.

• except_in_categories: Список категорий, в которых водяной знак не должен отображаться.

• only_in_tags: Список тегов, в которых должен отображаться водяной знак.

• except_in_tags: Список тегов, в которых водяной знак не должен отображаться.

• if_site_title_matches: Отображать водяной знак только если заголовок сайта соответствует этому регулярному выражению. Пример использования см. по ссылке: Discourse Web Page Watermark - #5 by pfaffman.

• or_if_url_matches: ИЛИ отображать водяной знак, если URL соответствует любому из регулярных выражений в списке. Обратите внимание, что тестируемый URL не включает имя хоста.

• tile_width: Ширина (в пикселях) плитки, содержащей информацию о водяном знаке.

• tile_height: Высота (в пикселях) плитки, содержащей информацию о водяном знаке.

• color: Цвет текста водяного знака.

• text_align: Выравнивание текста относительно координат x,y при отрисовке.

• text_rotation: Угол поворота текста относительно координат x,y при отрисовке.

• display_text: Текст, который будет отображён в водяном знаке.

• display_text_font: Шрифт, используемый для отображения текста (парсится как значение CSS font).

• display_text_x: Координата по оси X точки начала отрисовки текста на холсте плитки, в пикселях.

• display_text_y: Координата по оси Y точки начала отрисовки текста на холсте плитки, в пикселях.

• display_username: Если включено, водяной знак будет отображать текущее имя пользователя.

• display_username_font: Шрифт, используемый для отображения имени пользователя (парсится как значение CSS font).

• display_username_x: Координата по оси X точки начала отрисовки имени пользователя на холсте плитки, в пикселях.

• display_username_y: Координата по оси Y точки начала отрисовки имени пользователя на холсте плитки, в пикселях.

• display_timestamp: Если включено, водяной знак будет отображать временную метку рендеринга страницы.

• display_timestamp_format: Формат отображения временной метки. Информация о допустимых форматах доступна по ссылке: Moment.js | Docs.

• display_timestamp_font: Шрифт, используемый для отображения временной метки (парсится как значение CSS font).

• display_timestamp_x: Координата по оси X точки начала отрисовки временной метки на холсте плитки, в пикселях.

• display_timestamp_y: Координата по оси Y точки начала отрисовки временной метки на холсте плитки, в пикселях.

Важные замечания

• Если вы планируете добавить водяной знак на свой форум, вероятно, вы захотите помечать им скриншоты, сделанные с него. Это может быть нужно для того, чтобы их можно было отследить до вас, или чтобы от discourage пользователей делать скриншоты и публиковать их в социальных сетях, например. Однако важно понимать, что добавление водяного знака ухудшает читаемость. Приходится искать баланс между удобством использования (UX) и наличием водяного знака.

• Водяной знак рендерится в div под страницей. В зависимости от вашей темы элементы выше могут перекрывать его, поэтому, если вы решите добавить его на страницу, ваша тема должна быть достаточно прозрачной. Тем не менее, можно разместить его поверх всех элементов, изменив z-index с помощью CSS. Также рекомендуется настроить mix-blend-mode для улучшения видимости.

div#watermark-background {
  z-index: 99999;
  mix-blend-mode: multiply;
}

• Этот компонент поставляется с разумными настройками по умолчанию, которые хорошо работают с большинством светлых тем. Однако добавление водяного знака на тёмные темы может быть сложным, так как это может сильнее повлиять на читаемость. Настоятельно рекомендуется настроить параметры и CSS, чтобы найти оптимальное решение для вашего случая.

• Поскольку водяной знак рендерится в div, любой пользователь, знающий, как использовать инструменты разработчика в браузере, может скрыть его. Это решение подойдёт примерно для 99% нетехнических пользователей, но важно понимать, что оно не является абсолютно надёжным.

Скриншоты

Вид для настольных компьютеров:

Вид для мобильных устройств:

	Предпросмотр	Discourse Watermark - Theme Creator
	Репозиторий	Discourse-Watermark
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Начинающее руководство по использованию тем Discourse

Редактирование:

• 2022-01-12: Добавлены новые настройки для контроля отображения водяного знака.

[Mr.X_Mr.X]

Может ли это быть основано на категориях? У некоторых из нас может быть только определённая категория, требующая водяного знака.

[codinghorror (Jeff Atwood)]

О, я понял, я перепутал это с водяными знаками для изображений. Я отредактирую заголовок, чтобы он был понятнее. Это довольно необычный случай.. Мне не известно ни об одном сайте, который ставил бы водяные знаки на каждую веб-страницу.

[saquetim (Sérgio Saquetim)]

@Mr.X_Mr.X

Может ли это быть основано на категориях? У некоторых из нас может быть только определённая категория, требующая водяного знака.

Отличная идея, я сделаю всё возможное, чтобы реализовать этот функционал в ближайшее время.

@codinghorror

А, я понял, я перепутал это с водяными знаками для изображений. Я отредактирую заголовок, чтобы он был понятнее. Это довольно необычный случай использования… Я не знаю ни одного веб-сайта, который ставит водяные знаки на каждую веб-страницу.

@codinghorror, спасибо за уточнение заголовка.

Я согласен, что это необычный случай использования. На данный момент, я думаю, это полезно в основном для частных форумов в предприятиях с параноидальным отделом безопасности, например, в компаниях финансового сектора.

Это был первый MVP. Я добавлю функциональность на основе обратной связи от сообщества.

Надеюсь, я смогу вскоре добавить фильтр по категориям, который предложил Mr. X, и это сделает его более полезным для более широкой аудитории.

[pfaffman (Jay Pfaffman)]

Я только что отправил PR: skip display if title matches by pfaffman · Pull Request #1 · megothss/discourse-watermark · GitHub

Это добавляет настройку темы include_if_title_matches, которая по умолчанию пуста. Если настройка пуста, ничего не меняется.

Если настройка имеет значение, SiteSetting.title должен совпадать, чтобы водяной знак отображался.

Сценарий использования: отображение водяного знака на тестовом сайте, но не на производственном, без необходимости внесения изменений в базу данных. Установив include_if_title_matches в значение “staging” и добавив “staging” в SiteSetting.title тестового сайта (заданное через переменную окружения, чтобы оно сохранялось при восстановлении производственной базы данных), водяной знак будет отображаться на тестовом сайте, но не на производственном.

С этим изменением я установлю это на каждый сайт, у которого есть тестовая среда.

[saquetim (Sérgio Saquetim)]

@pfaffman

Я только что отправил PR: skip display if title matches by pfaffman · Pull Request #1 · megothss/discourse-watermark · GitHub

Я объединил его сегодня. Немного доработал. Название настройки было изменено на if_site_title_matches.

Не могли бы вы проверить, работает ли последний коммит в ваших старых экземплярах?

@Mr.X_Mr.X

Может ли это быть основано на категориях? У некоторых из нас может быть только определённая категория, требующая водяного знака.

@codinghorror

Довольно необычный случай использования… Я не знаю ни одного веб-сайта, который бы размещал водяной знак на каждой веб-странице.

Я только что выпустил новую версию, которая позволяет отображать водяной знак в определённых категориях, по тегам или URL-адресам.

С новыми опциями, я думаю, это покроет гораздо больше случаев использования.

[pfaffman (Jay Pfaffman)]

@saquetim

Не могли бы вы проверить, работает ли последний коммит в ваших старых экземплярах?

Могу подтвердить, что он работает как на моём продакшн-, так и на стейджинг-сайте; ранее на первом использовалось Discourse.siteSettings.xxx, когда я над этим работал (я вот-вот собираюсь сделать обновление, которое, как я думаю, может это изменить).

Очень приятно видеть водяной знак на моём стейджинг-сайте. Спасибо за тему!

[baylands]

Возможно ли добавить опцию для создания (функционально) невидимого водяного знака? Например, одного или двух цветов, слегка отличающихся от фона, и расположенных под всеми остальными элементами? Тогда мы сможем просматривать любые скриншоты, искать эти цветовые значения и определять текст с именем пользователя.

Цель — не отговорить от создания скриншотов, а выяснить, какой пользователь делает скриншоты и распространяет посты с частного форума.

Или, поскольку наш форум поддерживает автоматическое переключение между светлой и тёмной темой, возможно ли запустить две копии темы, чтобы жёстко задать цветовые значения? Или, возможно, сделать цвет водяного знака настройкой для каждой темы?

Спасибо за это. Это может стать идеальным решением для нас.

[pfaffman (Jay Pfaffman)]

@baylands

Смысл не в том, чтобы отговаривать от создания скриншотов, а в том, чтобы выяснить, какой именно пользователь делает скриншоты и распространяет посты с закрытого форума.

Возможно, если вы сможете их отговорить, они перестанут это делать, и тогда уже не будет иметь значения, кто именно это был?

Я думаю, что реализовать изменение цвета в зависимости от текущей темы будет сложно. Если ваша цель — поймать кого-то с помощью секретного водяного знака, то лучший вариант — отключить другую тему.

[saquetim (Sérgio Saquetim)]

@baylands,

@baylands

Возможно ли добавить опцию для создания (функционально) невидимого водяного знака? Например, одного или двух цветовых оттенков, отличающихся от фона, и расположенного под всеми остальными элементами? Тогда мы сможем просмотреть любой скриншот, найти эти цветовые значения и обнаружить текст с именем пользователя.

Цель использования — не от discourage скриншоты, а выяснить, какой пользователь делает скриншоты и распространяет сообщения с частного форума.

Теоретически это возможно. Однако я бы тщательно протестировал это перед использованием в рабочей среде. Поскольку в вашем случае контраст между водяным знаком и цветом фона будет практически отсутствовать, существует довольно высокая вероятность, что эта информация может быть потеряна при сжатии в зависимости от формата и настроек, применяемых при загрузке.

Основной сценарий использования этого компонента — от discourage скриншоты, но вы можете попробовать свой подход и посмотреть, сработает ли он. Это сценарий, о котором я раньше не задумывался.

@baylands

Или, поскольку наш форум использует автоматическое переключение светлой/темной темы, возможно ли запустить две копии темы, чтобы жестко задать цветовые значения? Или, возможно, сделать цвет водяного знака настройкой для каждой темы?

@pfaffman

Я думаю, что изменение цвета в зависимости от текущей темы будет сложным. Если ваша цель — попытаться вычислить кого-то с помощью секретного водяного знака, то лучший вариант — отключить другую тему.

Возможно использовать этот компонент одновременно со светлой и темной темами. Это сценарий, о котором я думал при его разработке. Вам даже не нужно запускать несколько копий одного и того же компонента.

Настройка color поддерживает использование CSS-переменной. Например, значение по умолчанию для этой настройки — var(--primary-low).

Таким образом, если во всех темах, которые вы хотите защитить водяным знаком, используется CSS-переменная, установленная с правильными цветами, всё будет работать!

Если попробуете, пожалуйста, сообщите, сработало ли это так, как вы ожидали.

[baylands]

Спасибо, это проясняет многое!

Я столкнулся с проблемой при попытке использовать переменный маршрут.

Наша единственная тема — светлая, которая использует светлую и тёмную цветовые палитры для автоматического тёмного режима.

Я могу добавить переменную “–secondary-watermark” в CSS светлой темы, но она не меняется при использовании тёмной цветовой палитры в светлой теме.

Я не могу понять, как добавить переменную в цветовую палитру, а не в тему. В результате переопределение светлой темы работает только со светлой цветовой палитрой, и когда палитра автоматически переключается на тёмную, водяной знак мгновенно становится видимым.

Это странная особенность, над которой мне пришлось долго думать. С ходу не подскажете, можно ли выполнять вычисления с переменными? Например, определить --secondary-watermark как --secondary минус 10? Или что-то подобное? Если да, то, думаю, это решит проблему.

Наш случай использования, признаюсь, довольно нишевый. Я сомневаюсь, что видимый водяной знак отпугнёт людей, которые всё равно постараются обойти его. Мы — закрытая группа по членству, и нам важно иметь возможность исключать тех, кто распространяет скриншоты. Для нас это важнее.

Спасибо ещё раз!

[baylands]

Я использовал функцию is-light-color-scheme. Работает именно так, как и ожидалось. Спасибо!

[adambirds]

Это на самом деле отлично для нас: нас постоянно беспокоили люди, которые проникали в нашу группу, чтобы публиковать посты из частного форума в социальных сетях и портить нам репутацию. Наличие этой функции позволит нам предотвратить это или легко блокировать нарушителей. Спасибо @saquetim за разработку этого инструмента.

[pfaffman (Jay Pfaffman)]

У вас есть устаревания.

deprecate-shim.js:33 УСТАРЕВАНИЕ: [THEME 15 'discourse-watermark'] Использование глобального объекта Ember устарело. Вместо этого следует импортировать модуль Ember или конкретный API. [id устаревания: ember-global] Подробнее см. по адресу https://deprecations.emberjs.com/v3.x/#toc_ember-global.

УСТАРЕВАНИЕ: [THEME 15 'discourse-watermark'] Использование `run.schedule` устарело. Вместо этого импортируйте значение напрямую из @ember/runloop:

  import { schedule } from '@ember/runloop'; [id устаревания: deprecated-run-loop-and-computed-dot-access]

Я бы попытался помочь, но у меня самого сейчас .

[saquetim (Sérgio Saquetim)]

Это личное.

Мне также нужно рефакторить его, чтобы отказаться от виджетов.
В этом больше нет необходимости.

Постараюсь исправить, как только появится свободное время.

[Ventrilo (Jason)]

На моей теме это работает не очень хорошо. Было бы здорово иметь больше возможностей для настройки, например, возможность решать, какую часть страницы занимает водяной знак (чтобы он занимал только контент поста/фон страницы, а не, например, заголовок при просмотре разделов).

Что касается моей темы: независимо от того, какой селектор CSS для цвета я использую и насколько ярким является цвет, текст/SVG всегда отображается тёмным/чёрным.

[Ventrilo (Jason)]

Планируется ли какое-то обновление для этого? @saquetim

[yoke_snowwolf (snaper)]

Хороший компонент, но он не поддерживает Ember 5?
Получаю ошибку: ReferenceError: Ember is not defined,
моя версия Ember — v5.5.0.
@saquetim

[saquetim (Sérgio Saquetim)]

Я постараюсь вскоре найти время, чтобы поработать над совместимой версией.

[pfaffman (Jay Pfaffman)]

Привет @saquetim. У тебя была возможность посмотреть на это? Похоже, что всё ещё не работает: