saquetim
(Sérgio Saquetim)
1
此主题组件将水印添加到页面。
可以添加以下任何信息：
- 一条简短的文本消息
- 当前登录的用户名
- 页面渲染的时间戳
几个设置允许自定义水印的渲染方式和时间：
-
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 字体值）。
-
display_text_x: 在图块画布中开始绘制文本的 x 轴坐标（以像素为单位）。
-
display_text_y: 在图块画布中开始绘制文本的 y 轴坐标（以像素为单位）。
-
display_username: 如果启用，水印将渲染当前用户名。
-
display_username_font: 用于渲染用户名的字体（解析为 CSS 字体值）。
-
display_username_x: 在图块画布中开始绘制用户名的 x 轴坐标（以像素为单位）。
-
display_username_y: 在图块画布中开始绘制用户名的 y 轴坐标（以像素为单位）。
-
display_timestamp: 如果启用，水印将渲染页面渲染的时间戳。
-
display_timestamp_format: 时间戳的格式。有关有效格式的信息，请参阅 Moment.js | Docs 。
-
display_timestamp_font: 用于渲染时间戳的字体（解析为 CSS 字体值）。
-
display_timestamp_x: 在图块画布中开始绘制时间戳的 x 轴坐标（以像素为单位）。
-
display_timestamp_y: 在图块画布中开始绘制时间戳的 y 轴坐标（以像素为单位）。
注意事项
-
如果您打算在论坛实例中添加水印，您可能希望标记从中截取的屏幕截图。无论是为了追溯到您，还是为了阻止您的用户截取屏幕截图并发布到社交媒体等。
但重要的是要注意，添加水印会损害可读性。在用户体验和拥有水印之间需要做出权衡。
-
水印在页面下方的 div 中渲染。根据您的主题，上面的组件可能会覆盖它，因此如果您选择将其添加到页面，您的主题必须具有很高的透明度。不过，可以通过更改 CSS 中的 z-index 将其放置在所有组件之上。您还应该调整 mix-blend-mode 以提高可见性。
div#watermark-background {
z-index: 99999;
mix-blend-mode: multiply;
}
屏幕截图
桌面视图：
移动视图：
|||
|-|-|-|
| : eyeglasses:|预览| Discourse Watermark - Theme Creator|
| : hammer_and_wrench:|存储库| Discourse-Watermark |
| : question:|安装指南|如何安装主题或主题组件|
| : open_book:|刚开始使用 Discourse 主题？| Discourse 主题使用入门指南|
编辑：
- 2022-01-12：添加了控制水印显示时间的新设置。
11 个赞
可以按类别进行吗？我们中的一些人可能只需要为特定类别添加水印。
4 个赞
哦，我明白了，我把这个和图片的水印搞混了。我会编辑标题，使其更清晰。这是一种不寻常的用法……我不知道有任何网站会对每个网页添加水印。
4 个赞
saquetim
(Sérgio Saquetim)
4
好主意，我会尽力尽快开发此功能。
@codinghorror，感谢您澄清标题。
我同意这是一种不寻常的用法。目前我认为它主要对企业内部论坛有用，特别是那些拥有偏执安全部门的公司，例如金融行业的公司。
这是第一个最小可行产品（MVP）。我将根据社区收到的反馈添加功能。
希望我能尽快添加Mr. X建议的基于分类的过滤器，这将使其对更广泛的受众更有用。
1 个赞
pfaffman
(Jay Pfaffman)
5
我刚刚提交了一个 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”，并在暂存站点的 SiteSetting.title 中包含“staging”（在 ENV 变量中设置，以便在生产数据库恢复到它时持久化），水印就会显示在暂存站点上，而不会显示在生产站点上。
有了这个更改，我将在每个有暂存站点的站点上安装它。
1 个赞
saquetim
(Sérgio Saquetim)
6
我今天已经合并了它。稍微调整了一下。设置名称已重命名为 if_site_title_matches。
你能尝试检查一下最新的提交是否能在你的旧实例中正常工作吗？
我刚刚发布了一个新版本，允许在特定分类、标签或 URL 中显示水印。
有了新选项，我认为它将涵盖更多用例。
5 个赞
pfaffman
(Jay Pfaffman)
7
我可以确认它在我的生产和暂存站点上都有效；在我进行此操作时，前者使用 Discourse.siteSettings.xxx 工作（我即将进行一次升级，我认为这可能会改变这一点）。
看到我的暂存站点上有水印对我来说帮助很大。感谢这个主题！
4 个赞
是否可以添加一个选项来创建（功能上）不可见的水印？例如，与背景色相差一两个颜色值，并且位于所有其他内容之下？然后，我们可以查看任何屏幕截图，并查找这些颜色值来发现用户名文本。
用例不是为了阻止截图，而是为了找出哪个用户正在截图并分发私人论坛的帖子。
或者，由于我们的论坛使用自动浅色/深色切换，是否可以运行主题的两个副本以硬编码颜色值？或者也许将水印颜色设置为每个主题的设置？
感谢您的帮助。这可能是一个完美的解决方案。
1 个赞
pfaffman
(Jay Pfaffman)
9
也许如果你能阻止他们，他们就会停止，那谁做的就不重要了？
我认为根据当前主题更改颜色会很困难。如果你想通过秘密水印来抓住某人，那么你最好的办法就是禁用其他主题。
1 个赞
saquetim
(Sérgio Saquetim)
10
@baylands,
[quote=“baylands, post:8, topic:214108”]
是否可以添加一个选项来创建（功能上）不可见的水印？例如，与背景色相差一两个颜色值，并且置于所有其他内容之下？然后，我们可以查看任何截图，查找这些颜色值以发现用户名文本。
用例不是阻止截图，而是找出哪个用户正在截图并在私有论坛上分发帖子。
[/quote]理论上是可行的。但在生产环境中使用之前，我会仔细测试。由于在你的用例中，水印和背景色之间的对比度几乎没有，因此信息很有可能在压缩过程中丢失，具体取决于格式和上传时应用的设置。
该组件的主要用例是阻止截图，但你可以尝试你的方法，看看是否有效。这是一种我以前从未想过的用例。
可以同时使用此组件处理浅色和深色主题。这是我在开发它时考虑到的一个用例。你甚至不需要运行同一组件的多个副本。
color 设置确实支持使用 CSS 变量。例如，此设置的默认值为 var(--primary-low)。
因此，只要在你想添加水印的所有主题中都使用设置了正确颜色的 CSS 变量。你就可以顺利进行！
如果你尝试了，请告诉我是否按预期工作。
2 个赞
谢谢，这让我明白了许多！
我在尝试变量路由时遇到了一个问题。
我们唯一的主题是浅色主题，它使用浅色和深色调色板来实现自动暗模式。
我可以在浅色主题 CSS 中添加一个变量“–secondary-watermark”，但在浅色主题中使用深色调色板时，它不会改变。
我无法弄清楚如何将变量添加到调色板而不是主题，因此，浅色主题的覆盖仅在浅色调色板下有效，当调色板自动切换到深色时，水印会立即显示出来。
这是一个奇怪的怪癖，我花了一段时间才想到。你是否知道是否可以对变量执行计算？比如，我可以定义 --secondary-watermark 为 --secondary 减去 10？或者类似的东西？如果可以，我想这就行了。
我们的用例坦率地说有点小众。我怀疑可见的水印会劝阻人们，因为人们会想办法绕过它。我们是一个封闭的会员团体，需要能够将传播截图的人踢出去。这对我们来说更重要。
再次感谢！
1 个赞
我使用 is-light-color-scheme 函数获得了它。效果完全符合预期。谢谢！
3 个赞
adambirds
(Adam Birds)
13
这对我们来说确实是个好消息，我们一直有成员潜入我们的群组，试图让我们看起来很糟糕，然后将私人论坛帖子发布到社交媒体上，所以有了这个功能就可以阻止这种情况发生，或者让我们轻松地阻止那些冒犯的用户。感谢 @saquetim 开发了此功能。
4 个赞
pfaffman
(Jay Pfaffman)
14
您有一些弃用项。
deprecate-shim.js:33 DEPRECATION：[THEME 15 'discourse-watermark'] Ember 全局的使用已被弃用。您应该导入 Ember 模块或特定的 API。[deprecation id: ember-global] 有关更多详细信息，请参阅 https://deprecations.emberjs.com/v3.x/#toc_ember-global。
DEPRECATION：[THEME 15 'discourse-watermark'] 使用 `run.schedule` 已被弃用。请改用从 @ember/runloop 直接导入该值：
import { schedule } from '@ember/runloop'; [deprecation id: deprecated-run-loop-and-computed-dot-access]
我想帮忙，但我自己的事情也焦头烂额。
2 个赞
Ventrilo
(Jason)
16
它在我正在使用的主题上效果不太好，更多的自定义选项会很棒，例如能够决定水印占据页面的多少（这样它只会占据页面内容/背景，而不是例如浏览部分时的页眉）。
关于我的主题，无论我使用什么颜色选择器 CSS，无论颜色有多亮，文本/SVG 都显得很暗/黑色。
1 个赞
组件不错，但不支持 ember 5 吗？
我收到错误：ReferenceError: Ember is not defined，
我的 ember 版本是 v5.5.0。
@saquetim
1 个赞
pfaffman
(Jay Pfaffman)
20
嘿 @saquetim。你有时间看这个吗？看起来它仍然是坏的：
2 个赞
