안녕하세요,
Discourse 템플릿 오버라이딩을 통해 가능합니다. 하지만 전체 문서를 읽어보시는 것을 권장합니다.
이 경우 네비게이션 바 템플릿을 찾아야 합니다. 모든 템플릿은 여기에서 찾을 수 있습니다.
네비게이션 바는 컴포넌트이므로 components 폴더에서 찾을 수 있습니다. navigation-bar.hbs가 우리가 사용하려는 템플릿입니다.
다음은 데스크톱 뷰에서 네비게이션 바 템플릿입니다.
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
잠깐만요… 네비게이션 바에는 데스크톱 버전으로 변경하려는 모바일 버전이 있다는 것을 알고 있습니다. 템플릿을 자세히 살펴보면 mobile 폴더를 볼 수 있습니다. 이 폴더에는 모바일 버전이 있는 템플릿들이 포함되어 있습니다. 예를 들어 네비게이션 바가 그렇습니다. 따라서 먼저 mobile 폴더로 이동한 후 components로 가서 navigation-bar.hbs를 검색해야 합니다. 이 템플릿을 위에서 붙여넣은 데스크톱 버전으로 오버라이드할 것입니다.
위에서 링크한 문서에서 알 수 있듯이 이렇게 시작해야 합니다:
data-template-name을 사용하여 오버라이드하려는 템플릿을 지정해야 합니다.
이제 라우트가 mobile → components → navigation-bar임을 알고 있습니다.
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
이후 데스크톱 코드를 안에 간단히 붙여넣기만 하면 됩니다:
이제 이 템플릿을 모바일 header 섹션의 컴포넌트에 붙여넣을 수 있습니다. ![]()
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
</script>
사용자 정의 템플릿이 항상 최신 상태인지 확인하십시오. 코어 navigation-bar 템플릿에 변경 사항이 있으면 모든 것이 정상적으로 작동하도록 사용자 정의 템플릿도 업데이트해야 합니다. ![]()
기본 테마에서는 다음과 같이 보입니다. ![]()
모바일에 맞게 일부 CSS 스타일링이 필요할 수 있습니다. 하지만 이는 사용하는 테마에 따라 달라집니다.
예를 들어, 기본 테마에는 숨기고 싶은 테두리가 있습니다.
Mobile / CSS 섹션
.list-controls .nav-pills > li {
border: none;
}

