토픽 목록 항목 하단 버튼 - 타임라인 콘텐츠

개발
1

안녕하세요! 저는 Discourse를 사용하여 “타임라인” 콘텐츠 개념 커뮤니티를 구축하고 있습니다.

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

"답장"과 “공유” 버튼 둘 다 테스트용입니다. topic-footer-buttons.hbs (#ember)와 유사한 컴포넌트를 몇 가지 수정하여 생성했습니다.

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

이 컴포넌트를 topic-list.hbs의 topic-list-item 템플릿 아래에 삽입하면 정상적으로 작동합니다! 하지만 이는 향후 Discourse 버전 업그레이드 또는 플러그인 구현에 좋지 않습니다. 그래서 저는 관리자 → 사용자 정의 → 공통 → 헤더(HTML)를 통해 topic-list-item.raw를 변경하려고 시도하고 있습니다.

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

하지만 새로운 문제가 발생했습니다. text/x-handlebars 템플릿에서 컴포넌트를 호출할 수 없는데, topic-list-item.raw 템플릿 내부에서 푸터 버튼 컴포넌트를 호출하는 방법이 있을까요? 컴포넌트를 내부에서 호출할 수 있는 헬퍼나 위젯 같은 것이 있는지요?

도움을 주시면 이러한 의문들을 한 번에 해결할 수 있을 것 같습니다.

2

과거에 이 문제를 해결했던 방법은 버튼을 HTML 헬퍼에 패키징하는 것이었습니다. 이렇게 하면 원본 템플릿에서 원시 HTML이 렌더링되며, 이후 원시 플러그인 아웃렛을 통해 삽입할 수 있습니다. 예시는 다음과 같습니다:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

버튼 클릭은 주제 목록 항목(topic-list-item) 컴포넌트에서 처리됩니다. 예를 들어:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield 님도 몇 가지 생각을 가지고 있을지 모르겠습니다 :slight_smile:

또한, header.html에 스크립트를 추가하는 대신 테마 자바스크립트 폴더 구조를 사용하는 것이 좋습니다. 다음을 참고하세요.

3

최근 preview-edits 커밋에서 해당 클릭 이벤트가 제거된 것을 확인했습니다. https://github.com/paviliondev/discourse-topic-previews/commit/6064a5940a80e69ed56a7cbe67f8ded8e33e5d67 버튼 클릭을 topic-list-item 컴포넌트로 처리하는 방법이 여전히 존재합니까?

4

음, @angus, 제 생각에는 더 이상 그렇게 하는 것을 권장하지 않습니다. Ember에 약간의 문제를 일으키고 있어서 TLP에서 제거했습니다. 동시에 두 개의 클릭 이벤트가 발생하는 경우, 예를 들어 앵커가 포함된 토픽 제목을 클릭하는 경우, 브라우저가 전체 페이지 새로고침을 수행하게 되며, 이는 OPA에서 분명히 원치 않는 결과입니다. 여러 사용자들이 이 문제를 보고했습니다.

현재 TLP에서는 제목, 발췌문 또는 섬네일 중 하나를 클릭해야 합니다.

클릭 영역이 항상 하나만 있도록 해야 합니다. 겹치는 영역은 문제를 일으킬 수 있습니다.