카테고리 홈에서 3단계 카테고리를 숨기되 레이아웃을 유지하는 옵션

우리는 심도가 깊은 2단계 카테고리 구조(우리 도시의 모든 공공 도서관과 각 지점, 그리고 자체 최상위 카테고리를 가진 중앙 도서관)를 사용하고 있습니다. 최근 일부 카테고리 가지에 세 번째 중첩 수준을 도입해야 했습니다.

트리 어디에나 손자 카테고리(grandchild category)가 있는 카테고리가 하나만 존재해도, 카테고리 홈페이의 렌더링 모드가 전환됩니다: 부모 카테고리와 그 바로 아래 자식 카테고리가 나열된 컴팩트한 박스 그리드 대신, 모든 카테고리가 긴 단일 열 목록으로 렌더링됩니다. 이는 약 1,200명의 직원 사용자에게 홈페이를 매우 길고 스캔하기 어렵게 만듭니다.

이것은 다음 관련 스레드에서 설명된 isGrandParent 속성에 의해 제어되는 것으로 보입니다: https://meta.discourse.org/t/when-you-add-an-additional-nesting-level-all-categories-including-child-categories-are-displayed-on-the-categories-page/195842

우리가 원하는 것

우선 선택 사항: 카테고리가 세 번째 중첩 수준을 가지는 경우에도 표준 “박스” 홈페이 레이아웃을 유지하는 방법 — 예를 들어, 홈페이에 손자 카테고리를 단순히 표시하지 않는 것(그들은 여전히 부모 카테고리 페이지를 통해 접근 가능할 것입니다).

대안적으로, 손자 카테고리를 가진 카테고리에 대해 카테고리 홈페이에 네이티브한 확장/축소 가능한 뷰를 제공하여, 사용자가 모든 것이 평탄하게 나열되는 대신 필요한 가지만 확장할 수 있도록 하는 것입니다.

왜 네이티브/공식 솔루션을 요청하는가

위에서 링크된 오래된 스레드에서 논의된 것처럼 테마 컴포넌트/CSS 또는 JS 우회 방법(예: modifyClass를 통해 isGrandParent를 오버라이드하는 것)이 있다는 것을 알고 있습니다. 우리는 그 경로를 따르는 것을 피하고 싶습니다: 우리는 내부에 깊은 프론트엔드 전문 지식이 없으며, 우리가 직접 코어 렌더링 로직을 오버라이드할 경우 예상치 못한 부작용이나 향후 Discourse 업데이트에서의 깨짐에 대해 우려하고 있습니다. 지원되는 설정이나 공식 옵션이 장기적으로 유지보수하는 데 훨씬 더 안전할 것입니다.

Discourse가 깊은 중첩을 공식적으로 권장하지 않는다는 것을 알고 있지만, 우리의 조직 구조(여러 기관, 각각 여러 물리적 위치, 각자 자체 공간 필요)에서는 선택의 여지가 없습니다.
이러한 경우를 위한 홈페이 표시를 제어하는 지원되는 방법은 큰 도움이 될 것이며, 2021년 이후 다른 조직에서도 숨겨진 3단계에 대한 필요성이 있을 수 있다고 확신합니다.

스크린샷 첨부: 현재 우리의 2단계 홈페이 레이아웃

그리고 3단계가 도입되면 현재 어떻게 깨지는지.

5개의 좋아요

확신은 없지만, 이 Customization > Theme component 이 원하시는 기능을 수행할 수 있거나, 수정을 통해 가능할 수 있습니다. DeV(개발자)도 해당 기능을 추가하는 데 열려 있을 수 있습니다.

1개의 좋아요

합리적인 요청입니다. 하위 카테고리가 여러 레벨로 구성되어 있으면도 카테고리가 적을 경우, /categories 페이지의 레이아웃을 균형 있게 맞추는 것이 어려울 수 있습니다.

modifyClass를 더 이상 사용하지 않기를 바랍니다. 말씀하신 대로, 이러한 종류의 오버라이드를 유지보수하려면 개발에 상당한 노력이 필요하기 때문입니다.

지금부터는 안정적으로 유지하기가 더 쉬운 새로운 커스터마이징 방법을 활용할 수 있습니다. 이 경우 값 변환기(value transformer)가 도움이 될 수 있습니다. 곧 업데이트에서 사용 가능할 예정인 변환기를 하나 추가했습니다: DEV: Add a category-list-subcategories value transformer - Pull Request #42804 - discourse/discourse - GitHub

간단한 데모는 다음과 같습니다:

api.registerValueTransformer(
  "category-list-subcategories",
  ({ value, context }) =>
  context.page === "categories" && context.category.level >= 1 ? [] : value
);

이 코드는 하위 카테고리를 단 한 레벨만 표시합니다. 이제 변환기를 사용하여 사용할 수 있는 다른 옵션들이 있으므로, 이를 지원하기 위해 유지보수할 수 있는 테마 컴포넌트를 구성했습니다.

따라서 Discourse를 업데이트한 후 이 컴포넌트를 설치하면 /categories 및 기타 일부 카테고리 목록에서 몇 개의 하위 카테고리를 표시할지 제어할 수 있습니다:

Categories page depth 값을 2로 설정하면 모든 증손자 카테고리(grandchild categories)를 숨길 수 있습니다.

3개의 좋아요

안녕하세요, 정말 감사합니다!

2단계 카테고리들이 어떻게 행동할지 예측할 수 있을까요? 예를 들어, 다음에 각자 원래 위치로 돌아가서 인접하게 다시 정렬될지 같은 것 말이죠.

2개의 좋아요

네, 순서는 동일하게 유지됩니다… 이것은 기본적으로 isGrandParent를 오버라이드하는 지원되는 방법입니다.

테스트 사이트에서 촬영한 변경 전/후 모습입니다.

4개의 좋아요

완벽하네요! :heart_eyes:

정말 감사합니다!

1개의 좋아요