Discourse 动图

[Discourse]

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

安装此主题组件

由于这是由 Discourse 团队维护的 official 主题组件，#support、#bug、ux 和 #feature 请求可以在 Meta 的相应类别中提出，并标记适当的主题组件标签。点击下方的链接即可开始。

 支持  错误  用户体验  功能

功能

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

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

这主要基于 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 个字符以内并重试。

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

[Falco]

Hey @Heather_Dudley,

I added a new site setting to allow you to force the component to use the GIF format instead of webp.

Just be aware that it uses more than double the disk space / network bandwidth while having less quality.

This gif here:

GIF: 3.5MB

WEBP: 1.4MB

MP4: 1MB

AVIF: 276.8 KB

For everyone else I added autofocus on the search modal!

[David_Grey]

awesome, thank you so much! was looking for such a feature

[Heather_Dudley]

Where is the setting, @Falco? I haven’t been able to find it to enable it.

[Falco]

[Heather_Dudley]

Okay, I am not blind then, I don’t have that option. I just have the api key:

repository I’m linked to: https://github.com/discourse/discourse-gifs/tree/giphy

[Falco]

Oh you are installed into the old branch, re-install using the main branch at GitHub - discourse/discourse-gifs

[Heather_Dudley]

Aaaah, that would do it. Thank you. I don’t forsee issues, but I’ll let you know if I have any!

[anon82467725]

Is it not possible to use Google’s Tenor platform? After Facebook acquired Giphy, I stopped using it and switched over to Tenor.

[Falco]

This component used Tenor in the first version, but I moved to Giphy because using WEBP gifs is a lot better for usability over other formats. And Tenor doesn’t support WEBP gifs.

[orenwolf (Ken Snider)]

Ironic considering who created the webp format, and who now owns Tenor.

[Falco]

Maybe they go straight for animated avif ? It’s already live on Chrome, and will be soon everywhere modern.

I added it to this post above, the file size is amazing:

Discourse Gifs

Hey @Heather_Dudley, I added a new site setting to allow you to force the component to use the GIF format instead of webp. Just be aware that it uses more than double the disk space / network bandwidth while having less quality. This gif here: GIF: 3.5MB [giphy] WEBP: 1.4MB [Detective Pikachu Reaction GIF] MP4: 1MB AVIF: 276.8 KB [pikachu.avif|] For everyone else I added autofocus on the search modal!

[anon82467725]

@Falco

Maybe they go straight for animated avif ? It’s already live on Chrome, and will be soon everywhere modern.

How is development of that format going? How long do you think it’ll take for other companies to adopt it (including Discourse )?

[Falco]

Discourse can support it easily as soon as browser support happens: Can I use... Support tables for HTML5, CSS3, etc

[Falco]

@Heather_Dudley

On some mobile resolutions, the gear icon is obscured by the gif icon:

Thanks to @eviltrout we now render the GIF button in a better place in mobile so this won’t happen anymore!

[mstm]

Thanks @Falco , is it possible to hide the gif button while previewing the message?

Thanks

[Richie (Richie Rich)]

I’m not that familiar with theme components, is it possible to enable this on only one category?

We have a random / off topic / fun category where this would be a brilliant addition, but if I add it to all categories then all hell will let loose

[Steven]

You could try with css but since the composer stays open when we navigate on the forum, I’m not sure it would work 100%

It would be something like this

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

[Falco]

@mstm

Thanks @Falco , is it possible to hide the gif button while previewing the message?

Good idea. Added it in last version, please update!

[DogeRTX (ǝɹıɐuoıllıᙠoʇdʎɹƆ / threadripper.eth)]

This is awesome! Nice job, just got this added to my forum!