主题组件、主题javascript和“预览”之间的交互

[craigconstantine]

j/s

我在主题中有一些自定义的 j/s。（这是我针对 Interactive SVG using <object>? - #9 by craigconstantine 的解决方案。）最终，我会将 j/s 迁移到 Git 仓库，并将其安装为正式的主题组件。目前，我只是将 j/s 直接粘贴到了主题的头部。我想，如果我将此 j/s 安装为正式组件，这个问题可能会消失，但在我看来情况并非如此。

我的 j/s 会在 DOM 发送到浏览器之前对其进行修改…

api.decorateCooked(
    $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
    { id: 'umbdv' }
);

实际效果…

它会选择适当的 <div data-custom="…，然后添加新元素。例如，在下方的截图中，箭头下方的所有内容都是由 j/s 插入的。（您可以在这里看到实际效果：https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160）

我遇到的问题…

我正在使用 Topic List Previews 组件（https://github.com/merefield/discourse-topic-list-previews-theme.git），但我的 j/s 似乎没有被调用。

在这张截图中，/vmm/gibberish… 字符串是原始的 <div data-custom="… 内容直接显示出来的，因为我的 j/s 从未通过 api.decorateCooked(… 处理到它。

在发送的电子邮件中也会发生同样的情况…

我的期望…

我其实并不想进行完整的替换。说来话长。我只是希望扩展我的 j/s，使其能够在那里放置一些静态字符串，而不是来自我的 <div data-custom="… 块的原始乱码。

是否有其他 api. 方法我可以挂钩使用？

[david (David Taylor)]

不幸的是，目前没有一个 JavaScript API 可以用来修改话题列表中话题的“摘要”。出于安全考虑，主题组件也无法访问服务器端渲染的内容（例如电子邮件）。如果您想修改电子邮件，必须使用插件。

不过，我在想我们是否可以用另一种方式解决这个问题。目前，您在编辑器中粘贴的是类似这样的内容：

<div data-custom="umbdv">/vmm/longstringhere</div>

您可以改为这样做：

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  电子邮件/摘要的备用内容
</div>

或者，如果您想更高级一些，可以使用 通用的 bbcode 包装器 来实现：

[wrap=umbdv longstring="/vmm/longstringhere"]
备用内容
[/wrap]

这将自动生成如下 div：

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">备用内容</p>
</div>

然后，您需要调整主题组件的代码，使其删除备用内容，并将其替换为您希望显示的内容。

[craigconstantine]

……哦哦哦，这样就能解决了。我会试着调试一下，然后回来汇报。

[craigconstantine]

……是的，运行得完美无缺 @david，谢谢！

[pfaffman (Jay Pfaffman)]

有时候，光有 是不够的。这是一个非常棒的回答，我离真正理解 JavaScript 和 CSS，从而彻底 d-wrap 明白它们已经不远了。