단일 카테고리 스타일 사이트 설정으로 전환

:information_source: 2023-11-13T05:00:00Z 이후에 수행된 Discourse 업데이트에는 이 변경 사항이 포함됩니다.

UI에서 카테고리 스타일링 방식(사이드바, 채팅 또는 게시물에서 카테고리를 언급할 때 등)을 통합하기 위해 category_style 사이트 설정에서 기본이 아닌 카테고리 스타일을 제거하고, 궁극적으로 이 설정 자체를 완전히 제거할 예정입니다.

:information_source: 이미 기본(불릿) 카테고리 스타일을 사용 중인 사용자는 아무 조치도 취할 필요가 없습니다.

기본(불릿) 스타일 이외의 카테고리 스타일을 사용 중인 사용자를 위해, 즉시 안전하게 설치할 수 있는 새로운 테마 컴포넌트를 준비했습니다. 이를 통해 최종 3.2 릴리스 전 코어에서 해당 설정이 제거되는 시점에도 사이트가 기존 카테고리 스타일 설정을 계속 사용할 수 있습니다.

비기본 카테고리 스타일에 대해 특별한 애착이 없다면, 사이트에 추가 테마 컴포넌트가 필요하지 않도록 기본(불릿) 스타일로 전환하는 것을 권장합니다. 방법은 다음과 같습니다:

기본 불릿 스타일로 되돌리려면 설치할 것이 없습니다.

category_style 관리자 설정을 찾아 "bullet"으로 변경하여 다음과 같은 모습으로 만드세요:

단계는 다음과 같습니다:

  1. 사이트의 /admin으로 이동합니다.
  2. 메뉴에서 SETTINGS(설정)를 선택합니다.
  3. “category style”(카테고리 스타일)을 검색합니다.
  4. “category style” 드롭다운을 선택하고 "bullet"을 선택합니다. (또는 기본값인 bullet로 되돌리기 위해 RESET을 선택할 수 있습니다.)

위의 작업을 완료하면 카테고리 표시가 되는 모든 곳에서 불릿 스타일을 볼 수 있습니다.

곧, 기본 카테고리 스타일을 사용하지 않는 모든 사이트의 관리자 대시보드에 Category Badge Styles 테마 컴포넌트를 설치해야 한다는 알림이 표시될 예정입니다.

테마 컴포넌트를 설치한 후에는 계속 사용하려는 기존 카테고리 스타일을 선택하십시오. 여기서 선택한 내용은 코어에서 카테고리 스타일 설정이 제거될 때까지 적용되지 않습니다. 이는 원활한 전환을 보장하기 위한 조치입니다.

22개의 좋아요

이것이 이 주제와 같은 테마 구성 요소에 어떤 영향을 미칠까요?

16개의 좋아요

같은 질문인데요.. 카테고리 아이콘을 사용할 때 카테고리 스타일은 보통 none으로 설정됩니다. 그렇지 않으면 현재와 같이 아이콘과 불릿이 모두 표시됩니다:

이것은 Category Icons 컴포넌트에 통합될까요, 아니면 아이콘이 있는 단순 스타일을 위해 두 개의 컴포넌트(또는 사용자 정의 스타일)가 필요할까요?

또 다른 피드백:

현재 사이드바 스타일은 불릿 배지와 보이는 모습은 비슷하지만, 동일한 스타일 선언으로 정의된 동일한 요소 클래스는 아닙니다. 따라서 클래스와 스타일 선언도 통일될지 궁금합니다.

예를 들어, 둥근 불릿을 원할 때 다음이 표시됩니다:

이것은 불릿 배지에 간단한 선언으로 가능합니다:

.badge-wrapper.bullet .badge-category-bg {
  border-radius: 10px;
  width: 9px;
}

사이드바에 동일한 단색 둥근 불릿을 표시하려면 더 복잡해집니다. (기본적으로 부모 카테고리과 자식 카테고리의 색상이 그라디언트 선언을 통해 혼합됩니다) 예를 들어 최근 이렇게 했습니다:

.sidebar-section-link-prefix > span {
// 잠재적인 부모 카테고리의 배경색을 화면 밖으로 이동
  background-size: 15px 15px !important;
  background-position: right center !important;
}
.sidebar-section-link-wrapper .sidebar-section-link-prefix .prefix-span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
}
15개의 좋아요

