새 주제 헤더 버튼

:discourse2: 요약 New Topic Header Button은 모든 페이지 헤더에 편리한 ‘새 주제’ 버튼을 추가합니다
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 저장소 https://github.com/discourse/discourse-new-topic-button-theme-component
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트를 설치하세요

기능

헤더에 + 새 주제 버튼을 추가하는 간단한 테마 컴포넌트입니다. 이 버튼은 모든 페이지에서 - 주제 안에서도 - 표시됩니다.

스크린샷:

데스크톱:

모바일:

설정:

이름 설명
new topic button icon 버튼에 사용할 아이콘을 선택합니다. music 또는 star와 같은 무료 FontAwesome 6 아이콘 이름을 사용할 수 있습니다.
show button text 버튼에 텍스트 라벨을 표시합니다. 비활성화하면 아이콘만 표시됩니다.
new topic button text 버튼의 사용자 지정 텍스트입니다. 비워 두면 Discourse의 자체 “새 주제” 문구가 각 방문자의 언어로 번역되어 사용됩니다.
new topic button title 버튼이 사용할 제목을 입력하세요. 이 항목을 비워 두면 제목이 버튼 텍스트와 동일해집니다.
hide default button 주제 목록의 기본 “새 주제” 버튼을 숨깁니다
show to anon 로그아웃된 방문자에게 버튼을 표시하고 클릭 시 로그인으로 리다이렉트합니다

:discourse2: 우리가 호스팅하나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

57개의 좋아요

Pretty awesome. Now we’re talking!

FYI, we pushed the button yesterday and it was our 2nd biggest day in registrations for the past 30 days. Not sure if it was coincidence or not, but I have a feeling it’s a good way to onboard new users. Will keep an eye on the metrics

(Realizing now it must have been a coincidence, because the button only appears for users who have already logged in. Nonetheless, activity does seem to be higher)

5개의 좋아요

Hi,

Is it possible to change the color of the button, but not change the color of all buttons in the site?

If so, which is the css code for the button only?

thanks!

1개의 좋아요

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}
3개의 좋아요

Hm, how about showing the new topic button for everyone and make it act like the default Reply-to-topic button, i.e. as the user to login/sign up if they’re not logged in?

In fact, this might be something to consider for the default new topic button too, but I guess this feature would be most effective in this theme component…

4개의 좋아요

Inviting every random visitor to create a new topic.. will end in tears :sob:

Nothing kills a site quicker than a page full of low-value or gibberish topics.

7개의 좋아요

Well, they can’t create that topic unless they sign up. And encouraging people to sign up is obviously a good thing (and is being done by default via the sign-up button and the reply-to-topic button). So I don’t really see why the new topic button should cause any problems.

6개의 좋아요

Is it possible to hide the button on mobile but show the floating button?

To hide the button on mobile add

.header-buttons #new-create-topic {
    display:none;
}

in your mobile > CSS tab

The floating button you are referring is the one used on the Material Design Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from material-design-stock-theme/desktop/desktop.scss at main · discourse/material-design-stock-theme · GitHub to your mobile > CSS tab (deleting the lines that start with @include [...]).

However your requests are going off topic, it’s better if you open another topic.

4개의 좋아요

Thanks, sorry for the offtopicing :slight_smile:

1개의 좋아요

좋긴 하지만, 제 관점에서는 두 가지 단점이 있습니다.
첫째는 상단 바에 버튼이 배치된 위치입니다. 이미 상단 바에 다른 요소들이 추가되어 있어 이 버튼까지 넣으면 다소 복잡해 보입니다.
둘째는 이 버튼이 모든 페이지에 표시된다는 점입니다. 예를 들어 제 프로필 페이지나 그룹 목록 같은 곳에서는 다소 비논리적으로 느껴집니다.
제 관점에서 이 기능의 주요 사용 사례는 사용자가 스레드를 볼 때 주제에서 벗어난 답변을 하는 것을 조금 더 어렵게 만드는 것입니다. 제가 이 기능이 정말 필요하고 유용하다고 느끼는 곳은 특정 주제/스레드를 볼 때이며, 이상적으로는 상단(주제 제목과 같은 줄에)과 하단(주요 파란색 답변 버튼 옆)에 모두 표시되기를 원합니다.
중간 단계로, 현재 위치에는 유지하되 /t/xxx 페이지에서만 표시하도록 하는 것도 방법입니다.
이것이 가능한가요?

