Discourse 动图

:discourse2: 摘要 Discourse Gifs 在编辑器中添加了一个按钮,允许您搜索动图并将最合适的动图轻松添加到您的帖子中。
:hammer_and_wrench: 仓库链接 https://github.com/discourse/discourse-gifs
:open_book: Discourse 主题新手? Discourse 主题使用入门指南

安装此主题组件

功能

搜索后,您将获得一个无限滚动的相关动图墙:

recording

点击其中一个即可将其插入到您当前的编辑器中,效果如下:

shut up and take my money GIF by Product Hunt

这主要基于 ReplyGif: 轻松添加反应动图 的一个旧分支,因此感谢 @cpradio

主要区别在于:

  • 它可以使用动画 WebP 代替 GIF,因此在带宽方面效率更高。

  • 它是一个主题组件,因此安装和更新要容易得多。

  • 它提供 Giphy API 或 Tenor API 的选择。

  • 结果的无限滚动

  • 生成的动图会通过我们原生的位衰减保护机制下载到 Discourse。如果担心存储空间,您可以使用现有设置禁用此行为。

  • 无需折腾 nginx 来设置 HTTPS 代理

获取 Giphy API 密钥

要使组件正常工作,您需要访问 Dashboard | GIPHY Developers 并点击如下所示:

填写表单后,API 密钥将显示如下:

获取 Tenor API 密钥

在 Tenor 官方网站获取该密钥:GIF API - 更好、更快且免费 | 使用 Tenor 获取您的动图

之后,访问 Discourse 中的主题组件页面并填写设置,例如:

设置

名称 描述
api provider 我们应该使用哪个 GIF 提供商?
giphy api key GIPHY:API 密钥
giphy file format GIPHY:要使用的图像格式。WEBP 文件更小,加载更快,而 GIF 则兼容旧版浏览器。
giphy content rating GIPHY:搜索结果的內容评级。更多信息请访问 https://developers.giphy.com/docs/optional-settings#rating
giphy locale GIPHY:搜索时使用的语言。用于根据地区内容定制搜索。设置为您的默认论坛语言环境。
limit infinite search results 限制用户无限滚动时返回的 GIF 结果数量,以防止 API 速率限制。
max results limit Tenor 和 GIPHY:当启用“限制无限搜索结果”时,我们将搜索直到达到此最大 GIF 结果数。每次 API 调用获取 24 个结果,例如:最大限制 240 / 24 = 10 次 API 调用
tenor api key Tenor:V2 API 密钥。获取说明请参阅 Discourse Meta - Discourse Gifs
tenor client key Tenor:(可选)客户端指定的代表集成的字符串
tenor file detail Tenor:要使用的图像格式
tenor content filter Tenor:Tenor 结果的內容安全级别。更多信息请参阅 Tenor API 指南
tenor country Tenor:请求的两位字母原产国代码。在 Wikipedia - ISO_3166-1 中查找您的国家代码。
tenor locale Tenor:搜索时使用的语言。可以提供国家代码(可选)以区分方言。
翻译 默认值
gif.modal_title 搜索动图
gif.query 术语
gif.insert 插入所选图片
gif.composer_title 搜索动图
gif.no_results 在上面的输入框中输入关键词以搜索动图。
gif.bad_api_key 无效的 $api_provider API 密钥。站点管理员,请检查您的密钥和/或您的 $api_provider 账户。
gif.error_rate_limit 我们已达到 $api_provider API 速率限制。请稍后重试。如果问题持续存在,请联系您的站点管理员。
gif.error_search_too_long 请将搜索查询缩短至 50 个字符以内并重试。

:discourse2: 由我们托管? 主题组件可在我们的标准、商业和企业计划中使用。

84 个赞

@Heather_Dudley

我添加了一个新的站点设置,允许你强制组件使用 GIF 格式而不是 WebP。

请注意,GIF 格式会占用超过两倍的磁盘空间和网络带宽,但画质却较差。

以这个 GIF 为例:

GIF:3.5MB
giphy

WEBP:1.4MB
Detective Pikachu Reaction GIF

MP4:1MB

AVIF:276.8 KB

对于其他用户,我还为搜索弹窗添加了自动聚焦功能!

17 个赞

太棒了,非常感谢!我一直在寻找这样的功能 :slight_smile:

3 个赞

设置在哪里,@Falco?我还没找到启用它的选项。

1 个赞

1 个赞

好的,那我不是瞎子,我没有那个选项。我只有 API 密钥:

我关联的仓库是:https://github.com/discourse/discourse-gifs/tree/giphy

1 个赞

哦,您安装到了旧分支,请使用主分支重新安装:GitHub - discourse/discourse-gifs · GitHub

3 个赞

啊,这样就对了。谢谢!我预想不会有问题,但如果有任何情况,我会及时告知您!

4 个赞

难道不能使用谷歌的 Tenor 平台吗?在 Facebook 收购 Giphy 之后,我便不再使用它,转而改用 Tenor。

3 个赞

该组件在首个版本中使用了 Tenor,但我已迁移至 Giphy,因为使用 WEBP 格式的 GIF 相比其他格式在可用性上更胜一筹。而 Tenor 不支持 WEBP 格式的 GIF。

4 个赞

具有讽刺意味的是,WebP 格式由谷歌创建,而 Tenor 如今也归谷歌所有。

8 个赞

也许他们会直接采用动画 AVIF 格式?该格式已在 Chrome 中上线,并很快将在所有现代浏览器中支持。

我已将其添加到上方的帖子中,文件大小令人惊叹:

5 个赞

该格式的开发进展如何?你认为其他公司(包括 Discourse :wink:)需要多久才会采用它?

2 个赞

一旦浏览器开始支持,Discourse 即可轻松实现:AVIF image format | Can I use... Support tables for HTML5, CSS3, etc

4 个赞

感谢 @eviltrout,我们现在在移动设备上将 GIF 按钮渲染在更合适的位置,因此这种情况不会再发生!

10 个赞

谢谢 @Falco,在预览消息时能否隐藏 GIF 按钮?


谢谢

1 个赞

我对主题组件不太熟悉,能否仅在单个分类中启用此功能?

我们有一个随机/离题/娱乐分类,在那里加入这个功能会非常棒。但如果我将其添加到所有分类,那场面可就彻底失控了:rofl:

4 个赞

你可以尝试使用 CSS,但由于我们在论坛导航时编辑器会保持打开状态,我不确定这能否 100% 生效。

大致代码如下:

:not(.category-your_category_id) .d-icon-discourse-gifs-gif-icon {
    display: none
}
4 个赞

好主意。已在上一版本中添加此功能,请更新!

8 个赞

太棒了!干得漂亮,我刚把这个添加到我的论坛了!

4 个赞