Discourse에서 AddEvent 코드가 작동하지 않음

제품 지원
1

디스코스에 이벤트 캘린더용 코드를 추가하려고 하고 있습니다. 4칸 들여쓰기를 했는데도 작동하지 않는 것 같습니다.

아래는 코드 스니펫입니다:

image

이렇게 나옵니다…

image
image764×387 64.9 KB

저는 평소 코딩을 하는 사람이 아니니, 전문 용어를 좀 더 쉽게 설명해 주시면 정말 감사하겠습니다. :pray:

2

여기서 원인은 Discourse가 보안 조치로 게시물 내 사용자 입력을 필터링하기 때문입니다. 임의의 사용자가 사이트에서 스크립트를 실행하는 것을 원치 않으므로 이를 필터링합니다.

테마 컴포넌트를 사용하여 이를 작동시킬 수 있습니다. 새 테마 컴포넌트의 헤더 탭 아래에 아래와 같은 코드를 추가한 후 이를 활성 테마에 추가하면 해당 임베드를 사용할 수 있습니다.

<script type="text/discourse-plugin" version="0.8">
  const  loadScript  = require("discourse/lib/load-script").default;
  const { next } = require("@ember/runloop");

  api.decorateCookedElement(
    post => {
      const calendars = post.querySelectorAll(`[data-wrap="addEvent"]`);
      if (!calendars.length) return;

      calendars.forEach(calendar => {
        const wrapper = document.createElement("div");
        wrapper.dataset.calendar = calendar.dataset.calendar;
        wrapper.dataset.configure = false;
        wrapper.classList.add("ae-emd-cal");
        calendar.append(wrapper);
      });

      next(() =>
        loadScript("https://addevent.com/js/cal.embed.t1.init.js")
      );
    },
    { id: "AddEvent decorator", onlyStream: true }
  );
</script>

이렇게 하면 게시물에 아래와 같은 내용을 추가하여 addEvent 캘린더를 추가할 수 있습니다.

[wrap=addEvent calendar=bJ306355][/wrap]

임베드하려는 캘린더의 특정 식별자를 추가하려면 calendar=bJ306355 속성을 변경할 수 있습니다.

마지막으로, 사이트 설정에서 AddEvent 스크립트를 화이트리스트에 추가해야 합니다(이것은 또 다른 보안 계층입니다).

관리자 화면에서 content_security_policy_script_src를 검색하여 해당 링크를 추가하세요.

https://addevent.com

이 방법으로 작동하는지 알려주시면, 이를 테마 컴포넌트로 패키징하여 제공할 수 있습니다.

3

안녕하세요 @Johani,

제 환경에서는 말씀하신 해결책이 잘 작동합니다. 참고해 주셔서 감사합니다.

감사합니다!

4

새로운 테마 컴포넌트를 만들어 AddEvent 캘린더를 렌더링하도록 했습니다.

:link: GitHub - graydenshand/discourse_upcoming_addevent: Replace the DiscourseEvent "upcoming events" calendar with an AddEvent embed · GitHub

게시물에 캘린더를 임베드하는 방식은 데스크톱 버전 임베드를 표시하기에 너무 좁기 때문에, 이 테마 컴포넌트는 DiscourseCalendar 플러그인의 “예정된 이벤트” 페이지를 대신 사용합니다.

이를 위해 페이지 전환 사이에 재렌더링을 허용하도록 AddEvent 스크립트(https://addevent.com/js/cal.embed.t1.init.js)를 커스터마이징해야 했습니다.