Discourse에 인기 기능 추가: 헤더 검색, 환영 배너, 카테고리 아이콘/이모지

[lindsey (Lindsey Fogle)]

Discourse에 인기 있는 테마 컴포넌트를 기반으로 한 여러 새로운 기능을 추가하여 커뮤니티 디자인을 더 쉽게 커스터마이즈할 수 있도록 했습니다. 이 주제에서는 이러한 새로운 핵심 기능에 대해 자세히 소개하고, 사용 방법과 영감을 준 테마 컴포넌트와의 비교 정보를 제공하겠습니다.

헤더 검색

헤더 검색 기능은 검색을 우측 상단의 확대경 아이콘에서 사이트 헤더의 더 눈에 띄는 입력 필드로 이동시킵니다.

더 많은 헤더 공간이 필요한 경우(예: 주제 스크롤 시), 공간 절약을 위해 검색이 확대경 아이콘으로 복귀합니다.

헤더 검색 활성화 방법…

1. 관리자 영역에서 테마 & 컴포넌트로 이동합니다.
2. 활성 테마의 편집 버튼을 클릭합니다.
3. Search experience 설정을 찾습니다.
4. 이 설정을 “Search field in site header”(사이트 헤더의 검색 필드)로 업데이트합니다.
5. 녹색 체크를 클릭하여 저장합니다.

헤더 검색 기능 vs. Advanced Header Search 컴포넌트

헤더 검색은 Header Search 테마 컴포넌트에서 영감을 받아 개발되었으며, 핵심 기능과 구별하기 위해 Advanced Header Search로 이름이 변경되었습니다.

외부 검색(즉, Discourse 커뮤니티 외부의 검색)을 지원해야 하는 경우 Advanced Header Search 컴포넌트를 사용해야 합니다. 그렇지 않은 경우, 이제 Discourse 코어에 포함된 헤더 검색 기능을 사용할 수 있습니다.

웰컴 배너

웰컴 배너는 멤버와 방문객을 맞이하며, 주제 목록에 눈에 띄는 검색 바를 추가합니다.

웰컴 배너와 헤더 검색 기능은 호환되므로, 웰컴 배너가 표시될 때 헤더 검색은 숨겨집니다.

웰컴 배너 활성화 방법…

1. 관리자 영역에서 테마 & 컴포넌트로 이동합니다.
2. 활성 테마의 편집 버튼을 클릭합니다.
3. Enable welcome banner 설정을 찾습니다.
4. 이 설정을 활성화합니다.
5. 녹색 체크를 클릭하여 저장합니다.

배너에 표시되는 메시지를 커스터마이즈하려면 Site Texts 영역으로 이동하여 "welcome_banner"를 검색하십시오. 등록 멤버 인사, 익명 사용자 인사, 검색 필드의 텍스트 문자열을 수정할 수 있습니다.

웰컴 배너 vs. Advanced Search Banner 컴포넌트

웰컴 배너는 Search Banner 컴포넌트에서 영감을 받아 개발되었으며, 핵심 기능과 구별하기 위해 Advanced Search Banner로 이름이 변경되었습니다.

배너에 사용자 지정 배경 이미지를 사용하거나, 배너에 여러 줄의 텍스트를 입력하거나, 배너를 볼 수 있는 대상(즉, 로그인한 멤버, 로그아웃된 사용자, 또는 둘 다)을 변경하려는 경우 Advanced Search Banner 컴포넌트를 사용해야 합니다. 그렇지 않은 경우, 이제 Discourse 코어에 포함된 웰컴 배너 기능을 사용할 수 있습니다.

카테고리 아이콘 및 이모지

이제 색칠된 사각형 대신 아이콘과 이모지를 사용하여 카테고리를 구별할 수 있습니다.

카테고리 아이콘 / 이모지 사용 방법…

1. 카테고리를 생성하거나 편집할 때 Style 설정을 Icon 또는 Emoji로 변경합니다.
2. 사용하려는 아이콘 또는 이모지를 선택합니다. 색상은 아이콘 색상을 결정하고(사용하는 경우), /categories 페이지와 같이 카테고리와 색상이 연관된 다른 영역에도 영향을 미칩니다.
3. Save Category를 클릭합니다.

