Discourse 카테고리 헤더 테마 컴포넌트

이 테마 컴포넌트는 디스코urs 카테고리 헤더에 다양한 기능을 제공합니다.

‘standard’ 디스코urs 카테고리 헤더는 각 카테고리 페이지 상단, 내비게이션 링크와 토픽 목록 위에 표시됩니다. 일반적으로 카테고리 설정에 카테고리 로고 이미지가 업로드된 경우에만 표시됩니다. 헤더에는 로고와 ‘About the.. category’ 토픽의 첫 번째 단락에서 가져온 카테고리의 짧은 설명이 표시됩니다.

이 테마 컴포넌트가 제공하는 기능

카테고리 헤더는 이제 기본적으로 모든 카테고리에 표시됩니다. 이제 로고(설정된 경우)와 카테고리 설명 외에도 카테고리 이름이 포함됩니다. 또한 로고 배경 이미지를 포함할 수 있으며, 카테고리 색상 설정을 사용하여 ‘box’ 또는 ‘banner’ 스타일로 스타일링할 수 있습니다. 테마 설정에서 다양한 설정 옵션을 사용할 수 있습니다.

테마 설정

  • 카테고리 이름 표시: 헤더에 카테고리 이름을 표시합니다
  • 카테고리 설명 표시: 카테고리 설명 텍스트(“About this category” 토픽의 첫 번째 단락)를 표시합니다
  • 설명 텍스트 크기: 카테고리 설명 내 텍스트 크기
  • 텍스트 정렬: 카테고리 헤더 내 텍스트 정렬
  • 하위 카테고리 헤더 표시: 하위 카테고리 헤더를 표시합니다
  • 상위 카테고리 이름 표시: 하위 카테고리 헤더에 상위 카테고리 이름을 접두사로 표시합니다(이는 상위 카테고리 페이지로의 브레드크럼 링크로 작동합니다)
  • 잠금 아이콘 표시: 권한으로 보호된 카테고리에 잠금 아이콘을 표시합니다
  • 카테고리 로고 표시: 헤더 내에 카테고리 로고 이미지를 표시합니다
  • 상위 카테고리 로고 표시: 하위 카테고리 로고가 설정되지 않은 경우 상위 카테고리 로고를 표시합니다
  • 사이트 로고 표시: 카테고리 로고가 설정되지 않은 경우 작은 사이트 로고를 표시합니다
  • 로고 위치: 박스 내 로고 위치
    – 'left’와 'right’는 로고를 텍스트와 인라인으로 표시합니다.
    – 'top’은 로고를 텍스트와 정렬되어 위에 표시합니다
  • 로고 크기: 헤더 내 로고 위치.
    – Small은 하위 카테고리 박스 로고와 유사하게 높이가 50px입니다.
    – Standard는 높이가 150px입니다.
    – Original은 업로드된 이미지의 원래 크기입니다
  • 헤더 스타일: 헤더 스타일을 다음 중 하나로 설정합니다:
    – Box: 카테고리 헤더를 표준 디스코urs 박스와 동일한 스타일로 표시합니다
    – Banner: 헤더 배경을 카테고리 배경색으로, 텍스트를 전경색으로 설정합니다
    – None: 테두리나 배경 스타일링이 없습니다
  • 헤더 배경 이미지: 카테고리 배경 이미지를 업로드한 경우 적용됩니다
    – ‘contain’, ‘cover’, 'resize’는 배경을 헤더 내에 표시합니다.
    – 'outside’는 디스코urs 기본값으로, 헤더 외부, 즉 전체 페이지 위에 표시합니다.
  • 모바일 표시: 모바일 기기에서 카테고리 헤더를 표시합니다
  • 모바일 정렬 강제: 로고-텍스트의 모바일 정렬을 헤더 상단 중앙으로 강제합니다
  • 카테고리 설명이 없으면 숨김: 카테고리 설명이 설정되지 않은 경우 헤더를 숨깁니다
  • 카테고리 예외 숨김: 이 카테고리들은 헤더가 표시되지 않습니다

테마 컴포넌트 설치

:hammer_and_wrench: Git 저장소: https://github.com/naidihr/discourse-category-headers

:thinking: 테마 또는 테마 컴포넌트를 설치하는 방법?

크레딧

훌륭한 디스코urs 테마 개발자 가이드를 작성해 주신 @Johani님께 감사드립니다.
이 테마 컴포넌트는 @awesomerobot의 디스코urs 카테고리 배너 테마를 포함한 다른 테마에서 영감을 받았습니다.

예시

박스 스타일: 카테고리 헤더가 하위 카테고리 박스와 동일한 스타일로 표시됩니다

하위 카테고리: 하위 카테고리에 로고가 없지만 상위 카테고리 로고를 상속하도록 설정되어 있습니다. 상위 카테고리 이름도 브레드크럼 링크로 표시되도록 설정되어 있습니다.

하위 카테고리에 자체 로고가 있는 경우 대신 해당 로고가 표시됩니다.

다른 텍스트와 아이콘 정렬을 보여주는 모바일 뷰.

텍스트 크기 설정.



정렬 옵션 예시: 텍스트 중앙 정렬, 로고 오른쪽.

배너 스타일: 카테고리 배경색과 전경색을 사용합니다

배경 이미지: 카테고리 배경 이미지를 사용합니다

83개의 좋아요

다양한 옵션 덕분에 정말 유연하고, 보기에도 좋습니다!

21개의 좋아요

정말 멋진 작업입니다! :clinking_beer_mugs::smiling_face_with_sunglasses::+1:

5개의 좋아요

이것은 훌륭해 보입니다.

3개의 좋아요

