일부 스크린샷을 첨부합니다:
- 피처드 토픽이 포함된 기본 카테고리
참고로 여기의 로고들은 다소 크고, 이로 인해 많은 공간이 낭비되고 있습니다. 높이를 75px로 줄이는 것을 선호합니다. - 하위 카테고리가 포함된 기본 박스
여기서 몇 가지 하위 카테고리에 로고 이미지가 설정되어 있으며, 이들이 표시되고 있습니다.
레이아웃은 공간 낭비가 심합니다 - 카테고리 로고는 40px로 제한되어 있지만 제목 위에 중앙 정렬되어 있습니다. 하위 카테고리 로고는 종횡비를 준수하지 않습니다(종횡비 계산이 제대로 작동하지 않을 뿐만 아니라, 높이를 설정하면 공간이 충분할 경우 종횡비가 자동으로 준수되므로 사실 불필요합니다.).
하위 카테고리 로고도 다소 커서 줄 사이 간격을 넓게 만듭니다. - 제 수정 단계 1
로고가 제목 왼쪽에 플로팅되며, 제목은 나머지 공간에서 중앙 정렬됩니다.
하위 카테고리는 색상 스트라이프와 잠금 아이콘과 함께 한 줄에 하나씩 배치됩니다. 하지만 하위 카테고리 로고는 표시되지 않습니다(이는 기본 설정과 일치합니다).
박스 레이아웃에서는 공간이 남아도는 경우 짧은 하위 카테고리 제목 두 개를 한 줄에 억지로 넣는 것은 의미가 없다고 생각합니다. 각각 별도 줄로 배치하는 것이 더 보기 좋다고 생각하지만, 하위 카테고리가 많을 경우 이를 압축하는 것을 선호하는 사용자도 있을 수 있습니다. - 제 최종 수정 사항:
하위 카테고리 로고는 제목 끝에 18px 높이로 올바른 종횡비를 유지하며 표시됩니다. 이는 선택 사항이며, 잠금 아이콘과 텍스트 사이에 배치할 수도 있지만, 스트라이프와 제목이 정렬되도록 하기를 선호합니다.
다른 기본 레이아웃에서도 하위 카테고리 로고를 사용할 수 있는 옵션을 제공하는 것도 의미가 있을 수 있지만, 저는 그 부분은 신경 쓰지 않았습니다.
여기서는 Category Icons 컴포넌트도 사용하고 있습니다(아이콘은 Niki Test 하위 카테고리에만 설정되어 있음) 스트라이프 위치가 아이콘과 정렬되도록 약간 이동되었으며, 아이콘 색상이 스트라이프 색상과 동일하므로 사실상 스트라이프 대신 아이콘이 사용됩니다 - 하지만 이는 해당 컴포넌트에 대한 수정 사항이지 코어에 대한 것이 아닙니다. - 마지막으로, 설정된 경우 상위 카테고리 토픽 위에 하위 카테고리 박스가 어떻게 렌더링되는지 보여드립니다.
현재는 표시할 손자 카테고리가 없지만, 이를 고려해야 할 것입니다. 또한 제목이 매우 긴 경우 로고를 세로로 플로팅하는 것이 더 나을 수 있습니다 - 아마도 카테고리 제목을 짧게 유지하는 것이 더 나을 것입니다!
따라서 테마의 /head에서 HTML text/x-handlebars와 SCSS를 혼합하여 "components/categories-boxes"를 효과적으로 대체했습니다. 코드를 테스트하고 GitHub에 반영할 수 있는 역량 있는 누구에게든 기꺼이 코드를 보내겠습니다.
이것은 제 사이트에서는 잘 작동하지만, 제가 놓친 다른 결과가 있을 수 있습니다.