강화된 카테고리 박스 표시 컴포넌트

[oca]

discourse-theme-category-homepage

커뮤니티 포럼을 위한 새로운 category-box 홈페이지를 꽤 많이 개발했습니다. 우리 커뮤니티의 필요에 매우 특화되어 있어 많은 분들에게 유용하지 않을 수 있지만, 아이디어를 참고하실 수 있을 것입니다.

개선 전/후

우리의 고유한 사용 사례

우리는 다양한 광범위한 주제를 다루는 커뮤니티를 운영하고 있습니다. 자체 회원을 보유한 지역 NGO들을 연대하며, 자율적인 그룹들도 운영합니다. 각 그룹은 홍보가 필요한 하나 이상의 활동을 수행하고, 이를 논의하기 위한 비공개 공간도 필요합니다.

회원 중 상당수가 고령자이며, 3회 이상의 클릭이 필요한 작업은 그들에게 매우 어렵습니다(따라서 통상적인 방식으로 알림 수준을 관리하는 것은 불가능합니다).

커뮤니티 규모가 강렬한 정렬 시스템이 필요할 정도로 크지만, 사용자의 디지털 역량과 의지가 낮아 최대한 쉽고 명확하게 사용할 수 있도록 유지해야 합니다.

주제 구성

최상위 카테고리는 커뮤니티의 주요 목적을 호스팅하는 용도로 사용됩니다.
특정 그룹에 해당하지 않는 모든 주제는 가장 가까운 최상위 카테고리에 속하며, 주요 포인트는 태그로 라벨링될 수 있습니다. 태그는 대부분 최상위 카테고리에 포함되지만 반드시 그럴 필요는 없습니다.

각 NGO와 지역 그룹은 가장 명확하게 관련이 있는 최상위 카테고리의 공개 하위 카테고리에서 공지사항을 발행하고, 비공개 하위 카테고리에서 조용히 작업을 진행합니다.

이로써 사용자는 우리 주요 목적 중 하나(최상위 카테고리), 특정 주제(여러 목적에 걸쳐 횡단할 수 있는 태그), 특정 그룹(공개 하위 카테고리) 등에 대한 콘텐츠를 쉽게 찾을 수 있습니다.

기능

• 각 카테고리를 강조하여 웹사이트 전체 섹션처럼 보이게 합니다.
  • 클릭 가능한 모든 요소에 굵은 글꼴과 아이콘을 추가하여 중요한 부분에 집중하기 쉽게 합니다.
• 각 카테고리에 추가 요소를 넣습니다:
  • 일반적인 게시글 수
  • 알림 수준 선택기
  • 해당 도메인과 관련 있는 모든 게시글을 보려면 여기를 클릭하세요라는 링크를 추가하여 더 명확하게 안내합니다
• 해당 카테고리와 관련된 태그를 추가합니다
  • 우리가 논의하는 주요 주제임을 매우 명확하게 알리기 위해 헤더를 추가합니다
  • 이 태그들은 테마 설정을 통해 선택됩니다
  • 태그 표시는 태그가 실제로 태그처럼 보이도록 하여, 우리가 '태그’라는 단어를 사용할 때 무엇을 말하는지 사용자가 이해할 수 있도록 합니다.
  • 참고 : 태그 아이콘 컴포넌트에 의해 표시가 향상됩니다
• 하위 카테고리에 헤더를 추가하여 이 카테고리들이 공지사항용임을 더 명확하게 알리고, 다른 헤더를 추가하여 이 하위 카테고리들이 비공개임을 더 명확하게 알립니다(네, 자물쇠 아이콘이 있고 중간 수준 이상의 사용자는 이해합니다. 하지만…)
  • 참고 : 카테고리 아이콘 컴포넌트에 의해 표시가 향상됩니다
• 대부분의 이러한 기능은 토글 가능합니다.

설치

참고 : 이 컴포넌트는 아직 **개발 중(Work in Progress)**입니다. 계속 업데이트하고, 다른 곳에 전파된 CSS 버그를 수정하고 있습니다. 이상한 부분이 보이면 관대하게 봐주시고 알려주세요.

컴포넌트를 통상적인 방법으로 설치하세요. 테마 또는 테마 컴포넌트를 설치하는 방법?
저장소 : https://framagit.org/oca/discourse-theme-category-homepage.git

향후 기능 강화 로드맵

매우 많은 수의 CSS 버그 수정.
공개 하위 카테고리가 없거나 비공개 하위 카테고리가 없더라도 하위 카테고리 구분선/헤더가 표시되도록 강제하는 문제 수정
하위 카테고리 박스와 주제들을 아름답게 표시하는 카테고리 페이지 구현.
Discourse 팀이 하위-하위 카테고리(sub-sub-categories)가 가능하다고 결정하는 즉시 모든 것을 업데이트할 것입니다(아, 기대해 보겠습니다…)

