# 카테고리별 사이트 헤더 아래 툴바
**URL:** https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638
**Category:** Development
**Created:** [1월 23, 2023, 4:19오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638 "2023-01-23T16:19:00Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 4:19오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/1 "2023-01-23T16:19:00Z")
[https://meta.discourse.org/t/welcome-link-banner/218743/28](https://meta.discourse.org/t/welcome-link-banner/218743/28)
안녕하세요, 제가 이전에 올린 기능 요청을 보셨는지 궁금해서 여쭤봅니다.
[https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge](https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge)
또는 특정 카테고리를 볼 때 메인 사이트 바 아래에 툴바를 '도킹’할 수 있게 해주는 테마 컴포넌트가 있을까요? 제가 구체적으로 원하는 것은 바로 이것입니다. 예를 들어 Joe의 사용자 정의 헤더 링크와 같은 기능이 될 수 있습니다.
이를 구현하기 위해 기존 테마 컴포넌트의 동작 방식을 조정하는 방법에 대한 안내도 매우 감사하겠습니다.
아직 초보 단계로 배우면서 진행 중이라 죄송합니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [1월 23, 2023, 5:20오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/2 "2023-01-23T17:20:18Z")
> [@Heliosurge](#):
>
> 또는 특정 카테고리를 볼 때 메인 사이트 바 아래에 툴바를 ‘도킹’할 수 있는 테마 컴포넌트가 어떨까요? 제가 구체적으로 찾고 있는 것은 바로 그 기능입니다. 예를 들어 Joe의 사용자 정의 헤더 링크와 같은 것이 될 수 있습니다.
안녕하세요!
요청 사항을 조금 더 구체적으로 말씀해 주시겠어요? **정확히** Discourse 헤더 아래에 무엇을 넣고 싶으신가요?
헤더 아래에 “무엇이든” 넣는 표준적인 방법은 테마나 컴포넌트를 편집할 때 **After Header** 탭을 사용하는 것입니다:
하지만 더 동적이고/또는 더 복잡한 무언가를 생각하고 계신 것 같습니다.
정보를 더 많이 제공해 주실수록 답변도 더 유용해질 것입니다 🙂
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 5:29오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/3 "2023-01-23T17:29:32Z")
빠른 답변 감사합니다.
매우 명확하고 구체적으로 말씀드리자면, Johani’s Custom Header Links(Icon)와 같은 기능이 거의 완벽에 가까울 것입니다.
다만, 궁극적인 목적은 클릭 가능한 로고와 몇 개의 드롭다운 메뉴를 갖춘 툴바를 만드는 것입니다.
예를 들어, 포럼에 A 카테고리를 소유한 스폰서가 있다고 가정해 보겠습니다. A 카테고리에는 2개의 하위 카테고리가 있습니다. 사용자가 A 카테고리나 그 하위 카테고리를 보고 있을 때, 사이트 헤더 아래에 해당 회사의 링크가 포함된 툴바가 고정되어 표시되도록 하는 것입니다.
예를 들어 스토어 링크, 지원, 커뮤니티 링크 등이 해당됩니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [1월 23, 2023, 5:48오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/4 "2023-01-23T17:48:05Z")
[custom header links](https://meta.discourse.org/t/custom-header-links/90588)는 꽤 단순한 테마 구성 요소이며, 동일한 코드 베이스를 사용하되 링크 목록을 다른 위치에 배치하는 것이 좋은 시작이 될 것이라고 생각합니다.
다만, 이 구성 요소는 서브메뉴를 지원하지 않으며, 서브메뉴를 추가하는 것은 더 까다로운 작업이 될 것입니다.
또 다른 접근 방식은 설정 없이 HTML, CSS(그리고 아마도 약간의 JS)만 사용하여 구성 요소를 만드는 것입니다. 이렇게 하면 꽤 "정적"인 커스터마이징이 되며, 변경이 필요한 경우 해당 HTML과 CSS 코드를 직접 편집해야 합니다.
제가 제 자체 포럼을 위해 만든 예시는 다음과 같습니다:
사이트 커스터마이징에서 보이는 모습은 다음과 같습니다:
이러한 방식이 요구사항을 충족할까요, 아니면 [custom header links](https://meta.discourse.org/t/custom-header-links/90588) 구성 요소처럼 관리자 화면에서 여러 입력 필드를 통해 더 쉽게 편집할 수 있는 방식을 선호하시나요? 예시:
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 6:00오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/5 "2023-01-23T18:00:51Z")
경험치가 좀 더 쌓일 때까지는 커스텀 헤더 링크와 비슷한 방식으로 시작하는 것이 더 쉬울 것 같습니다. 또는 Johani의 커스텀 헤더 링크 컴포넌트처럼 동작 방식을 헤더 아래로 변경할 수 있는(이미 해당 옵션이 있을 수도 있습니다) 별도의 컴포넌트를 만들어서, 오버라이드를 통해 현재 상위 카테고리를 지정하는 방법을 안내해 주시면 좋겠습니다.
다만 스폰서가 2곳인 경우, 컴포넌트를 이름 변경하여 두 번 설치하고 이름으로 컴포넌트를 지정할 수 있는지 알아야 합니다.
예를 들어,
1. (A) Custom header links
2. (B) Custom Header Links
기억이 정확하지는 않지만, 카테고리를 기준으로 사이드바를 추가하는 테마 컴포넌트가 있는 것 같습니다. 하지만 사이드바는 데스크톱에서만 작동하므로, 상단 바(top bar)가 필요합니다.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 6:06오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/6 "2023-01-23T18:06:30Z")
zip 파일에서 내보낸 후 코드를 수정하여 가져오는 방법은 알고 있습니다. 하지만 이 방법을 선택할 경우 무엇을 변경해야 하는지에 대한 안내가 필요합니다. 시도해 볼 의향이 있습니다.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 6:15오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/7 "2023-01-23T18:15:17Z")
이제 커스텀 테마 컴포넌트로 작업하는 것이 더 쉬울 수 있습니다.
말씀하신 대로 헤더 뒤에 간단한 코드를 추가하여 카테고리 대상 설정을 단순화하고, 주요 링크에는 여기저기 이미지를 사용하여 간단한 링크를 표시하는 방식이요. 예를 들어 커뮤니티 링크를 특정 게시물이나 게시된 페이지로 연결하는 것처럼요.
다시 한번 시간을 내어 지식을 공유해 주셔서 감사합니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [1월 23, 2023, 11:29오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/8 "2023-01-23T23:29:30Z")
제가 직접 만들어본 실용적인 예시입니다:
**After Header** 탭에 넣은 HTML입니다:
```xml
```
**CSS** 탭에 넣은 SCSS입니다 (Discourse는 CSS 기능을 확장하는 SCSS를 사용합니다):
```scss
$category_classes: "general", "site-feedback";
.below-header-banner {
display: none;
}
@each $cat in $category_classes {
body.category-#{$cat} {
#category-#{$cat}-banner.below-header-banner {
display: block;
}
}
}
```
결과입니다. 각 배너는 해당 카테고리에서만 표시됩니다.
도움이 되셨으면 좋겠습니다!
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 11:35오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/9 "2023-01-23T23:35:52Z")
정말 완벽합니다! 정말 감사합니다!
이 기본 코드를 사용하면 부모 카테고리의 하위 카테고리에 있는 경우에도 표시되나요? 아니면 조건에 하위 카테고리를 추가해야 하나요?
정말 복사해서 붙여넣고 다시 말씀드려야겠어요. 제 질문에 시간을 내어 도와주셔서 정말 감사드립니다.
🖖😎🤝
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [1월 23, 2023, 11:40오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/10 "2023-01-23T23:40:48Z")
> [@Heliosurge](#):
>
> 이 기본 코드를 사용하면 상위 카테고리의 하위 카테고리에 있을 때도 표시되나요? 아니면 조건에 하위 카테고리를 추가해야 하나요?
하위 카테고리는 `` 태그에서 자체 클래스를 가집니다.
예를 들어, [https://meta.discourse.org/c/support/wordpress/21](https://meta.discourse.org/c/support/wordpress/21)에서 #support:wordpress는 #support의 하위 카테고리입니다.
``의 카테고리 클래스는 `category-support-wordpress`입니다.
배너가 하위 카테고리뿐만 아니라 상위 카테고리에서도 표시되도록 하려면 SCSS 코드가 달라야 합니다. 내일 확인해 보겠습니다.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 23, 2023, 11:43오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/11 "2023-01-23T23:43:15Z")
멋지네요! 풍부한 지식을 공유해 주시고 튼튼한 출발을 도와주셔서 다시 한번 감사드립니다.
당신은 분명히 팀의 큰 자산입니다! 🍻😎🖖
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 24, 2023, 12:48오전 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/12 "2023-01-24T00:48:59Z")
경험이 부족해서 죄송합니다. 하지만 한 번 더 도움을 받을 수 있을까요?
```plaintext
```
이 코드를 당신의 예제와 어떻게 결합해야 하나요? 그리고 링크가 위에서 아래로 쌓이는 대신 왼쪽에서 오른쪽으로 펼쳐지도록 하려면 어떻게 해야 하나요?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [1월 24, 2023, 11:18오후 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/13 "2023-01-24T23:18:21Z")
기본적으로 이 코드를 가져와서 `` 태그와 그 내용을 대체하도록 내 코드에 넣으면 됩니다. 하지만 단순히 복사-붙여넣기하기보다는, 이 코드를 필요에 맞게 다듬고 적응시키는 것을 권장합니다.
요소가 서로 위아래로 쌓이는 대신 인라인으로 표시되도록 하려면, 이를 구현하는 CSS 방식이 매우 많습니다… 그중 많은 부분은 꽤 직관적이지만, 그러면 여기서 제공하는 도움의 범위를 벗어나게 됩니다. 다음 설명을 참고해 보세요:
> [@About the Development category](https://meta.discourse.org/t/about-the-dev-category/1026):
>
> The category for all things Discourse Development. Building a customization for yourself or the community? Then this is the category for you! [Learn more…](https://meta.discourse.org/t/developer-guides-index/308036)
이처럼 직접적으로 Discourse와 관련되지 않은 일반적인 HTML 및 CSS 관련 사항에 대해서는 여기에서 정보를 찾을 수 있습니다: [Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)
그리고 인터넷 어디에서든 찾아볼 수 있습니다. 예를 들어: [https://www.google.com/search?q=css+make+list+element+inline](https://www.google.com/search?q=css+make+list+element+inline)
그럼에도 불구하고, 현재 HTML과 CSS에 대한 기술 수준은 어떻게 되시나요?
이 부분에 대해 조금 더 알면 더 맞춤형으로 답변을 작성하는 데 도움이 될 것입니다. 🙂
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 25, 2023, 12:20오전 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/14 "2023-01-25T00:20:31Z")
> [@Canapin](#):
>
> 그렇지만, 현재 HTML과 CSS에 대한 기술 수준은 어느 정도인가요?
> 이 부분을 좀 더 파악하면 더 맞춤형으로 답변을 드릴 수 있을 것 같습니다. 🙂
솔직하게 말하자면, 저는 초보 열성팬에 불과합니다. 고등학교 시절 GWBASIC과 Turbo Pascal로 프로그래밍을 배운 적이 있고, HTML과 CSS를 배우기 위해 앱을 활용하여 몇 가지 성공적인 결과를 얻었습니다. 하지만 고급 수준에는 아직 미치지 못합니다.
예를 들어, 햄버거 메뉴에서 특정 카테고리를 숨기는 코드 예시를 누군가가 공유한 적이 있습니다. 잘 작동했지만, 숨기고 싶은 모든 카테고리를 숨기려면 코드가 너무 많았습니다. 이 시기는 테마 구성 요소인 "Category Hider"가 나오기 전이었고, 저는 모든 하위 카테고리를 숨기는 옵션이 있으면 좋겠다는 아이디어를 제안한 적이 있습니다. 그러자 커뮤니티 멤버가 모든 하위 카테고리를 숨기는 1~2줄짜리 코드를 공유해 주었습니다. ㅋㅋ
그것은 제가 하나하나 개별적으로 타겟팅하여 숨기는 것보다 훨씬 효율적이었습니다. 😉
그런데 최근에는 Welcome Link 배너를 수정하는 데 소소한 성공을 거두었습니다. 제 기억이 맞다면, Modern Category boxes의 settings.yml과 비교하여 첫 번째 설정을 목록 카테고리를 타겟팅하는 설정으로 교체한 것입니다(발견 카테고리가 아닌). 하지만 설정이 실제로 적용되는 위치를 확인하기 위해 여전히 몇 가지 파일을 비교해 봐야 할 것 같습니다. 첫 번째 설정에 카테고리를 추가할 수는 있지만, 아직은 제대로 작동하지 않는 것 같습니다.
진정으로 이해력과 인식을 발전시키기 위해서는 더 많이 읽고, 모바일 대신 더 나은 IDE를 사용해야 한다는 것을 압니다. 도달할 수 있을 것입니다. 필요한 것은 이를 위한 겸손함과 집중력뿐입니다.
이 점에 대해 정말 감사합니다. 이 훌륭하고 이해심이 깊은 커뮤니티 덕분에, 도움을 요청할 때마다 많은 사람들이 주지 않을 수준의 인내심을 가지고 제가 필요한 지침을 자주 제공해 주었기 때문입니다.
코드를 공부하고 시간을 들여 노력하면 반드시 도달할 수 있을 것입니다. 저는 그렇지 않으면 안 될 정도로 고집이 센 사람입니다.
저는 Linux를 사용하며, 작업을 더 원활하게 처리하기 위해 데스크톱 환경을 설정했습니다. 또한 데스크톱과 모바일에서 디자인이 어떻게 보이는지 확인하여 균형 잡힌 디자인을 만들어야 합니다. 저는 항상 새로운 것을 배우고 있습니다. Air 테마를 기반으로 하고 있는데, 이는 훌륭한 시작점이 되기 때문입니다.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2월 24, 2023, 12:20오전 UTC](https://meta.discourse.org/t/toolbar-under-site-header-per-category/252638/15 "2023-02-24T00:20:53Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.