通过 JavaScript 在其他网站嵌入 Discourse 评论

我看了那无数次CSS页面,却从未注意到嵌入的CSS……

1 个赞

如果有人找不到嵌入式页面的样子,这里是:

我今天尝试实现这一点,但遇到了一些问题:

  • 在论坛帖子中,派生的 URL(来自 discourseEmbedUrl?)会转换为小写,这会破坏链接后文本“This is a companion discussion topic for the original entry at …”中的区分大小写的 URL。
  • 首次加载页面时,嵌入会显示“Loading discussion…”并卡住。第二次加载页面时一切正常。
  • 页面抖动:当 iframe 加载时,它会有一个默认高度,但如果没有找到评论,高度会缩小到只显示一行“Start Discussion”。这会使“loading discussion”错误变得更糟,因为它会占用很大的垂直高度。
  • 如果嵌入的父级可以优先使用 meta 标签而不是对整个页面进行文本化处理,那就更好了,我认为这更像是通用的 discourse 行为。

最大的惊喜是了解到每次访问带有嵌入的 URL 时,都会创建一个新主题。这在 OP 中:

我能想到的唯一解决方案是 hacky 的,依赖于短期 SSR/缓存来 ping 嵌入端点:

所以我想逻辑将是:

  1. 检查 $discourse/embed/info?embed_url=$link
  2. 如果主题存在,则像往常一样显示嵌入。
  3. 如果不存在,则显示一个“start conversation”按钮,链接到 $discourse/new-topic?subject=$link

这会起作用吗,还是需要进行其他链接?

仅当首次访问带有嵌入内容的页面时,才会创建新主题。在后续访问中,它将呈现与该网址关联的现有主题。

如果您不希望自动创建主题,可以通过 API 调用以最适合您的方式创建主题,然后将 topicID 传递给嵌入内容以手动控制关联。

明白了,这对我的情况来说太糟糕了,因为有数万个页面

像这样吗?

  1. API 检查主题是否存在
  2. 不存在,显示按钮
  3. 点击按钮,API 添加主题
  4. 成功,按钮容器转换为嵌入

……这也有一些问题,比如按钮点击后没有后续互动。

有没有办法只在用户实际评论时创建主题,类似这样?:

$discourse/new-topic?subject=$link.

或者这里的问题是我们无法传入 topicID 来进行确定性耦合?

不可以,在 Discourse 中无法回复不存在的主题。

为了满足此需求,我们已将所有嵌入式主题创建为未列出的主题,首次有人回复时会自动列出。

我认为创建主题需要服务器上运行的经过身份验证的请求。如果你不想处理这个问题,另一种方法是在 UI 中添加一个按钮,该按钮会触发类似以下代码(否则会自动添加到页面 head 标签中的代码):https://github.com/discourse/discourse/blob/581dbca97f2b55c9bbbe40dc3b58a9df7409d77f/public/javascripts/embed.js。它只是使用以下数据创建一个 iframe 元素:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'http://127.0.0.1:4200/',
    discourseEmbedUrl: 'EMBED_URL',
    // className: 'CLASS_NAME',
  };
</script>

编辑:我不得不尝试一下。这只是一个概念验证:https://github.com/scossar/discourse-embed-iframe-test/blob/main/app/routes/triggering-embed-code.tsx。我认为这对于你的问题来说并不是一个很好的解决方案。

逻辑完全在客户端,(loader 函数只是为了方便)。不幸的是,客户端没有很好的方法来知道主题是否已在 Discourse 中存在。因此,无法根据主题是否已存在来定制 UI。有一些方法可以解决这个问题,但这可能需要向应用程序数据库写入一些内容。

Discourse 使用 Window: postMessage() 将数据从 iframe 传递到父文档。例如,当点击嵌入式评论中的回复链接时:discourse/app/assets/javascripts/discourse/scripts/embed-application.js at 581dbca97f2b55c9bbbe40dc3b58a9df7409d77f · discourse/discourse · GitHub UI。

1 个赞

如果可以将主链接分配给新帖子,我认为不一定需要这样:

$discourse/new-topic-link?link=$link

这可能会转发到已存在的帖子,并在嵌入式管理员中使用现有逻辑。也许可以使用模板?

我想解决这个问题的另一种方法是搜索任何引用相关链接的帖子,并将任何匹配项作为全站对话的一部分显示出来,通过 SSR 直接在页面上渲染。鉴于嵌入式内容是只读的,这可能等同于此。最明显的问题是,当用户想要参与时,选择将他们发送到哪个帖子。

编辑:如果我能弄清楚如何按链接内容搜索帖子

我想知道此功能是否可用于攻击 Discourse 论坛。具体来说,是否有人可以通过同一主机下的多个 URL 伪造页面访问,并创建大量主题?

你好,Discourse 社区!

很高兴与大家分享我为使用 Docusaurus v3 并希望在其网站上嵌入 Discourse 评论的用户开发的一个插件。

