여러분 안녕하세요,
Discourse 포럼의 사이드바 메뉴에서 문제를 겪고 있습니다. 섹션의 순서가 고정되어 있는 것 같습니다. 예를 들어, 추가적인 사용자 정의 섹션을 생성하면 항상 “Categories” 섹션 위에 표시됩니다.
제 커뮤니티의 경우, 이러한 사용자 정의 섹션을 카테고리 아래에 두는 것이 중요하지만, 이 순서를 변경하거나 제어할 방법을 찾지 못하고 있습니다.
사이드바 섹션의 위치를 관리할 수 있는 방법이 있는지, 아니면 현재 이러한 블록의 위계/순서를 사용자 정의할 수 없는 상태인지 궁금합니다.
사전 도움을 주시면 감사하겠습니다!
안녕하세요, CSS를 사용하여 사이드바 섹션의 순서를 제어할 수 있습니다. 다음과 유사한 CSS 코드가 포함된 새 컴포넌트를 추가하기만 하면 됩니다. admin -> themes & compontents -> components로 이동하여 새 로컬 컴포넌트를 생성하세요.
그런 다음 CSS 탭에 이 코드를 추가하세요. 여기서 custom-section-name은 사용자 정의 메뉴 섹션의 슬러그 이름입니다:
.sidebar-wrapper {
.sidebar-custom-sections {
display: contents;
}
[data-section-name="community"] {
order: -4;
}
[data-section-name="categories"] {
order: -3;
}
[data-section-name="tags"] {
order: -2;
}
[data-section-name="custom-section-name"] {
order: -1;
}
}
사용자의 특정 요구 사항에 맞게 위의 코드에서 숫자를 변경하고 사용자 정의 섹션을 추가해야 합니다. 결과는 다음과 유사해 보입니다:
감사합니다! 방금 그 방법을 찾아서 적용했는데, 모바일에서는 작동하지 않았습니다.
여기서도 한 번 언급된 적이 있는 것 같은데 - 하지만 이 방법도 작동하지 않습니다
모바일에서는 sidebar-wrapper 클래스가 sidebar-hamburger-dropdown로 대체된다고 생각합니다. 따라서 이 클래스를 추가하면 모바일에서도 동작할 것입니다:
.sidebar-wrapper,
.sidebar-hamburger-dropdown {
.sidebar-custom-sections {
display: contents;
}
[data-section-name="community"] {
order: -4;
}
[data-section-name="categories"] {
order: -3;
}
[data-section-name="tags"] {
order: -2;
}
[data-section-name="custom-section-name"] {
order: -1;
}
}
감사합니다! 방금 시도해 보았지만, 안타깝게도 작동하지 않았습니다. 
아 맞다, 한 가지 더: 사이드바가 모바일에서 플렉스를 사용하지 않는 것 같아요. 그래서 이것도 추가해야 합니다.
.sidebar-sections {
display: flex;
flex-direction: column;
}
아직 간단히만 테스트해 봤기 때문에 이 변경이 다른 부분에 어떤 영향을 미칠지 확실하지 않습니다. 하지만 현재 진행을 막고 있는 부분은 바로 이것입니다.
감사합니다!! 작동합니다!! 최고입니다!
커스텀 섹션의 헤더 이름에 공백이 포함되어 있습니다. 예를 들어 "Help users."와 같은 경우입니다.
data-section-name="help users"를 사용해 보았지만, 작동하지 않습니다.
공백을 어떻게 지정해야 하나요? 여기에 마스킹이 필요한가요?
도움 부탁드립니다.
수정:
FF의 개발자 도구를 사용해 사이트를 검사한 결과, 해결책은 "help-users"임을 발견했습니다.