그러면 공식 디스코urs 사이트(즉, meta.discourse.org)도 다시 불릿 스타일로 되돌아가는 건가요? (일부 카테고리에서도 "박스 스타일"을 사용하고 있는 걸로 보입니다.) 전혀 문제가 없는 기능을 제거하는 이유를 이해할 수 없습니다. 코드 유지보수가 너무 부담스러운 건가요, 아니면 앞으로 동일한 테마 구성 요소를 홍보/판매하기 위한 건가요?

1개의 좋아요

카테고리 스타일 설정은 카테고리 배지의 스타일을 위한 것이지, 카테고리 페이지의 레이아웃을 위한 것이 아닙니다:

이것은 ‘박스’ 버전입니다:

기본 ‘불릿’ 버전과 비교해 보세요:

#sidebar와 #hashtag-autocomplete가 도입되면서, 이러한 스타일들이 UI의 모든 요소에 걸쳐 잘 적용되지 않게 되었습니다. 대부분의 사이트가 기본값을 따르고 있으므로, 여전히 해당 스타일을 원하는 사용자를 위해 테마 구성 요소를 만들고, 코어에서 설정을 제거하여 전반적인 구조를 단순화하는 것이 합리적입니다.

모든 테마 구성 요소는 모든 사용자에게 무료이므로, 우리는 무엇을 판매할 기회를 찾고 있는 것이 아닙니다. :slight_smile:

13개의 좋아요

첫 번째 게시글에서 블레이크의 설명을 제가 제대로 이해했다면, 여기서 아무것도 제거되지 않으며, 새로운 GitHub - discourse/discourse-category-badge-styles: Adds the box and bar style for Discourse categories · GitHub 테마 컴포넌트를 사용하여 현재와 동일한 방식으로 사이트를 설정할 수 있습니다. 해당 컴포넌트를 설치하고 카테고리 스타일을 none으로 설정하면 됩니다. category style 사이트 설정이 존재하는 동안에는 아직 효과가 없지만, 바로 실행할 수 있습니다.

테마 컴포넌트 설정의 모습은 다음과 같습니다:

4개의 좋아요

그건 오히려 저에게 다른 질문을 던져 주네요. 현재 카테고리에서는 none 표시 스타일에서 색상 선택이 비활성화되어 있는데, TC도 그런 동작을 따를까요, 아니면 여전히 색상 선택을 허용할까요? 색상 선택이 허용된다면 카테고리 색상 설정이 훨씬 쉬워지겠네요.

3개의 좋아요

방금 내 사이트에서 테스트해 봤는데, ‘box’ 옵션에서 스타일링에 상당한 차이를 확인했습니다.

테마 컴포넌트 없이 적용했을 때의 모습입니다:

CleanShot 2023-10-18 at 18.58.06@2x

테마 컴포넌트를 적용했을 때의 모습입니다 (.badge-wrapper.box에서 더 큰 패딩과 var(--category-badge-text-color)에서 파란색 글씨체):

8개의 좋아요

이 문제를 테스트하여 재현할 수 있었습니다.

10개의 좋아요

desktop category page style 설정을 제거하거나 수정할 계획이 있나요?

2개의 좋아요

