안녕하세요,
지난 몇 주 동안 우리는 마이그레이션의 해당 단계에 진입했거나, 거의 전적으로 테마 작업에 집중할 준비가 되었기 때문에, 테마를 설정하고 테마를 다루는 방법에 대해 배우고 있습니다.
테마 컴포넌트로 멋진 것들을 많이 해 보았지만, 오늘 저녁 내내 고민하고 있는 문제를 하나 해결하려고 하고 있습니다.
모바일 환경에서 카테고리 페이지에 표시되는 하위 카테고리 목록(우리는 기본값으로 추천 주제와 함께 카테고리를 사용 중입니다)을 주제 목록 위, 카테고리 제목 아래로 이동시키는 방법이 궁금합니다.
HTML 자체의 순서를 변경해야 한다면 두 가지 방법이 있습니다. 이 경우 템플릿을 오버라이드하는 방법 외에는 선택지가 없습니다. 이는 장기적인 유지보수 측면에서 최선은 아닙니다. 왜냐하면 템플릿이 의존하는 부분을 변경하면 사용자 정의 설정이 깨질 수 있기 때문입니다.
다른 방법은 CSS를 사용하는 것이며, 이 방법이 유지보수하기가 훨씬 쉽습니다. 이 부분은 충분히 테스트해보지 않았으므로 부작용이 없는지 주의 깊게 살펴봐야 합니다… 하지만 이 방법은 원하시는 대로 요소를 재배열할 수 있습니다:
.mobile-view .category-list {
tbody {
display: flex;
flex-direction: column
}
.subcategories-list {
order: -1
}
tr:first-child { // 이 부분은 카테고리 제목 섹션입니다
order: -1
}
}
이 코드는 테이블 레이아웃을 플렉스박스(flexbox)로 변환하여, order 속성을 통해 형제 요소들의 순서를 바꿀 수 있게 합니다.
정말 감사합니다!
사실 그렇게 할 필요가 없었는데, 아웃렛에 연결하거나 템플릿을 오버라이드하는 등 unnecessarily 복잡하게 만들려고 했습니다.
현재까지의 상태는 이렇습니다. (사용자들이 익숙한 모습에 가깝게 만들기 위해 모든 수정 작업의 기본 템플릿으로 Graceful을 사용 중입니다.) 위의 코드가 어떻게 동작하는지 확인한 후, 제시해주신 수정 방식을 적용하여 카테고리 설명의 표시 순서도 빠르게 변경할 수 있었습니다.
아직 완벽하지는 않지만 거의 다 왔습니다.
