새 주제 헤더 버튼

[jrgong]

사용자가 현재 카테고리에 새 주제를 생성할 권한이 없다면, 빈 카테고리로 컴포저를 시작하는 것이 가장 좋은 동작이 아닐까요? 필요에 따라 모달과 관련 안내 메시지를 함께 표시할 수도 있습니다.

[lollop]

@tophee

@codinghorror

임의의 방문자 모두에게 새 주제 생성을 권유하는 것은 결국 눈물로 끝날 것입니다

글쎄요, 가입하지 않으면 그 주제를 생성할 수 없어요. 그리고 사람들이 가입하도록 장려하는 것은 분명 좋은 일입니다(가입 버튼과 주제 답변 버튼을 통해 기본적으로 이미 그렇게 하고 있죠). 그래서 새 주제 버튼이 왜 문제를 일으킬지 잘 모르겠네요.

저도 이 기능이 필요해서 저장소를 포크하여 비로그인 사용자뿐 아니라 로그인한 사용자에게도 “새 주제” 버튼이 보이도록 수정했습니다. 비로그인 사용자가 버튼을 클릭하면 로그인/가입 모달로 리다이렉트됩니다.

저장소: GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status · GitHub

[manuel (Manuel Kostka)]

일부 클래스 이름이 오래되어 스타일이 의도대로 표시되지 않습니다. 이를 업데이트하기 위한 PR을 추가했습니다: FIX: update declarations - Pull Request #6 - discourse/discourse-new-topic-button-theme-component - GitHub

[kuaza]

이 플러그인을 최신 버전으로 업데이트할 수 있나요?

[awesomerobot (Kris)]

해당 컴포넌트를 리팩토링하여 이 업데이트와 함께 작동하도록 병합했습니다: Upcoming Header Changes - Preparing Themes and Plugins

해당 컴포넌트는 이전과 동일한 방식으로 작동해야 하며, 몇 가지 작은 개선 사항(초안 상태 반영 및 현재 카테고리 및 태그 권한에 대한 반응)이 추가되었습니다. 새로운 문제가 발견되면 알려 주십시오.

[awesomerobot (Kris)]

@lollop

저도 이 기능이 필요해서 저장소를 포크한 후, 익명 사용자뿐 아니라 로그인한 사용자도 “새 주제” 버튼을 볼 수 있도록 수정했습니다. 익명 사용자가 버튼을 클릭하면 로그인/회원가입 모달로 리다이렉트됩니다.

이 기능을 수행하는 show_to_anon 설정(기본값: 비활성화)을 방금 추가했습니다.

[jrgong]

nolo의 드롭다운 위즈드 컴포넌트와 동일한 드롭다운 메뉴를 추가하는 것이 얼마나 "현실적"일까요?

특정 카테고리에 새 주제를 생성하기 위해 커스텀 위즈드를 사용하고 있으므로, 기본적으로 드롭다운 메뉴에 해당 항목들을 링크로 연결하고 싶습니다. 또한 버튼에 스태프 전용 링크(예: “새 카테고리”, “새 그룹”)도 추가하고 싶습니다.

[patrickemin]

안녕하세요, “svg icon subset” 설정에 추가한 후에도 이 컴포넌트에서 “pencil” 폰트어웨어 무료 아이콘을 사용할 수 없습니다. 혹시 원인을 아시는 분 계신가요?

[Moin]

@patrickemin

“pencil” fontawesome free icon

버전 5에는 무료 pencil 아이콘이 없다고 생각합니다.

사용자 정의 메뉴 탭

We’re not on Font Awesome 6 yet, so you’ll need to search the version 5 set for available icons here: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome It looks like that icon was renamed shop in version 6, but it did exist in version 5 with a different name: store-alt. So if you update additional icons and custom tab icon to use store-alt it should work!

v5에서도 pencil의 경우 pencil-alt인 것 같습니다.

[patrickemin]

@Moin

v5에서도 연필은 같은 것 같습니다. pencil-alt입니다.

감사합니다! 작동합니다!

[David_Ghost]

안녕하세요,

새로운 초안 업데이트로 TC를 업데이트할 수 있을까요?

감사합니다

[alltiagocom (Tiago)]