대체 스타일을 제거하는 변경 사항이 Discourse에 병합되기 전까지는 이 테마 컴포넌트가 제대로 작동하지 않습니다. 현재 우리의 작업은 브랜치(https://github.com/discourse/discourse/tree/category-bullet-only…)에서 진행 중이며, 해당 브랜치에서는 테마 컴포넌트가 정상적으로 작동하고 있습니다. 아직 진행 중인 작업입니다.

카테고리 아이콘 컴포넌트는 리팩토링이 필요하며, 이 업데이트가 이루어지기 전에 작업할 수 있습니다.

아이콘이 있는 기본 버レット 카테고리 스타일의 경우, 이 컴포넌트로 처리해야 합니다… 하지만 추가적인 박스/바 스타일의 경우 두 컴포넌트가 모두 필요합니다.

#announcements와 같은 멘션의 경우에도 마찬가지입니다. 이 부분을 검토해 본 결과, 공유 컴포넌트를 사용하는 것이 너무 복잡하다는 결론이 나왔습니다… 하지만 변형들 간의 HTML 및 CSS를 얼마나 밀접하게 일치시킬 수 있는지 다시 한번 살펴보겠습니다.

몇 가지 이유가 있지만, 우리가 호스팅하는 사이트의 대다수가 기본 버レット 스타일을 사용하고 있으며, 사이드바와 카테고리 멘션(예: #announcements)과 같은 새로운 기능을 도입하면서 여러 스타일이 존재하면 상황이 복잡해집니다.

여러 변형을 지원한다는 것은 모든 것을 3~4배로 수용하고 테스트해야 한다는 것을 의미합니다. 기능이 순수하게 시각적이며 사이트의 아주 작은 비율에서만 사용될 때 이는 정당화하기 어렵습니다. 이러한 것을 테마 컴포넌트로 이동하면 Discourse를 약간 단순화하면서도 대체 스타일을 사용하는 사이트를 계속 지원할 수 있습니다.

일반적으로 우리는 테마 컴포넌트를 판매하지 않지만, 엔터프라이즈 고객을 위한 커스텀 컴포넌트는 제작합니다. 이 부분은 변경될 계획이 없습니다.

현재로선 계획이 없지만, 이는 대부분의 사이트가 기본 스타일(압도적 다수로)을 사용하는 것과 비슷한 상황입니다. 만약 이를 진행한다면, 유사한 계획을 따르고 테마 컴포넌트를 통해 제거된 스타일을 지원할 가능성이 높습니다.

13개의 좋아요

그렇다면 경고를 없애기 위해 기본값으로 되돌리려면 정확히 어떻게 해야 하나요? 카테고리 배지 스타일을 불릿으로 설정하라는 건가요?

3개의 좋아요

네, 맞습니다. 당장 무언가를 변경할 시급성은 없지만, 변경하지 않으면 관리자 홈 페이지에서 계속 경고가 표시됩니다.

4개의 좋아요

그리고 그 헬퍼 컴포넌트가 언젠가 작동하기 시작해서 탄환을 숨길 건가요? 지금은 탄환을 건드리지 않고 아이콘도 표시하거든요(제 경우엔 아무것도 없고 카테고리 아이콘만 보입니다).

2개의 좋아요

이 문제를 수정하기 위해 테마 컴포넌트에 업데이트를 방금 배포했습니다. 이제 최신 버전으로 업데이트하여 활성화할 수 있습니다.

이로써 테마 컴포넌트에서 기존 카테고리 배지 스타일을 선택할 수 있지만, 아직은 효과가 나타나지 않습니다.

3개의 좋아요

포럼을 다시 bullet로, 테마 구성 요소를 none으로 설정했는데도 여전히 볼릿이 표시되고 있습니다. 의도된 동작인가요?

3개의 좋아요

지금은 "none"을 원하신다면 두 설정 모두 "none"으로 설정해 두시기 바랍니다. 이렇게 하면 코어가 업데이트될 때(아직 코어 업데이트를 진행 중입니다) 해당 설정이 코어에서 제거되어도 테마 컴포넌트가 “none” 상태를 유지하도록 처리할 수 있습니다. 현재 우선순위는 여전히 코어 설정에 있지만, 곧 테마 컴포넌트에서 선택한 값이 우선 적용될 예정입니다.

4개의 좋아요

지금은 완벽하게 작동합니다. 빠른 업데이트 감사합니다!

4개의 좋아요

감사합니다. Bullet이 도움이 되었어요. 사실 지금은 괜찮아 보입니다. 이전에는 불릿이 더 작아서 줄을 사용했거든요. (혹시 제 테마에서 변경된 건지, 잘 모르겠습니다.)

4개의 좋아요

설치 과정에 대한 영상이 있을까요? 과정을 영상으로 보면서 동시에 설명을 읽는 것이 도움이 됩니다. 저는 웹사이트에 변경 사항을 거의 하지 않는데, 실수로 큰 변경을 하게 되면 해결할 수 없을까 봐 두려워서 그렇습니다.

2개의 좋아요