Discourse 贴纸

Install this theme component

你好 :wave:

使用此主题组件,您可以为帖子和聊天消息添加贴纸…

工作原理?

它会在编辑器中放置一个按钮,该按钮会打开贴纸模态框。

贴纸模态框

单击贴纸后,它将将其添加到编辑器中。
图像的 markdown 代码将放入 [wrap=sticker] img [/wrap] 中,这意味着贴纸图像可以独立于其他图像进行定位。

贴纸总是会另起一行,并包含标题和大小。大小现在固定为 180x180px。每个贴纸都有一个阴影,使图像更具贴纸感…
在编辑器和帖子中,悬停 - 元信息会通过 CSS 隐藏。


如何设置?

首先,您需要上传要用作贴纸的图像。只需将这些图像上传到帖子中。
我们将使用这些图像,我们需要图像的 URL 和 markdown URL。

示例:
我在帖子中上传了图像。我使用的是图像 URL 的 optimized 版本。您可以在此处找到它 :arrow_down_small: 但您可以使用任何图像 URL。

方括号内的 markdown 上传 URL :arrow_down_small:


设置

贴纸图像
在贴纸图像设置中,您可以设置贴纸…

title: 这是图像的标题和 alt 文本。它也会进入 markdown 代码的标题。

emoji: 它将出现在贴纸模态框中每个贴纸的右上角。

previewUrl: 这是在贴纸模态框中显示的图像。

markdownUrl: 这是之前上传的图像的 markdown URL。


17 个赞

你好 Don :wave:

干得好!我快速看了一下 :slight_smile:

管理贴纸有点麻烦——尤其是预览部分——因为没有专门的布局或功能来做这件事(就像头像和自定义表情一样),但我理解这会需要更多的工作。

当 GIF 停止时,阴影滤镜会被禁用,并且不会显示在此处中间图像上的方形背景(一个触发灯箱的矩形 jpg):

chrome_k71dGHbeLH

滤镜效果真的很棒,但我会将其设置为可选设置 :slight_smile:

贴纸选择器使用诸如:

XXX
 X 

但我认为我更喜欢右对齐:

XXX
X 

当然,这只是我个人的看法 :v:

5 个赞

感谢您的反馈 @Canapin :slight_smile:

我为此添加了一个新设置…
Screenshot 2023-10-03 at 16.04.17

这个也完成了… 好多了 :slight_smile:

7 个赞

更新:DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

5 个赞

是否可以将其限制为特定类别?(而且,就此而言,每个类别都有不同的贴纸?)

1 个赞

如果允许管理员创建贴纸组,并且用户可以根据自己喜欢的每个主题组自定义贴纸选择。
此外,当用户在文章中使用图标时,可以根据已安装的图标进行推荐,但我认为这是一个很难实现的功能。

我可以在文本行中放置贴纸,而不是在新行中放置贴纸吗?(我已 fork 了此仓库)

你好 :waving_hand:

是的,您必须删除此行开头和结尾的 \n


@mattdm :waving_hand: 抱歉耽搁了。是的,我认为可能可以为每个类别在编辑器中显示按钮。我需要检查一下。

该组件的设置已经有点复杂了。我不确定这个。:thinking:

你好 :waving_hand: 是的,这是另一个级别。:slightly_smiling_face: 我不确定现在是否可以通过此内置功能实现。

1 个赞

谢谢回复!
但更改后,贴纸无法显示,如下所示

哦,抱歉,我认为你应该也删除 [wrap=sticker] 和 [/wrap]。它将使图片内联显示,所以可能不会丢失。:thinking:
[wrap=sticker] 仅用于给贴纸图片添加一些样式。

我明白了,行内显示不能使用 [wrap=sticker]
它奏效了,谢谢!

ps:我想知道是否可以隐藏 Composer 中的 markdownUrl,因为它是一个很长的 URL,会占用太多空间?