커스텀 컴포넌트 -- 플러그인 아웃렛에 버튼 또는 텍스트 추가

[pfaffman (Jay Pfaffman)]

	요약	아무 위치에나 버튼 또는 텍스트 추가
	리포지토리	https://github.com/literatecomputing/discourse-custom-components
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코urs 테마가 처음이신가요?	디스코urs 테마 사용 입문가이드

이 테마 컴포넌트 설치

모든 플러그인 아웃렛에 링크 버튼이나 임의의 텍스트를 추가할 수 있습니다. (이미지의 워터마크는 무시해 주세요. 이 스크린샷은 스테이징/테스트 사이트에서 촬영했습니다.)

플러그인 아웃렛이 어디에 있는지 확인하려면 Introducing Discourse developer toolbar 를 사용하여 찾을 수 있습니다. 플러그인 아웃렛이 무엇인지 모른다면 Using Plugin Outlet Connectors from a Theme or Plugin 을 참고할 수 있지만, 이 컴포넌트는 몇 가지 제한 사항이 있긴 하지만 프로그래밍을 하거나 플러그인 아웃렛을 완전히 이해하지 않아도 모든 플러그인 아웃렛에 텍스트를 삽입할 수 있게 해줍니다.

저는 사용자 프로필과 사용자 카드에 "이 버튼을 클릭하여 구독하면 PM을 보낼 수 있습니다"라는 버튼을 표시하고 싶었던 누군가를 위해 이 플러그인 개발을 시작했습니다. 그들은 사용자가 PM을 보낼 수 없는 경우에만 버튼이 표시되기를 원했습니다. 제가 늘 스스로 생각하듯 똑똑한 것은 아니기 때문에, 버튼 표시 여부를 결정하기 위해 그룹을 사용하여 컴포넌트를 작성했습니다. 이 접근법의 문제 중 하나는 스태프가 구독자 그룹에 속해 있지 않아서, PM을 보낼 수 있음에도 불구하고 "구독해야 합니다"라는 버튼을 받게 된다는 것이었습니다. 또한, 그룹이 숨겨져 있어 어쨌든 테마 컴포넌트에서 사용할 수 없었습니다. 저는 버튼 표시 여부를 결정하기 위해 currentUser.can_send_private_messages를 사용하도록 그 테마 컴포넌트를 다시 작성했습니다.

이것은 누구를 위한 것인가요?

링크가 포함된 버튼이나 특정 그룹에 대해 표시되거나 숨겨지는 임의의 텍스트를 넣고 싶다면, 이 컴포넌트를 사용하여 모든 플러그인 아웃렛에 삽입할 수 있습니다. 회원이 아닌 사람들을 제외하고 모든 메시지 사이에 “구독해야 합니다” 링크 버튼을 추가하고 싶나요? 이 컴포넌트로 가능합니다. 플러그인 아웃렛에 임의의 HTML을 붙여보면서 어떻게 보일지 확인하고 싶나요? 이것도 가능합니다.

개발자에게 도움이 되는 방법

이 테마에는 다음을 수행하는 방법에 대한 간단한 예제가 있습니다:

• Objects type for theme setting 사용
• api.renderInOutlet 사용 (설정 파일이 아닌 connectors 디렉터리에 파일을 생성하는 대신 설정으로 제어되는 아웃렛에 Glimmer 컴포넌트를 삽입하는 방법, 여기에서 설명됨)
• currentUser에 액세스하는 간단한 Glimmer 컴포넌트 작성
• 데이터를 전달할 수 있도록 컴포넌트를 다른 (인라인) 템플릿으로 감싸기
• 마크다운의 제약 없이 테마 설정에서 임의의 HTML 표시 – 물론,

@Discourse

여기서 Ember의 html-safe 헬퍼를 사용하면 텍스트 대신 HTML이 렌더링됩니다.

하지만 .gjs 파일 내부의 <template> 안에서 시도하는 경우 동작이 약간 다릅니다({{htmlSafe component.text}}와 같이).

[NateDhaliwal]

공백이 텍스트의 볼드 효과를 제거합니다.

---

훌륭한 컴포넌트입니다!

[jrgong]

버튼 URL에 플레이스홀더를 추가할 수 있을까요? 예를 들어, 사용자가 현재 있는 토픽의 ID를 URL에 포함시키는 방식처럼요.

[pfaffman (Jay Pfaffman)]

정확하지는 않아요. 예산이 있으시다면 확인해 볼게요.

버튼에 토픽 ID가 포함된다면 어떤 동작을 수행하게 되나요?

해결 방법을 찾으셨다면 PR을 만들어 주시면, 아마도 수락할 것 같아요.

@jrgong

버튼 URL에 플레이스홀더를 추가할 수 있을까요? 예를 들어 사용자가 위치한 토픽의 ID를 URL에 포함시키고 싶습니다.

아마도 불가능할 것 같지만, 여기 설명된 우회 방법을 사용할 수 있을 거예요

@Discourse

다른 Ember 컴포넌트도 블록으로 사용할 수 있으며, 올바른 이름만 사용하면 됩니다. 예를 들어 core에는 signup-cTA Ember 컴포넌트가 포함되어 있으며, 사이드바에서 그대로 사용할 수 있습니다. 매개변수 세트를 기대하는 컴포넌트는 사용할 수 없지만, 별도 테마에서 자체 Ember 컴포넌트를 만들어 사이드바의 blocks 설정에서 이름만으로 참조할 수 있습니다.

[jrgong]

안녕하세요 @pfaffman

우리 비즈니스 계정 사용자 그룹의 회원들에게 모든 토픽에 이러한 버튼 세트를 추가하고 싶습니다.
버튼을 클릭하면 사용자가 현재 있는 URL이 포함된 새로운 개인 메시지(PM)가 생성되도록 작동하게 하려 합니다.

이렇게 하면 우리 비즈니스 고객들이 특정 토픽을 고정, 강조하거나 "스폰서"로 지정해 달라는 요청을 우리에게 보낼 수 있게 됩니다.

[pfaffman (Jay Pfaffman)]

아시다시피, 새 주제 작성기(composer)를 여는 URL을 생성할 수 있습니다. 테마 컴포넌트가 추가하는 링크를 이 URL로 설정할 수 있습니다.

@jrgong

그리고 사용자가 현재 있는 URL을 포함합니다

테마 컴포넌트에 코드를 추가하지 않고는 이를 수행하는 것이 불가능하다고 생각합니다(하지만 가능할 수도 있겠죠?). 이 문제에 대해 아이디어가 있는 사람이 이 곳(또는 다른 주제)에서 해결책을 제시해 주기를 바랍니다. 만약 그렇지 않다면, 필요한 내용과 예산에 대한 설명과 함께 저에게 연락하거나 Marketplace 채널에 게시물을 남겨 주세요.

[Cate_Soule]

데모 텍스트 블록이 데모 버튼 및 나머지 요소와 정렬되어 있지 않습니다. 블록 아웃렛에 extra-nav-item을 사용하고 있습니다.

[pfaffman (Jay Pfaffman)]

추가한 버튼에 다른 버튼들의 클래스를 추가해야 할 것 같아요.

[Cate_Soule]

무슨 말씀이신가요? 데모 버튼과 동일한 클래스를 사용해 봤습니다.

[pfaffman (Jay Pfaffman)]

네. 그게 텍스트일 뿐 버튼이 아니기 때문에, 거기에 있는 다른 버튼들과 비슷한 모양으로 보이려면 CSS를 추가해야 합니다.

테마 컴포넌트가 텍스트를 원하는 위치에 배치해 주지만, 원하는 대로 스타일링하도록 설계된 것은 아닙니다.

어떤 테마의 CSS에 아래 코드를 추가하면 작동할 것입니다.

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

[Cate_Soule]

안녕하세요, 작동하지 않습니다. 또한 텍스트 블록 그룹이 '모두’로 설정되어 있어도 게스트에게는 텍스트 블록이 표시되지 않습니다.

[pfaffman (Jay Pfaffman)]

테마 설정에서 텍스트 블록의 클래스가 제가 보여드린 CSS의 클래스와 일치하도록 변경해야 합니다.

@Cate_Soule

또한 텍스트 블록 그룹이 '모두(Everyone)'로 설정되어 있음에도 불구하고 게스트에게는 텍스트 블록이 표시되지 않습니다.

또한, 매칭된 그룹을 표시하도록 설정하는 것이 아니라 매칭된 그룹을 숨기도록 설정을 변경해야 합니다.

더 많은 도움이 필요하고 예산이 있으시다면, 제 이메일 주소는 사용자 프로필 카드에 있습니다.

[Cate_Soule]

감사합니다! CSS가 작동했어요!

[pfaffman (Jay Pfaffman)]

완벽해요! 제대로 작동해서 다행이에요! CSS 관련 부분은 아직도 저한테는 좀 까다로워요.