테마 컴포넌트, 테마 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 컴포넌트( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub )를 사용 중인데, 제 j/s가 호출되지 않는 것 같습니다.

이 스크린샷에서 /vmm/gibberish… 문자열은 제 j/s가 api.decorateCooked(…을 통해 해당 부분에 도달하지 못했기 때문에 그대로 노출되는 <div data-custom="…의 원시 콘텐츠입니다.

발송되는 이메일에서도 동일한 현상이 발생합니다…

원하는 바…

실제로 전체 치환을 원하는 것은 아닙니다. 긴 이야기입니다. 제 j/s를 확장하여 <div data-custom="… 블록에서 나오는 원시 gibberish 대신 정적 문자열을 그곳에 넣을 수 있도록 하기를 원합니다.

다른 api. 메서드를 통해 훅을 걸 수 있는 방법이 있을까요?

[david (David Taylor)]

불행히도 주제 목록에서 '요약(excerpts)'을 수정하기 위한 JavaScript API는 없습니다. 보안상의 이유로 테마 컴포넌트도 서버 측 렌더링된 콘텐츠(예: 이메일)에 접근할 수 없습니다. 이메일을 수정하려면 플러그인을 사용해야 합니다.

그러나 다른 방식으로 이 문제를 해결할 수 있지 않을까 생각합니다. 현재 작성기(composer)에 다음과 같은 내용을 붙여넣고 있습니다:

<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으로 머리를 감싸고 있을 정도입니다.