홈페이지에 Lottie 애니메이션을 어떻게 배치하나요?

제품 지원
1

안녕하세요!

제 로고의 애니메이션 버전을 제작했습니다. 여기에서 확인해 보세요!

이를 .json 파일(lottiefile 애니메이션)로 변환했고, 헤더에 이 애니메이션을 배치하고 싶습니다.
아래 코드를 페이지에 붙여넣기만 하면 가능해야 합니다:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_KrQ5B2.json"  background="transparent"  speed="1"  style="width: 600px;" autoplay >
</lottie-player>

하지만 Discourse 프로젝트에서 이렇게 하면 작동하지 않습니다.
외부 리소스를 호출하는 것이므로 Discourse 환경과는 독립적이어야 하지 않나요? 그래서 이유를 모르겠습니다.

다른 토픽에서 Discourse 사용자가 카테고리 아이콘 대신 lottie 애니메이션을 사용할 수 없었다는 것을 읽었습니다.
하지만 제 경우, body 태그에 코드를 붙여넣으면 작동해야 할 것 같은데 왜 작동하지 않는지 이해가 되지 않습니다.

혹시 도와주실 수 있는 분 계신가요? :slight_smile:

2

로고에 애니메이션을 사용하는 방법을 정확히 모르겠지만, 스크립트가 Discourse 사이트에서 실행되려면 content security policy script src 사이트 설정에 https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js를 추가해야 합니다. 이렇게 하고 테마의 헤더 섹션에 스크립트를 추가하면 제 사이트에서는 애니메이션이 정상적으로 표시됩니다.

3

잘 작동합니다!
답변 감사합니다 :slight_smile: