지원 게시판에 질문을 올리는 것이 적절하지 않을 수 있어 죄송합니다.
현재 /s 구독 페이지에는 구독/결제 옵션만 표시되고 있습니다. 각 구독/결제 옵션에는 포함할 수 있는 텍스트 길이가 제한되어 있습니다.
제 용도에 맞게 /s 랜딩 페이지를 단순한 “비즈니스 전용” 페이지가 아니라 조금 더 친근하고 정보 제공에 초점을 맞춘 페이지로 만들고 싶습니다.
구독/결제 옵션 위에 소개 문구나 정보 제공용 텍스트를 추가할 수 있을까요? 아니면 이것이 향후 옵션으로 구현될 수 있는 부분인가요, 아니면 아예 범위를 벗어난 것인가요?
기본적으로, 현재 옵션 위에 표준 서식 옵션을 갖춘 사용자 편집 가능한 텍스트 박스를 추가하는 것입니다.
아직 discourse의 CSS 편집 옵션에 익숙하지 않아, 페이지나 플러그인, 또는 컴포넌트 편집 시 어떤 것이 가능한지 정확히 파악하지 못하고 있습니다. 제 무지를 양해해 주시면 감사하겠습니다.
도움이 될 만한 조언을 주시면 감사하겠습니다.
감사합니다.
이것은 CSS로 처리할 수 있을 것 같습니다. 텍스트를 추가하고 싶은 위치가 표시된 스크린샷을 보내 주실 수 있을까요? 감사합니다.
플러그인 아웃렛이 어디에 있는지 확인할 수 있습니다.
그 후, Custom Components – add button or text at any plugin outlet를 사용하면 모든 플러그인 아웃렛에 임의의 텍스트를 삽입할 수 있습니다.
정말 훌륭하고 강력한 기능인 것 같습니다.
호스팅 서비스를 이용하고 있는 경우에도 이 기능을 활용할 수 있을까요? 신규 Discourse 사용자를 위한 설명이 다소 부족해서, 현재로서는 제가 이 기능을 사용하기에 가장 적합한 사람은 아닐 수 있지만, 최대한 빨리 적응하려고 노력하고 있으며 이 기능이 매우 유용할 것 같습니다.
이 기능에 대한 참고 자료를 찾기가 어려워 GitHub 페이지까지 찾아갔어야 했습니다.
플러그인 아웃렛을 찾으려면 JavaScript 콘솔에서
enableDevTools()를 실행하세요.
질문에 답해 주셔서 감사합니다.
네. 이것은 테마 컴포넌트입니다. (적어도 대부분의 플랜에서는 원하는 테마 컴포넌트를 설치할 수 있습니다). "이 테마 컴포넌트 설치"라고 적힌 큰 파란색 버튼을 클릭해 보셨나요?
그렇게 지적하셔도 할 말은 없네요!
Introducing Discourse developer toolbar 링크를 추가했으니 플러그인 아웃렛이 어디에 있는지 찾을 수 있습니다.
메시지의 이 부분을 읽기 전에 이미 그 링크를 추가해 두었습니다! 
아, 그런데 “Make a payment”(결제하기) 제목 위에 텍스트를 넣고 싶으시다면 운이 좋습니다!/s의 플러그인 아웃렛을 보니 플러그인 아웃렛이 하나도 없는 것 같습니다.
("Pay for Services"를 "Make a Payment"로 생각하세요) top-notices 또는 above-main-container에 넣을 수 있지만, 다른 모든 페이지에서 숨길 수 있는 CSS를 찾아내지 않는 한 결제 페이지가 아닌 모든 페이지에도该内容가 추가될 것입니다. 조금만 기다려 주신다면 https://ask.discourse.com/에서 그 방법을 알려줄 가능성이 꽤 있습니다.
반면에, 해당 페이지에 플러그인 아웃렛이 추가되는 것은 합리적인 요청이 될 수 있지만, 그것은 또 다른 배워야 할 부분입니다.
네. 저는 테마 컴포넌트를 설치하는 데 전혀 문제가 없는 수준입니다.
전혀 비판할 의도는 없었습니다. 그렇게 들렸다면 죄송합니다. 그저 신규 사용자의 관점에서 한 관찰이었을 뿐입니다.
네, 이전에 검색하다가 그 링크를 발견했습니다. 문제는 아직 Discourse를 개발 환경에서 실행하는 방법(또는 브라우저 콘솔을 통해 액세스하는 방법)을 모른다는 것입니다.
따라서 컴포넌트를 활용할 수 있는지에 대한 제 질문은 컴포넌트 자체의 설치에 관한 것이 아니라, 그것을 사용하려면 개발 도구에 액세스해야 한다는 점과 관련이 있었습니다. 혼동을 드려 죄송합니다.
이 리소스가 있다는 것을 몰랐습니다. 감사합니다.
배치와 관련하여, 모든 페이지에 표시되지 않는 한, 실제 “구독” 콘텐츠 위에 쉽게 들어갈 수 있는 어디에든 소개 텍스트를 배치하는 데 만족합니다.
세심하게 답변해 주셔서 감사합니다.
아니요, 아니요. 제가 그걸 염두에 두고 말한 건 맞아요. 말씀이 맞습니다. 문서가 개선되어야 합니다. 그래서 "공정하다"고 말한 거예요!
그렇게 할 필요가 없습니다. 그냥 브라우저에서 개발자 도구를 열면 됩니다 (맥이 아니라면 F12 키가 작동합니다. 그리고 저는 맥을 쓸 때마다 매번 검색해야 하는데, 옆에 8피트(약 2.4m) 떨어진 곳에 맥이 하나 있는데도요. 그러면 “mac open dev tools browser” 같은 걸 구글에서 검색하곤 합니다). 그리고 콘솔 프롬프트에 enableDevTools()를 입력하면 됩니다. 바로 여기, 지금, 이 사이트에서 바로 해볼 수 있습니다.
저는 맥을 사용하지 않지만, 다음 링크 덕분에 "J"를 기억하고 있습니다:
아. 브라우저 개발자 콘솔이 Discourse에 종속된 콘솔이 아니었군요. 이제 상황이 조금 더 이해가 됩니다. 감사합니다.
커스텀 컴포넌트를 활성화했습니다. 그리고 브라우저 콘솔에서 devtools를 켰습니다. 또한 플러그인 컴포넌트를 보기 위해 개발자 툴바도 활성화했습니다.
이제 이해했습니다. 구독(Subscription)에 대한 플러그인 컴포넌트가 없으므로, 해당 랜딩 페이지에 텍스트를 넣는 쉬운 방법이 없다는 말씀이시군요. 알겠습니다.
*쉬운 방법이란 1단계. 2단계. 3단계. 성공! 이 정도를 의미하며, 수 시간의 조사나 CSS 교육 등이 필요하지 않다는 뜻입니다.
최근 구독 관련 검색 중 어딘가에서(현재 정확한 링크를 가지고 있지 않아 죄송합니다) 해당 기능이 어차피 전면 개편이 예정되어 있다고 읽은 것 같습니다. 앞으로의 개발에서 소개/텍스트 영역에 대한 제 제안이 고려되기를 바랍니다.
이 스레드에서 도움을 주셔서 감사합니다.
구독 페이지에만 적용되는 바디 클래스가 있어야 합니다. 이렇게 하면 CSS를 사용하여 구독 페이지를 제외한 모든 페이지에 추가하는 요소를 숨길 수 있습니다.
네, 구독 페이지에는 class="above-main-container-outlet subscriptions-campaign ember-view"가 있으므로, 추가한 요소의 클래스를 숨긴 후 subscriptions-campaign 내에 있는 경우 다시 표시하는 방식으로 처리하면 됩니다. 대략 그런 식입니다.
구글과 SO를 좀 찾아본 뒤, 순수 CSS 버전으로 만들어 보았습니다:
.above-main-container-outlet.subscriptions-campaign::after {
content: "Whatever text I want to put here! \A This is a new line! \A";
white-space: pre;
}
\A를 줄바꿈 문자로 사용했습니다.
도움이 되셨길 바랍니다?
감사합니다. 그렇게 해주시니 정말 고맙습니다.
지금은 모바일로 접속 중이라 내일 PC(작업하기가 훨씬 편하죠)를 쓸 때까지는 기다려야 할 것 같습니다…
하지만 새 컴포넌트를 만들고 CSS를 붙여넣었습니다. 컴포넌트를 활성화했는데, 이제 모든 페이지에 텍스트가 표시됩니다.
그래서 잘 작동합니다. 정말 큰 성과입니다. 감사합니다.
이제 어떻게 하면 되는지 알아봐야 합니다…
… 시간이 날 때요.
그리고 CSS 자체 안에서 텍스트를 포맷팅하는 방법도 알아야 합니다. 예를 들어…
헤더 텍스트
본문 내용입니다. 그리고 아마도 조금 화려하게 꾸며볼 수도 있겠죠.
그냥 CSS 문제일 테니 결국 구글링해서 해결할 수 있을 거라고 생각합니다. 저는 하면서 배우는 중이니까요.
도움 주셔서 감사합니다. 정말 감사합니다.
구독 페이지에서만 작동하도록 설정했고, 다음 방법으로 대부분 올바르게 형식화되었습니다.
이 해결책을 위해 필요한 힌트를 제공해 주신 @pfaffman님과 @NateDhaliwal님께 진심으로 감사드립니다.
참고: 이것은 제 필요에 맞게 작동하지만, 매우 해킹(hacky)적인 방법입니다.
팁: CSS를 세밀하게 조정하는 데 도움이 필요하신가요? Gemini, Claude와 같은 AI 모델을 활용하세요. CSS를 입력하고 원하는 작업을 알려주면 됩니다.
/* PART 1: 헤더 (네이티브 H1 스타일) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "This is the Headline";
display: block;
/* 'title-wrapper' 헤더와 일치하는 스타일링 */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* 이 헤더와 아래 텍스트 사이의 여백 */
margin-bottom: 8px;
}
/* PART 2: 본문 텍스트 (아래 여백 포함) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "This is the plain text that goes below the header. \A You can still use backslash-A for new lines here.";
display: block;
/* 표준 본문 텍스트와 일치하는 스타일링 */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* 텍스트 아래 빈 공간(캐리지 리턴) 생성 */
margin-bottom: 40px;
}
그리고 PC/Mac에서 마우스 오른쪽 버튼으로 클릭한 뒤 '검사’를 선택하면 됩니다.
PR을 열었습니다. 병합되길 바랍니다 
:
오. 정말 영리하네요. 제 CSS에 대한 이해는 실용적이라기보다는 이론적인 수준에 머무르고 있습니다.
@ZeroDean PR이 병합되었습니다! 도움이 되길 바랍니다!
@ZeroDean, 이는 구독 페이지에만 있는 이 새로운 플러그인 아웃렛을 사용하여 CSS를 간소화할 수 있다는 뜻입니다.
훌륭합니다. 그걸 처리해 주셔서 감사합니다! @NateDhaliwal
감사합니다. 호스팅 서비스를 사용 중인데, 다음 서버 업데이트를 기다려야 한다는 뜻인가요?
