在主题组件中添加 JavaScript

开发
1

有没有一种好的方法可以将 JavaScript（单个文件，已压缩）添加到主题组件中，以便在 common/header.html 中使用？

2 个赞
2

已经搞定。只需将未压缩的 JS 添加到 common/header.html 中即可。

参见 discourse-highlight-text/common/header.html at master · sbernhard/discourse-highlight-text · GitHub

最好能有人将这种行为记录到主题/组件开发指南中。

2 个赞
3

你是如何在组件中使用 JS 的？我正在使用 Versatile Banner 组件，想添加一个按钮来调用我的自定义 JS 函数。我按照你的说明将其放在 head 中，但遇到了 CSP 错误：

dev.londonbikers.com/:1 拒绝执行内联事件处理器，因为它违反了以下内容安全策略指令："script-src https://dev.londonbikers.com/logs/ https://dev.londonbikers.com/sidekiq/ https://dev.londonbikers.com/mini-profiler-resources/ https://dev.londonbikers.com/assets/ https://dev.londonbikers.com/brotli_asset/ https://dev.londonbikers.com/extra-locales/ https://dev.londonbikers.com/highlight-js/ https://dev.londonbikers.com/javascripts/ https://dev.londonbikers.com/plugins/ https://dev.londonbikers.com/theme-javascripts/ https://dev.londonbikers.com/svg-sprite/"。要启用内联执行，必须使用 'unsafe-inline' 关键字、哈希值（'sha256-...'）或 nonce（'nonce-...'）。

当在按钮上通过 onclick="NavigateToCustomLoginUrl('facebook')" 调用我的代码时出现此问题。

4

哦，我想我通过 Content security policy  |  Articles  |  web.dev 自己回答了这个问题。

2 个赞
5

在代码库/元数据中检查 loadScript，以找到实现此功能的系统化方法。

2 个赞