모바일에서는 표시하지 않고 싶은데, 어떻게 해야 하나요?

비로그인 사용자도 볼 수 있게 하되, 버튼을 클릭하면 로그인을 요청하도록 설정하고 싶습니다.

아, 실망이네요. "잘못된 위치"가 무슨 뜻인지 모르겠어요(제 테스트 사이트에서는 정상적으로 보이거든요). 하지만 버튼은 작동할 거라고 생각했는데, 이제 보니 그렇지 않네요. 생각했던 것보다 그렇게 간단한 문제가 아닌 것 같아요. :frowning_face:

1개의 좋아요

새로운 테마 컴포넌트를 생성하고 Mobile > CSS 탭에 다음 내용을 추가하세요.

.mobile-view #new-create-topic {
    display:none
}
4개의 좋아요

좋은 아이디어야 - 했어?

누군가 이 + 새 주제 버튼이 내 사이트의 컬러풀한 “답장” 버튼과 완전히 동일하게 보이도록/동작하도록 어떤 CSS를 타겟팅해야 하는지 알려줄 수 있나요? (즉, 표준 상태, 호버 상태, 클릭 상태 - 활성 상태 모두 포함)

제가 하고 싶은 것의 시각적 설명은 다음과 같습니다…

클래스를 btn-primary로 변경할까요?
(페이지에 btn-primary 항목을 두 개 사용할 수 있는지 확실하지 않습니다)
순수 CSS 솔루션을 원하신다면 파란색 primary 버튼의 스타일(모든 상태 포함)을 검사하여 그대로 복제하세요.

@Joe 님, 이 컴포넌트를 공유해 주셔서 감사합니다.
작은 예외 하나를 제외하면 완벽하게 작동합니다 :slight_smile:
모바일에서는 여전히 두 개의 버튼이 표시됩니다: 새로운 버튼 + 와 기본 버튼 + New Topic입니다.

다음 스타일 정의를 변경하여 기본 버튼을 없앴습니다:


이제 데스크톱과 모바일 모두에서 잘 작동하지만, 이 컴포넌트가 이 부분을 처리해 주면 좋겠습니다. 특히 어떤 이유로든 관리자가 컴포넌트를 끄게 되면 + New Topic 버튼이 전혀 표시되지 않을 수 있기 때문입니다.

4개의 좋아요

@Johani 위에서 언급한 변경 사항이 포함된 pull request를 생성했습니다.

확인해 주시겠습니까?

2개의 좋아요

컴포넌트를 만들어 주셔서 감사합니다! 헤더에 항상 새 주제 생성 옵션이 존재하는 것이 좋은 사용 사례가 될 수 있다고 생각합니다. 하지만 구현의 한 가지 세부 사항에서 어려움을 겪고 있으며, 다른 사람들은 어떻게 접근하는지 궁금합니다:

현재 이 컴포넌트는 사용자가 있는 카테고리를 반영하며, 해당 카테고리가 미리 채워진 상태로 작성을 시작합니다. 하지만 사용자가 해당 특정 카테고리에 대한 작성 권한이 있는지는 반영하지 않습니다. 따라서 사용자가 수동으로 그 카테고리를 선택할 수 없더라도 컴포넌트에 그 카테고리가 미리 채워지고, 주제를 저장하려고 할 때 오류가 발생합니다.

기본적인 ‘새 주제’ 버튼은 이러한 문제를 해당 카테고리에서 비활성화되어 처리합니다. 하지만 헤더에 있는 버튼의 아이디어는 새 주제 생성에 대한 전역 접근성을 제공하는 것이므로, 이 동작을 그대로 복사하는 것도 직관적이지 않을 것 같습니다. 때때로 기능이 작동하지 않으면 어색할 테니까요.

이 문제에 대한 좋은 일반적인 접근 방식은 무엇일까요? 아니면 이 컴포넌트를 사용하는 다른 사람들은 어떻게 접근하나요? 단순히 미리 채우기 기능을 완전히 제거하는 것이 좋을까요?

3개의 좋아요