카테고리 아이콘 및 이모지 vs. Category Icons 컴포넌트

카테고리 아이콘 및 이모지는 Category Icons 컴포넌트에서 영감을 받아 개발되었으며, 이 핵심 기능을 선호하여 곧 비활성화될 예정입니다. 이는 더 많은 커스터마이즈(예: 이모지)를 지원하고 훨씬 더 간단한 설정 경험을 제공하기 때문입니다.

현재 Category Icons를 사용 중인 경우, 장기적인 지원 및 지속적인 기능 개선을 위해 아이콘 커스터마이즈를 Category Icons에서 핵심 카테고리 설정으로 이동하는 것을 권장합니다. 테스트 결과, 컴포넌트 설정이 핵심 기능 설정을 오버라이드하지만, 이는 함께 사용되도록 설계되지 않았습니다.

[AquaL1te]

네이티브 카테고리 아이콘 방식으로 전환하고 싶었습니다. 그런데 테마 구성 요소에는 훨씬 더 많은 아이콘이 있는 것 같습니다. 제가 사용했던 아이콘 중 지금은 네이티브 카테고리 아이콘과 함께 작동하는 것이 아주 일부뿐입니다. 아마도 하나는 FontAwesome를 사용하고 다른 하나는 이모지 때문인 것 같습니다. 저는 “icons” 옵션을 사용하고는 있지만, 테마 구성 요소의 카테고리 아이콘을 비활성화한 후에도 검색하면 해당 아이콘이 표시되지 않습니다.

현재 제가 사용하는 것의 예시:

[Arkshine]

누락된 아이콘을 SVG 아이콘 부분 집합 사이트 설정에 추가할 수 있습니다.

[krystal (Krystal S)]

@lindsey

외부 검색(즉, Discourse 커뮤니티 외부에서 수행되는 검색)을 지원해야 할 때는 Advanced Header Search 구성 요소를 사용해야 합니다.

이것이 어떻게 작동하나요? 이는 Discourse 안에서 외부 소스를 검색할 수 있다는 뜻인가요? 아니면 외부 소스에서 Discourse를 검색하는 것을 의미하나요?

[Heliosurge (Dan DeMontmorency)]

@lindsey

카테고리 아이콘 및 이모지

이제 색칠된 사각형 대신 아이콘과 이모지를 사용하여 카테고리를 구분할 수 있습니다.

정말 멋진 기능 추가네요! 감사합니다! 사용자 정의 이모지와 결합하면 인상적인 커스터마이징 기능을 제공합니다!

[AquaL1te]

@lindsey

카테고리 아이콘과 이모지

다만 여전히 차이가 있습니다. 테마 구성 요소를 사용하면 하위 카테고리에 다음과 같은 멋진 디테일이 적용됩니다:

이것은 네이티브 카테고리 아이콘 옵션에서는 보이지 않습니다. 이 경우 상단 아이콘이 사라집니다.

[tomtjes (Thomas Reintjes)]

카테고리 아이콘을 사용하여 카테고리가 공개되어 있는지, 로그인한 회원에게만 표시되는지, 아니면 특정 그룹으로 제한되어 있는지를 나타내고 있습니다. 이 기능을 새로운 설정으로 재현할 수 있을까요? 아이콘이 회색인 점은 마음에 들지만, 모든 카테고리 색상을 회색으로 설정하고 싶지는 않습니다.

[Arkshine]

@AquaL1te

기본 카테고리 아이콘 옵션에서는 이것이 표시되지 않습니다. 그러면 상단 아이콘이 사라집니다.

이 PR이 병합되면 지원될 것이라고 생각합니다:

