Lightbox 不再工作了？

错误
1

我不确定是什么改变了，但我今天刚注意到，点击帖子中的图片现在只是将图片打开为一个新页面（直接链接到图片），而不是在 Lightbox 框架内打开。这包括帖子中我确信以前可以正常工作的图片。

我在管理员界面中没有看到任何可以启用/禁用此功能的新设置。我不确定何时此功能停止工作。根据 /admin/upgrade 页面，Discourse 已完全更新。

有什么方法可以调试为什么图片没有被 Lightbox 化？我可以看到 HTML 代码中“Lightbox”类已正确应用于图片（并且在包装图片的 a 标签上也有一个“Lightbox”类）：

image
image602×107 13 KB

我的网站正在使用 Cloudflare。我不确定这是否会以某种方式干扰？

谢谢！

3 个赞
2

我刚刚使用 Discourse 版本 2.9.0.beta3 进行了测试，未能重现此问题。

点击主题中的图片会弹出一个包含图片的 Lightbox，HTML 显示 lightbox 类也已应用于该图片。

我通过 Google Chrome 版本 99.0.4844.82 访问 Discourse，我测试的 Discourse 站点托管在 Digital Ocean 上。

希望这能帮助您更深入地了解您网站上出现此问题的原因。

4 个赞
3

您是否也在使用 Cloudflare 的 rocket loader 或其他 JS 优化功能？

如果使用，首先尝试禁用所述优化功能，然后重试。

4 个赞
4

该问题似乎不依赖于浏览器或操作系统。我在 macOS 上的 Firefox、Chrome 和 Safari、iOS 上的 Safari 以及 Windows 上的 Firefox/Chrome/Edge 中都看到了它。我无法找到任何 Lightbox 确实 有效的浏览器/操作系统组合，所以我猜测这是网站本身某种类型的问题，也许是某个设置或其他插件导致它损坏了？

我不知道如何以及在哪里开始尝试找出原因，因为我在控制台或站点日志中没有看到任何表明问题的迹象。

不，我没有使用 Cloudflare 中的任何优化或最小化选项。所有这些都已禁用。目前唯一启用的是 4 小时的缓存。

1 个赞
5

我已将生产站点本地复制并重现了该问题。结果发现，这是由于我编写的自定义主题插件中的某些代码导致的一个错误。我仍然无法解释为什么这会破坏 Lightbox，或者为什么这只是最近才出现的问题。会不会是核心中一个尚未发现的错误？

我的插件代码非常简单：

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.11.1", (api) => {
  // Render adjustments for post content
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

它所做的只是在渲染的帖子内容中进行简单的字符串替换。不知何故，这会破坏所有帖子中的所有 Lightbox（即使是那些不包含该字符串的帖子）。注释掉 elem.innerHTML = ... 行后，Lightbox 会再次正常工作。

请注意，上面的示例是简化的（我的实际插件会替换帖子中渲染的特定链接并对 cooked 内容执行其他操作），但即使是上面非常简单的代码也能重现我看到的问题。

这是在帖子中修改 cooked 内容并在渲染时执行的正确方法吗？这是与 Lightbox 相关的新核心错误吗？还是我一直以来都做错了，这本来就不应该起作用？

6

我创建了一个简单的theme component，它暴露了这个Lightbox问题。任何人在任何Discourse安装中激活此theme component都可以重现该问题：
https://github.com/hayatae/lightbox-theme-component-bug

如果任何人有任何可能的解决方法或建议，请告诉我！我还不确定为什么这会破坏Lightbox。

7

如果其他人也遇到此问题，我现在已经找到了一个解决方法。

只要您不对包含将要进行灯箱处理的图片的任何元素执行 innerHtml 替换，该问题就不会发生。我已经能够重新调整部分代码以更具体地匹配元素，并且只定位那些不是围绕图片的 href 的元素。

4 个赞