Rhidian, 공유해 주신 스크린샷에서 그리드 형식으로 카테고리가 표시되도록 설정하신 구성 설정을 공유해 주실 수 있을까요? (아래에 링크를 붙여넣었습니다)

해당 테마 구성 요소를 설치했는데, 각 카테고리 페이지 상단에 박스 헤더만 표시되고 있습니다. 감사합니다!

3개의 좋아요

사실, 제가 해결 방법을 찾았어요. :slight_smile: 설정에서 다음 항목이 빠져 있었습니다:

Screen Shot 2020-07-08 at 1.23.35 PM

5개의 좋아요

좋아요 @labrumfield :grin:. 답변까지 올려주셔서 감사합니다 - 다른 분들에게도 도움이 될 것 같습니다. 테마 컴포넌트가 잘 작동하시길 바랍니다.

1개의 좋아요

새 테마에서 이 ‘하위 카테고리 포함 상자’ 설정을 게시하지 않고 미리 보기할 수 있는 방법이 있는지 혹시 알고 계신가요?

‘미리 보기’가 정확히 무엇을 의미하는지 잘 모르겠습니다. 커스터마이즈 관리자 설정에서 테마와 테마 구성 요소를 미리 볼 수 있습니다.

원래라면 ‘하위 카테고리가 있는 박스’ 설정을 게시하지 않고 미리 확인해 보고 싶습니다. 아니면 이 설정을 다른 테마나 테마 구성 요소가 아닌 내 테마 구성 요소에만 연결하는 방법이 있는지 궁금합니다.

가능하지 않을 것 같아서 혹시 아이디어가 있는 분이 계실지 확인해 보려 합니다. 감사합니다!

하위 카테고리 설정이 있는 상자들은 이 컴포넌트의 일부가 아닙니다. 이는 디스코urs 카테고리 설정입니다.

이를 '미리보기’할 수는 없지만, 잠깐 활성화해서 어떤 모습인지 확인할 수는 있습니다. 카테고리 설정은 하위 카테고리를 행(row) 또는 박스(box) 형태로 표시하도록 하는 것입니다.

2개의 좋아요

안녕하세요,

카테고리 설정을 변경했는데, 카테고리 헤더가 조금 엉망이 되었습니다. (이미지 참조)

변경된 설정은 "Boxes"에서 "Boxes with Featured Topics"로 변경된 "Subcategory List Style"입니다. 다른 설정은 변경하지 않았다고 생각합니다. 배너가 왼쪽 상단 박스가 아니라 상단 전체를 가로지르도록 다시 변경하는 방법이 있을까요?

또한, 설정을 다시 "Boxes"로 변경해도 원래대로 돌아가지 않습니다.

정말 감사합니다. 정말, 정말, 정말 멋진 컴포넌트입니다.

도전을 해보려고 유튜브 영상과 사운드클라우드 팟캐스트를 넣어봤는데, 불행히도 카테고리 박스에 표시되지 않았습니다.

이미지와/또는 영상과/또는 오디오 중에서 선택할 수 있다면, 카테고리 소개를 위해 정말 훌륭한 방법이 될 것 같습니다. 이미지 대신 각 카테고리에 짧은 영상 인트로를 만드는 거죠. 이렇게 하면 잠재적인 회원들이 짧은 텍스트로 개요를 파악하고, 카테고리 소개 영상을 볼 수 있으며, 선호도에 따라 오디오 버전이나 팟캐스트 인트로를 들을 수도 있습니다.

하지만 귀하의 노력과 기여에 진심으로 감사드립니다.

1개의 좋아요

배너를 반응형으로 만들려면 어떤 치수와 옵션이 가장 좋을까요? 다른 컴포넌트를 확인해 봐야 할 수도 있겠네요.

좋은 디자인으로 카테고리 정보를 표시하면 정말 좋을 것 같습니다.

이 모듈을 만들어 주셔서 감사합니다. 정말 훌륭합니다.

1개의 좋아요

배너는 표준 디스코스 반응형 템플릿을 사용하므로, 기기에 자동으로 맞춰 크기가 조절됩니다.

1개의 좋아요

자동으로 설정된 값이 데스크톱과 모바일 기기에서 전체 배너 너비에 적합하지 않다는 것을 확인했습니다.

이와 관련된 예시가 있을까요? 미디어 쿼리를 사용해 CSS로 직접 처리할 수도 있겠지만, 모두에게 유용할 수 있으니요. 아니면 제 설정에서 놓치고 있는 부분이 있는 걸 수도 있고요.

답변 주셔서 감사합니다, Rhidian.

안녕하세요,

귀사의 훌륭한 테마 컴포넌트를 사용 중인데, 어떤 설정을 변경해도 레이아웃에 변화가 없습니다. 설명이 표시되지 않고, 로고를 위, 왼쪽, 오른쪽으로 이동해도 그 효과가 화면에 반영되지 않습니다.

무엇을 놓치고 있는지 알려주시면 감사하겠습니다.

이 주제를 아직 모니터링하는 사람이 있나요, 아니면 이 테마 컴포넌트는 더 이상 유지 관리되지 않는 건가요?

해당 컴포넌트에는 변경 사항이 없습니다. 이러한 경우 다른 컴포넌트가 해당 컴포넌트와 상호작용하고 있을 가능성이 높습니다. 원인을 파악할 수 있는지 확인하기 위해 컴포넌트를 하나씩 비활성화해 보시는 것을 권장합니다. 원인을 찾게 되면 알려 주십시오.

2개의 좋아요

카테고리 설명에 있는 링크가 component.css의 CSS 규칙 a,a:visited {color: inherit;} 때문에 일반 코드처럼 스타일이 적용되고 있습니다.

이것이 의도된 결과인가요?