FIX: add category badge style to category list (#32109)

@tomtjes

카테고리 아이콘을 사용하여 카테고리가 공개되어 있는지, 로그인한 멤버에게만 보이는지, 또는 특정 그룹으로 제한되어 있는지를 나타냅니다. 이 새로운 설정으로 이를 재현할 수 있을까요? 아이콘이 회색인 점은 좋지만, 모든 카테고리 색상을 회색으로 설정하고 싶지는 않습니다.

CSS를 사용하면 가능합니다.
모든 아이콘의 기본 색상을 설정한 다음, .anon(비로그인 사용자를 위한) 클래스와 사용자의 그룹 이름(CSS Classes for Current User's Groups 참조)에 따라 아이콘을 숨기거나 회색으로 변경할 수 있습니다.

아이콘만 사용하고 로그인 옵션이 필요한 경우, TC를 계속 사용하는 것도 괜찮습니다.

[mcwumbly (Dave McClure)]

@tomtjes

카테고리 아이콘을 사용하여 해당 카테고리가 공개되어 있는지, 로그인한 멤버에게만 표시되는지, 또는 특정 그룹으로 제한되는지를 나타냅니다.

좋아합니다. 이것이 커스터마이징으로 관리자에게 부담을 지워 해결하는 것보다, 더 근본적으로 무언가 누락되어 있다는 신호일 수 있다고 생각합니다.

관련 링크: Allow users with access to a restricted category to see who else has access

[gooseegg]

안녕하세요 여러분,

최근 Discourse 포럼(tw.forumosa.com)을 업그레이드했는데, 최신 업데이트와 함께 홈페이지에 새로운 “환영합니다” 헤더와 통합 검색창이 추가되었습니다. 개념적으로는 괜찮아 보이지만, 특히 모바일에서 몇 가지 사용성 문제를 발견했습니다:

1. 투명도 문제로 인해 검색 드롭다운이 읽기 어려움

예를 들어 Android에서 상단 내비게이션 바의 검색 아이콘을 탭하면 드롭다운이 표시되지만 배경이 투명하여 뒤에 있는 콘텐츠 위로 검색 결과를 거의 읽을 수 없습니다. 배경을 불투명하게 설정하면 해결될 것입니다. 말씀드린 내용을 보여줄 스크린샷을 아래에 게시했습니다.

2. 헤더가 너무 높음 - 세로 간격을 어떻게 조정할 수 있을까요?

새로운 환영 메시지와 검색창이 모바일에서 화면의 상당 부분을 차지합니다. 이미 내비게이션 바에 검색 아이콘이 있으므로 추가된 검색창은 중복되는 것처럼 느껴집니다. 이 헤더의 높이를 줄이거나, 작은 화면에서는 추가된 검색창/환영 메시지를 완전히 숨기는 방법을 찾고 싶습니다.

이 문제는 데스크톱에도 영향을 미칠 수 있지만, 현재는 특히 모바일에서 문제가 큽니다.

누군가 이 문제를 경험해 보셨거나 CSS나 테마 컴포넌트를 통해 깔끔하게 오버라이드하는 방법을 찾으셨나요?

감사합니다!

[Arkshine]

업데이트 배너가 위쪽에도 겹쳐서 표시된다는 점도 주목할 만합니다:

.welcome-banner의 z-index(현재 1)는 최소 3 이상이어야 할 것 같습니다. (주 링크와 메타데이터는 z-index: 2를 사용하므로)

[davidkingham]

@Arkshine

이 PR이 병합되면 지원될 것 같습니다:

아직도 깨져 있는 것 같습니다

[David_Ghost]

아직 수행하지 않았다면 SVG icon subset에 아이콘을 추가해야 합니다

[davidkingham]

고맙지만, 나는 해:

[lindsey (Lindsey Fogle)]

이 페이지가 어떤 페이지인가요?

/categories에서 아이콘이 예상대로 표시되는 것 같지만, 아직 테마 컴포넌트를 사용 중이어서 그런지, 아니면 수정이 필요한 다른 페이지에서 문제가 발생하고 있는지는 확실하지 않습니다.

[maiki]

방금 정말 멋진 경험을 했습니다: 개인 사이트 테마를 Horizon으로 바꾸고, 카테고리 아이콘까지 설정했는데… 전부 모바일 기기에서 했어요!

정말 놀랍고, 관리자 경험을 이렇게 매끄럽게 만들어주신 노력에 감사드립니다.