docusaurus-plugin-discourse-comments

此插件可轻松将 Discourse 评论集成到你的 Docusaurus v3 网站中。以下是一些主要功能:

  • 与 Docusaurus v3 无缝集成
  • 可配置的嵌入路由
  • 用于轻松故障排除的调试模式
  • 自动处理嵌入式 URL
  • 可自定义的评论放置位置

如果你正在使用 Docusaurus v3 并希望为你的文档或博客文章添加 Discourse 评论,此插件将大大简化该过程。

你可以在 npm 上找到该插件:docusaurus-plugin-discourse-comments

4 个赞

假设我有一个可嵌入的host,blog.example.com,以及一个通配符路径允许列表,例如/.*

我想使用相同的host添加另一个嵌入,但这次使用不同的允许列表,例如/new-release.*,并添加一个额外的标签,例如releases

显然,“new release”主题可以同时匹配这两个host/路径组合,但这两个组合中哪个会优先?规则的评估顺序是什么?

我们仍然无法在单独的主机上嵌入来自私人论坛的话题吗?我的用例是,我们使用 Kajabi 托管产品,并使用 Discourse 作为评论平台。每个都需要单独登录,所以我怀疑答案仍然是“不可能”,但这是我们用户的一个限制因素,也是一个主要痛点,因为我们有超过 750 个模块,每个模块都有专门的讨论空间。如果我能将每个 Kajabi 模块的 Discourse 话题嵌入到同一页面上,即使无法在该页面上评论,它也会简化一切,并允许轻松链接到 Discourse 中的相关话题。那么,在这方面有什么进展吗,或者这会一直是私人论坛的限制吗?

我看到无法嵌入来自私有论坛的评论(在一个使用独立域的网站上):

然而,一位同事在 Ghost 网站上使用公共论坛(位于完全不同的域)进行评论,发布的大部分是免费帖子。他最近发布了他的第一个仅限会员的帖子,当我将 Discourse 上的相关主题切换到一个“所有人”都无法查看的类别,而是特定群组(与 Ghost 网站上的付费会员相关联)可查看的类别时,嵌入现在显示“嵌入错误”消息。

尽管 OP 说私有论坛(位于独立域上)不允许嵌入工作,但这是一个公共论坛,但有一个私有类别。我看到的这个问题是由于公共论坛上的私有类别在功能上等同于私有论坛吗?毕竟,我读到了以下评论,这似乎支持了这一说法:

如果公共论坛上的私有类别中的主题无法开箱即用地嵌入,是否有办法通过调整嵌入(和/或平台)来实现这一点?我并不急于(希望)“修复”这个问题,因为我暂时将私有类别设置为公共是可以接受的(因为 Discourse 无法抓取私有的 Ghost 帖子,从而无意中在 Discourse 上向非付费用户显示其内容),但如果可以实现这一点,我也不介意以后聘请某人来修改嵌入和/或为平台提交 PR。

您好,我正在使用嵌入功能在我的 Ghost 博客上,但遇到了博客文章在论坛上显示的问题。我设置了以下主机:

由于子域设置的挑战(我的域名和 Discourse 论坛不在同一 ISP),我决定采用 Tag 路由。

我遇到的问题是,我所有的博客文章都显示在 Discourse 论坛的“博客”类别中。我使用管理员用户作为 Discourse 上的发帖作者,所有 3 个类别都允许管理员创建新主题。

您对此有何见解?

是否可以为每个指定路径?例如,如果帖子应该在 /blog/ 下的博客类别中,我记得你可以这样做 /blog/*。

1 个赞

这对于 Ghost 博客不起作用(至少对于相当标准的安装来说是这样)。我正在使用我的主域名(alphagamer.net),Ghost 博客会根据博客文章标题在域名后自动添加路径。我尝试添加路径,但它只是将其删除。

1 个赞

我想知道是否可以将 Discourse 评论(主题)嵌入到 Discourse 主题中?也许使用一个包含回复按钮但不包含网站其他部分的 iframe。即没有页眉或页脚。

我曾用它来运行 Ghost,除了缺少 SSO 集成外,没有遇到任何问题,这让用户感到不满。

我记得我需要稍微调整一下示例代码。

我认为如果您只有一个嵌入,它运行得很好,我认为如果您尝试在不同的 Discourse 类别中嵌入不同类型的博客文章,则需要进行更多调整。

我曾以为可以使用标签来实现,但单独使用标签似乎无法实现(在我的设置中)。我相信在 Ghost 中我需要创建“内容集合”(Content Collections),它基本上允许我添加一个文件夹结构(例如 alphagamer.net/blog/ 和我需要的其他文件夹)。我将在周末尝试这个,更新我的“路径允许列表”,如果我能够成功,我会在这里发帖。

允许列表可以像这样用逗号分隔吗?

/blog/.*,/articles/.*

**编辑:**似乎那不起作用。这个也不行:

/(blog|articles)/.*

也许它们需要是两个单独的主机?