토픽 배너 컴포넌트

커스터마이징 테마 컴포넌트
1

이 컴포넌트를 사용하면 임의의 주제를 사용자 정의 URL 경로에 배너로 렌더링할 수 있습니다.

기본적인 외관은 꽤 단순합니다. 아래 스크린샷은 최신 목록에서 기본 환영 주제가 배너로 표시된 모습을 보여줍니다:

Screenshot from 2022-01-27 14-42-15
Screenshot from 2022-01-27 14-42-15892×882 70.2 KB

배너는 주제에서 지원되는 다양한 콘텐츠, 예를 들어 이모지, 애니메이션, 비디오 링크 등을 렌더링합니다. 따라서 이를 다양한 방식으로(혹은 남용하여) 활용할 수 있습니다 :see_no_evil:

설정에서 상대 URL로 뷰를, ID로 주제를 선택합니다. 또한 배너를 세 가지 다른 플러그인 아웃렛 중 하나에 배치하고, 특정 그룹에게만 표시하도록 설정할 수도 있습니다:

Screenshot from 2022-01-27 15-41-37
Screenshot from 2022-01-27 15-41-37715×702 49.1 KB

:+1: 크레딧: 이 컴포넌트의 위젯 코드는 기본적으로 @awesomerobot와, 제 생각에는 @xrav3nz가 만든 카테고리 사이드바 컴포넌트의 복사본입니다.
:hammer_and_wrench: 저장소 GitHub - nolosb/discourse-topic-banners: A Discourse theme component. Renders any topic as a banner on custom url paths. · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법

테마 컴포넌트 설치

16개의 좋아요
Show component only to a specific group via script?
Topic List Previews (TLP)
Make a post Stick in main feed as well as its category?
Using discourse as a Comic review/discussion platform
2

이것에는 투표(상호작용이 가능한)도 포함됩니까? (투표를 모든 사람이 볼 수 있도록 표시하는 대신 게시물의 어딘가에 숨겨두는 것이 많이 아쉬웠습니다.)

3개의 좋아요
3

좋은 질문입니다! 하지만 아니요, 직접 테스트해 보았습니다:

Screenshot from 2022-01-27 19-20-24
Screenshot from 2022-01-27 19-20-24828×308 7.4 KB

투표는 작성자 미리보기와 같이 표시됩니다. 상호작용이 불가능하고 결과도 표시되지 않습니다.

3개의 좋아요
4

이 컴포넌트에 버그를 발견했습니다. 해당 컴포넌트가 활성화되어 있고 특정 그룹의 주제만 표시하도록 설정되어 있을 때 발생합니다.

게스트나 사용자가 해당 그룹이 아닌 곳에서 포럼에 접속하면 페이지 업데이트가 올바르게 작동하지 않고, 브라우저에서 페이지를 새로고침해도 다른 주제가 로드되지 않습니다.

콘솔:

Uncaught TypeError: Cannot read properties of null (reading 'groups')
    at n.html (68eb2e30e7629f8db22df6fed8efb777b0183d8d.js?__ws=mydomain.com:114:36)
    at n.value (application-8b970b30b88888346a1f4d53543a21332202376215babe59aa315ac2054a2627.js:sourcemap:1:3239172)
    at n.value (application-8b970b30b88888346a1f4d53543a21332202376215babe59aa315ac2054a2627.js:sourcemap:1:3235241)
    at s (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90601:45)
    at t.exports (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90584:21)
    at m (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90988:17)
    at h (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90856:9)
    at d (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90843:5)
    at n.rerenderWidget (application-8b970b30b88888346a1f4d53543a21332202376215babe59aa315ac2054a2627.js:sourcemap:1:1455271)
    at t.invoke (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66550:16)
    at e.t.flush (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66442:13)
    at e.t.flush (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66646:21)
    at e.n._end (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:67222:34)
    at e.n.end (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66908:12)
    at e.n._run (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:67277:16)
    at e.n._join (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:67251:21)
    at e.n.join (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66968:19)
    at h (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:53760:28)
    at HTMLDocument.<anonymous> (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:53864:19)
    at l (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:3776:29)
    at c (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:3844:12)
2개의 좋아요
5

이 문제를 게시해 주셔서 감사합니다! 로그인된 사용자가 없는 경우에만 오류를 재현할 수 있었고, 해당 문제에 대한 수정을 추가했습니다. 구성 요소를 업데이트한 후 다시 시도해 주시겠습니까?

3개의 좋아요
6

네, 이제 작동합니다! 감사합니다! :heart:

2개의 좋아요
7

오, 이건 정말 멋지네요! 각 카테고리를 세밀하게 커스터마이징할 수 있어서 공식 테마의 카테고리 배너 컴포넌트보다 훨씬 우월해 보입니다. 물론 제가 틀린 것일 수도 있지만요.

그런 의미로, 게시물 제목에 카테고리 배너를 추가하는 것도 좋을 것 같습니다.

게다가 이 컴포넌트는 홈페이지에도 사용할 수 있으니 더할 나위 없네요.

2개의 좋아요
8

안녕하세요, 공유해 주셔서 감사합니다!

배너 위에 닫기 버튼을 추가할 계획이 없나요?

1개의 좋아요
9

이 컴포넌트가 카테고리 배너의 좋은 대안이 될지는 확신이 서지 않습니다. 몇 가지 주의할 점이 있습니다:

  • 로딩 속도가 훨씬 느려집니다.
  • 동적 콘텐츠를 유지하지 못합니다. 예를 들어, 카테고리 이름을 변경해도 컴포넌트에 반영되지 않습니다.
  • 설정 과정도 더 복잡합니다.

그럼에도 불구하고, 이렇게 활용하는 모습을 보고 싶네요 :slight_smile:

저는 현재 이 컴포넌트를 하나의 커뮤니티에서 확장된 소개 토픽을 제공하기 위해 사용하고 있습니다. 현재 이 컴포넌트에 추가할 계획은 없습니다.

10

@manuel 이 이슈를 다시 꺼내서 현재 3.1.4에서 테스트하고 있습니다.
하지만 특정 그룹을 추가했을 때 “그룹에 표시” 설정이 작동하지 않습니다. 대소문자 구분을 시도해 보았지만, 배너 토픽이 표시되지 않습니다. 설정을 비워두면 정상적으로 작동합니다. 혹시 아이디어가 있으신가요?

1개의 좋아요
11

오, 맞다. 이 컴포넌트는 리팩터링이 좀 필요할 것 같네. 코드가 꽤 많고, 나 자신도 더 이상 사용 사례를 가지고 있지 않아. 이걸 *유지보수 중단(un-maintained)*으로 태그할 수 있을까?

@jrgong 어떤 것을 설정하려는 건지 모르겠지만, 아마 이 Announcement Bar 컴포넌트를 시도해 볼 수 있을 것 같아. 기본적으로 바 레이아웃에 맞게 스타일링되어 있지만, CSS를 조금 조정하고 above-main-container 아웃렛에 배치하면 매우 유사한 결과를 얻을 수 있어. 마크다운 대신 HTML이 필요하고, 그룹 기능도 없지만, 큰 장점은 필요할 때 바로 버릴 수 있다는 거야.

3개의 좋아요
12

@manuel 팁 감사합니다. 3.2 정식 버전이 출시되면 확인해 보겠습니다. 공지사항 바의 tc는 3.1과 호환되지 않습니다.

1개의 좋아요
13

태그를 적용했습니다 :+1:

3개의 좋아요