새로운 기능 제안에 열려 있지만, 제 매우 특정한 사용 사례에 도움이 되거나 구현이 매우 쉬운 경우에만 이 컴포넌트에 추가할 것입니다. 추가되는 모든 새로운 기능은 토글 가능할 것입니다.

[HAWK]

@oca

필요할 때 상단 게시물을 업데이트하고 테마-컴포넌트 태그를 추가할 수 있도록 위키 모드를 추가해 주실 수 있나요?

문제없습니다, 처리했습니다.

[torstensson (Per Torstensson)]

이 훌륭한 컴포넌트를 만들어 주셔서 정말 감사합니다. 정말 멋집니다!

한 가지 질문이 있습니다. 카테고리 설정인 "주요 주제 상자"와 함께 활성화할 수 있을까요? 불가능하다면, 이 기능을 구현할 수 있을까요, 아니면 어떤 문제가 예상되나요?

좋은 하루 보내시고, 다시 한번 이 컴포넌트를 만들어 주셔서 진심으로 감사드립니다!

[oca]

@torstensson

한 가지 질문이 있습니다. 카테고리 설정인 "추천 주제 상자(Boxes with featured topics)"와 함께 활성화할 수 있을까요? 만약 불가능하다면, 구현이 가능한 기능인지, 아니면 어떤 문제가 예상되는지 알려주실 수 있을까요?

안녕하세요, 감사합니다.
현재 상태로는 불가능합니다(조절되는 상자가 다르기 때문이죠) 하지만 쉽게 할 수 있는 부분입니다. 원하시면 개인 메시지로 말씀해 주시면 도와드릴 수 있고, 시간이 나면 제가 한번 살펴보겠습니다. 다만, 그 경우 원하시는 모습(그리고 콘텐츠가 어떻게 표시되어야 하는지)에 대한 스케치를 주셔야 합니다.

[torstensson (Per Torstensson)]

완전히 이해했습니다.

제게 있어 이 컴포넌트의 핵심 기능은 각 하위 카테고리에 알림 상태 벨을 추가하는 점과, 컬럼 폭을 변경할 수 있는 자유도를 제공하는 단순하면서도 강력한 방식입니다. 제 사용 사례에 있어, 이러한 기능들이 "추천 주제 상자(Boxes with featured topics)"가 활성화된 상태에서 제공된다면 제 특별한 요구사항을 훌륭하게 충족시킬 것입니다.

저는 초보자이지만, 구현에 도전해 보고 싶습니다. 조언을 주시면 감사하겠습니다. 다른 카테고리 박스 컴포넌트들을 살펴보고 어떻게 해야 하는지 알아낼 수 있기를 바랍니다. 이 내용을 완전히 파악하는 데 몇 주 정도 시간이 필요할 것 같으며, 진전이 있다면 여기서 업데이트하겠습니다.

좋은 하루 보내세요.

[oca]

그 작업을 하려니 좀 애를 먹었습니다만, 결국 그렇게 어렵지 않다는 걸 알게 됐습니다.

테마 컴포넌트에서 핸들바(handlebar) 컴포넌트를 수정하여 다음 코드를 추가하세요:

