테마 컴포넌트에 JavaScript 추가하기

개발
1

테마 컴포넌트에 JavaScript(하나의 파일, 최소화)를 추가하여 common/header.html에서 사용할 수 있는 좋은 방법이 있나요?

2

동작하도록 만들었습니다. JS(미미니마이즈)를 common/header.html에 추가하기만 하면 됩니다.

discourse-highlight-text/common/header.html at master · sbernhard/discourse-highlight-text · GitHub 를 참조하세요.

누군가 이 동작을 테마/컴포넌트 개발 가이드에 문서화해 주면 좋겠습니다.

3

컴포넌트에서 JS를 어떻게 사용하셨나요? 저는 Versatile Banner 컴포넌트를 사용 중이며, 커스텀 JS 함수를 호출하는 버튼을 추가하려고 합니다. 말씀하신 대로 head에 코드를 넣었으나 CSP 오류가 발생합니다:

dev.londonbikers.com/:1 Refused to execute inline event handler because it violates the following Content Security Policy directive: "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/". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

버튼에서 onclick="NavigateToCustomLoginUrl('facebook')"로 제 코드를 호출할 때 발생하는 오류입니다.

4

아, Content security policy  |  Articles  |  web.dev 을 통해 내 질문에 스스로 답을 찾았네요.

5

이 작업을 체계적으로 수행하는 방법에 대해서는 코드베이스의 meta에서 loadScript를 확인해 보세요.