요청: 버튼의 색상(배경, 텍스트 + 아이콘)을 라이트 테마와 다크 테마 모두에 대해 정의할 수 있는 옵션을 추가해 주세요. 새 토픽은 커뮤니티 성장을 위한 필수 요소이므로, 색상이 적용된 버튼은 더 큰 임팩트를 줄 수 있습니다.

감사합니다

[Canapin (Coin-coin le Canapin)]

CSS를 사용하면 꽤 쉽게 할 수 있습니다:

New Topic Header Button

Use this code, changing the color obviously. #new-create-topic { background-color: red; }

(CSS로 다크 테마와 라이트 테마를 각각 지정할 수 있습니다)

---

수정: 적절한 예시를 추가합니다

#new-create-topic {
    background-color: light-dark(red,green);
}

이 코드는 라이트 테마에서 버튼의 색상을 빨간색으로, 다크 테마에서는 초록색으로 설정합니다.

[alltiagocom (Tiago)]

저는 아직 Discourse에서 CSS를 사용하는 데 익숙하지 않습니다. CSS 자체에는 익숙하지만, Discourse 안에서 아직 탐색을 시작하지 않았을 뿐입니다.
어디에, 어떻게 추가해야 하나요?

여전히 이 기능이 추가적인 복잡성을 피하고, CSS에 전혀 익숙하지 않은 사용자들도 컴포넌트를 더 쉽게 커스터마이즈할 수 있게 해줄 수 있다고 생각합니다.

[Canapin (Coin-coin le Canapin)]

@alltiagocom

어디에 추가해야 하나요?

테마(들)에 직접 추가하거나, 새로운 테마 컴포넌트를 만들어서 테마(들)에 포함시켜야 합니다:

위 게시물에 CSS 코드를 추가해 두었습니다.

[alltiagocom (Tiago)]

:hover도 테스트해 봤는데 버튼과 텍스트에는 적용되지만, 아이콘 자체에 마우스를 올리지 않는 한 아이콘에는 적용되지 않습니다. 마우스가 아이콘 위에 있지 않더라도 버튼을 호버할 때 아이콘을 타겟팅하는 방법을 아시나요?

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}

[Canapin (Coin-coin le Canapin)]

2번 규칙에 따르면, 버튼을 호버할 때 버튼이 아니라 아이콘을 대상으로 삼고 있습니다.

SCSS 문법을 사용하면 다음과 같습니다.

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

(라이트 모드와 다크 모드에 동일한 색상을 사용한다면 light-dark(red,red);는 필요하지 않습니다)

우리의 멋진 코드를 더 깔끔하게 정리할 수 있으므로 SCSS 사용을 권장합니다. 하지만 새로 배워야 하는 내용입니다 😄

#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}

[alltiagocom (Tiago)]

@Canapin

당신의 2번째 규칙은 버튼을 호버할 때가 아니라 아이콘을 호버할 때 아이콘을 대상으로 한다는 의미입니다.

맞습니다. 제 실수였네요… 감사합니다!

@Canapin

또한 라이트 모드와 다크 모드에 동일한 색상을 사용하는 경우 light-dark(red,red);를 사용할 필요가 없습니다.

이것들은 그냥 테스트용입니다. 실제로는 기본 테마를 사용 중인데, 그 테마에 두 옵션이 모두 있는지 잘 모르겠습니다.

SCSS에 대해서는 몇 년 전에 배웠지만, 개발자가 아니기 때문에 실제로는 거의 사용하지 않았습니다. HTML과 CSS는 꽤 자주 사용하므로 이 두 가지에 대해 더 익숙합니다.

[David_Ghost]

이 수정을 위해 이 코드를 찾았지만, 이것이 최선의 방법인지 확실하지 않습니다:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const newTopicButton = document.querySelector('.header-create-topic');
    const draftsButton = document.querySelector('.topic-drafts-menu-trigger');

    if (newTopicButton && draftsButton && !document.querySelector('.fk-header-buttons')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'fk-header-buttons';

      const parent = newTopicButton.parentNode;
      parent.insertBefore(wrapper, newTopicButton);

      wrapper.appendChild(newTopicButton);
      wrapper.appendChild(draftsButton);
    }
  });
</script>