{{#each categories as |c|}}
  
  ...벨 아이콘 이전의 일부 내용...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...벨 아이콘 이후의 일부 내용...

{{/each}}

방법을 잘 모르겠다면, 요하니(Johani)의 튜토리얼이 첫 번째로 참고할 만한 완벽한 자료입니다.

태그(tag)로 동일한 작업을 하는 방법을 찾게 되면 알려주세요! 제가 아무리 찾아도 방법을 찾지 못했습니다.

[pmusaraj (Penar Musaraj)]

@oca 최근 core에서 변경한 내용으로 인해 이 테마 컴포넌트의 SCSS 컴파일이 실패하고 있습니다. 수정 방법은 매우 간단하며, 스타일시트에서 다음 두 줄을 제거하면 됩니다:

@import "common/foundation/variables";
@import "theme_variables";

(두 번째 줄은 해당 파일이 더 이상 존재하지 않기 때문에 SCSS 컴파일 오류를 유발합니다. 다만 두 줄 모두 불필요합니다. 이제 core와 테마 변수는 SCSS 파일이 컴파일되기 전에 이미 주입되므로요.)

[oca]

설명해 주셔서 감사합니다.

삭제했습니다.

[Fma965]

좋은 작업이네요!, 모바일에서는 작동하지 않나요?

CyanLabs Official Community

모바일

데스크톱

[Fma965]

모바일에서도 작동하게 만드는 방법을 알면 좋겠어요. 데스크톱에서는 괜찮아 보이는데, 모바일에서 사용할 수 없다면 의미가 없거든요. 간단한 방법이 분명 있을 텐데, 어떻게 해야 하는지 모르겠어요. 혹시 조언해 주실 분 계신가요?

[Fma965]

연속 게시글 올려서 죄송합니다

Categories Layout Override 을 모바일에서만 작동하도록 어설프게 수정했습니다.

그 후 제 수정 버전인 GitHub - cyanlabs/discourse-categories-layout-override · GitHub 를 사용하게 되면서

오버라이드를 categories_boxes로 지정할 수 있게 되었습니다.

이렇게 하면 이 플러그인이 작동하는 데 필요한 뷰로 모바일 화면이 강제 적용됩니다.

태블릿

모바일

물론 이상적인 해결책은 아니지만 작동은 합니다. 그래서 더 나은 해결책이 나올 때까지는 이 우회 방법을 사용할 수 있습니다

[hoangphuctran93 (Hoàng Phúc Trần)]

테마 컴포넌트인 Categories Layout Override의 커스터마이징을 해주셔서 감사합니다. 혹시 테마 컴포넌트인 Enhanced category-box 디스플레이 컴포넌트의 커스터마이징도 공유해 주실 수 있을까요? 웹사이트를 방문했는데, class="category-logo"에 "background-color"를 적용하신 부분이 인상적이었습니다.

[hoangphuctran93 (Hoàng Phúc Trần)]

최근 커스터마이징에 대해 감사드립니다. 다만, 3.2.0.beta 4-dev 버전으로 업그레이드한 후 테마 컴포넌트가 작동하지 않았습니다. 또한 데스크톱과 모바일 간에 동일한 경험을 제공하기 위해 모바일 디스플레이 커스터마이징 기능이 Discourse 코어에 통합되기를 희망합니다.

[Fma965]

불행히도 어떻게 고쳐야 할지 전혀 모르겠습니다.

[hoangphuctran93 (Hoàng Phúc Trần)]

최근 최신 버전으로 업그레이드한 후, 테마 컴포넌트 "discourse theme category homepage"가 모바일에서 더 이상 작동하지 않으며 다음 메시지가 계속 표시됩니다.

제 사이트는 Categories - Business Lab 입니다.

[david (David Taylor)]

안녕하세요 @hoangphuctran93, 게시물을 관련 테마 컴포넌트 주제로 이동했습니다 (cc @oca)

[stephtara (Stephanie Booth)]

오, 이건 저한테 정말 유용할 것 같네요! 다양한 주제를 다루는 활성 지원 커뮤니티지만, 많은 사람들이 거대한 정원의 작은 구획 안에 머물 가능성이 높고, 디지털 리터러시가 비교적 낮은 편이죠. 고장 난 것 같아 안타깝지만, 그래도 한 번 사용해 볼 생각입니다. @oca, 혹시 그쪽에서는 아직 적극적으로 사용 중이신가요?

[hellekin]

#broken 태그는 주의하세요. 반드시 문제가 발생합니다.

@stephtara

거대한 정원 중에서도 작은 하위 줄기(sub-plot)에 머물 가능성이 높으며, 많은 사용자의 디지털 리터러시가 비교적 낮은 편입니다.

기본적으로 모든 카테고리를 음소거(mute) 처리하고, #welcome 태그가 달린 토픽을 준비하여 사용 가능한 카테고리에 대한 개요를 제공하는 것을 고려해 볼 수 있습니다. 특정 그룹에 카테고리를 시청할 권한을 부여하면, 사용자가 그룹에 가입하여 카테고리를 해제하거나 탐색할 수 있는 점진적인 경험을 만들 수 있습니다. 환영용 토픽을 소수로만 만들어두면, 사용자에게 무엇이 있는지 개요를 제공하고 참여하고 싶은 장소를 선택할 수 있게 할 수 있습니다. 정보 과부하를 피하기 위해 알림에 대한 문서화도 중요합니다.

[stephtara (Stephanie Booth)]

@hellekin

broken 태그를 사용할 때 주의하세요. 확실히 깨질 것입니다.

알려줘서 고마워, 그러면 피하는 게 좋겠지…

@hellekin

정보 과부하를 피하기 위해 알림을 문서화하는 것도 중요합니다.

그렇죠!

[hellekin]

테마 컴포넌트를 설치해 볼 수 있지만… 프로덕션 시스템에서는 하지 않는 게 좋습니다