메인 콘텐츠 위에는 배너를 표시하되 사이드바 위에는 표시하지 않도록 설정

코드로 해결하려고 하기 전에, 사이드바 아래에 배너를 배치하는 대신, 페이지 컨테이너 안에 사이드바 옆으로 배너를 배치하도록 강제할 수 있는지 궁금합니다.

3개의 좋아요

쉽게 콘텐츠를 추가할 수 있는 위치를 확인하려면 플러그인 아웃렛 위치 테마 컴포넌트를 살펴볼 수 있습니다.

다만, 이는 직접 컴포넌트를 만들거나 이 컴포넌트를 포크하려는 경우에만 도움이 됩니다.

2개의 좋아요

플러그인 아웃렛 설정을 추가하여 이렇게 표시할 수 있도록 하는 PR을 방금 열었습니다:

@tshenry 시간이 되면 테스트해 보고 병합해 주시겠어요? DEV: plugin outlet setting for sidebar, prettier by awesomerobot · Pull Request #15 · discourse/discourse-versatile-banner · GitHub

6개의 좋아요

이것과 모든 훌륭한 작업에 대해 정말 감사합니다 @awesomerobot :slight_smile:

3개의 좋아요

멋지네요 :star_struck: 감사합니다 @awesomerobot!

PR 머지 완료!

4개의 좋아요

테스트했고, 완벽하게 작동합니다!

3개의 좋아요

완벽하게 작동합니다! :+1:

3개의 좋아요

간단히 말씀드리면 - 이 컴포넌트는 데스크톱 뷰에서 헤더 아래 상단 여백에 간격을 남기는 것 같습니다. 또한, 해당 기능이 비활성화된 뷰(예: show for members가 비활성화된 경우)에서 내비게이션 바 위쪽에서도 이러한 문제가 확인됩니다.

재현하려면 데스크톱 뷰에서 카테고리 또는 토픽 목록 페이지로 이동하여 컴포넌트가 활성화된 경우와 비활성화된 경우를 비교해 보세요. 상단 여백이 약 25px만큼 확장되는 것을 확인할 수 있습니다. 배너가 멤버에게 비활성화된 뷰에서도 이를 볼 수 있습니다 (일시적으로 공용 CSS의 main-outlet에 top-margin 보정자를 추가해 두었습니다).

2개의 좋아요

모바일 뷰에서도 동일한 현상을 확인할 수 있습니다. 이 TC를 비활성화하면 간격이 사라지므로, 원인은 분명히 여기 어딘가에 있습니다.

2개의 좋아요

참고로, 배너 형식을 지정하기 위해 이 코드를 공용 CSS에 추가할 수 있습니다. 저는 임시로 비슷한 코드를 사용하여 다재다능한 배너의 형식을 지정하고 고정하고 있습니다.

// * 다재다능한 배너의 상단 여백 오프셋 보정 *

#main-outlet {
  margin-top: -25px;
}
2개의 좋아요

4개의 게시글이 기존 주제에 병합되었습니다: Versatile Banner