핀보드, 단순한 UI 테마

:dizzy: 요약 Pinboard는 단순한 사용자 인터페이스를 갖춘 테마입니다. 단순한 카테고리 목록이나 태그 목록과 같은 평탄한 분류 체계와 잘 어울립니다.
:hammer_and_wrench: 저장소 GitHub - nolosb/discourse-theme-pinboard · GitHub
:open_book: Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가이드

이 테마 설치하기

:woman_factory_worker:t5: 설치 후 설정

이 테마는 몇 가지 추가 구성 요소를 설치합니다. 테마의 외관을 조정하려면 일부 구성 요소의 설정을 변경해야 합니다:

  • 다크/라이트 전환

    • 전환 기능이 작동하려면 테마 설정에서 라이트 색상 스킴을 설정해야 합니다. 그리고 일반 설정(default dark mode color scheme id)에서 다크 색상 스킴을 선택하세요.
    • 헤더에 전환 아이콘을 표시하도록 선택할 수 있습니다. 기본적으로 사이드바 하단에 표시됩니다.
  • Rounded(둥근 모서리)

    • 레이아웃 요소의 모서리를 둥글게 만드는 스타일 구성 요소입니다. 저의 미리보기 사이트에서는 기본 반지름을 10px, 버튼 반지름을 4px으로 설정했습니다.
  • 패널(Panels)

    • 목록 컨테이너를 패널로 렌더링하는 또 다른 스타일 구성 요소입니다. 이 테마에는 패널에 적용되는 그림자 스타일이 정의되어 있으며, 이 --shadow 변수를 사용하여 활성화할 수 있습니다:

    image

:art: 테마 기능

카테고리 또는 태그 중 하나로만 사용

인터페이스에서 태그나 카테고리를 숨기고 둘 중 하나만 사용할 수 있습니다.

사용자 지정 홈페이지

미리보기와 유사한 사용자 지정 홈페이지 레이아웃을 구성할 수 있습니다.

  • 테마 설정에서 custom homepage 옵션을 선택하세요

  • 관리자 설정에서 홈페이지를 선택하세요. 예를 들어, 여기서는 최상위 루트(top-route)로 설정되어 있습니다:

  • 전용 홈페이지 클래스를 추가하려면 이 헬퍼 구성 요소를 설치하세요. 구성 요소 설정에서 홈페이지를 설정하세요:

    image

  • 설치된 패널 구성 요소에서 추천 목록(Featured Lists)에 패널을 렌더링하도록 선택하세요:
    image

  • Featured Lists 구성 요소를 설치하고 아웃렛(outlet) 위치를 discovery-list-container-top으로 설정하세요

36개의 좋아요

정말 멋진 테마네요, 단순함이 좋아요!

12개의 좋아요

잘했어 형.. :heart_eyes:

6개의 좋아요

와! 이게 정말 멋진 미감을 가지고 있네요

6개의 좋아요

테마가 정말 멋져요! 좋은 의미로 미니멀하네요. 사이드바를 이렇게 만든 걸 정말 좋아해요.

훌륭한 작업이었어요 @manuel :+1:

7개의 좋아요

@manuel

여기서 어떤 설정을 놓치고 있는지 알려주세요. 홈 페이지에는 아래에 주제 목록이 표시되는 외부 래퍼가 보입니다. 각 핀 보드별로 표시되길 원하는데 말이죠.

감사합니다.

2개의 좋아요

사용자 인터페이스 덕분에 시간을 크게 절약할 수 있는, 단순하면서도 생산적인 테마입니다.

3개의 좋아요

위에서 설명된 옵션을 확인해 보셨나요?

3개의 좋아요

네. 해당 옵션을 선택했습니다.

3개의 좋아요

또한 'Top Topics’를 홈페이지로 설정해야 합니다. 현재 홈페이지는 카테고리 목록으로 설정되어 있습니다. 이는 해당 테마 설정이 핀보드 목록만 표시하고 그 아래에 있는 콘텐츠를 숨기기 때문입니다. 이 기능은 최상위 경로(top route)에서만 작동합니다. 필요할 경우 Top topics를 상위 주제에 대한 핀보드 목록으로 대체할 수 있습니다. 포럼이 정상적으로 작동하려면 일반적으로 카테고리 목록 또는 최신 주제(latest topics)가 필요합니다.

관리자 설정의 상단 메뉴 목록에서 해당 항목을 첫 번째로 배치하여 상단 페이지를 홈페이지로 설정할 수 있습니다:

3개의 좋아요

@manuel 감사합니다.
이 부분이 빠져 있었네요. 이제 괜찮습니다.

3개의 좋아요

이 테마는 상단 메뉴(최신, 인기 등)를 숨기는 것이 의도된 것인가요? 다시 표시할 방법이 있을까요?

1개의 좋아요

네, 해당 항목들은 숨겨져 있습니다. 이 테마에 대해서는 제 의견이 좀 강합니다. 최신/새로운/읽지 않은 항목은 이미 사이드바에서 사용할 수 있고, 상위는 랜딩 페이지에 사용되고 있기 때문입니다.

테마를 사용하면서 동시에 해당 항목들을 내비게이션 바에 표시하려면, 테마의 스타일 선언을 수동으로 오버라이드해야 합니다.

1개의 좋아요

사이드바에서 최신/새로움/읽지 않음 항목이 보이지 않습니다. 제 인스턴스든, 테스트 사이트든, 이 게시물의 스크린샷에서도 마찬가지입니다. 어디를 봐야 하는지 방향을 잡아주실 수 있나요?

2개의 좋아요

Latest은 기본적으로 사이드바에서 Everything이라고 표시됩니다. 제 스크린샷에서는 All이라고 되어 있습니다.

하지만 네, Unread와 New가 이제 사이드바에 표시되지 않는다는 말은 사실입니다. 이전 햄버거 드롭다운 메뉴에서처럼 사이드바에도 그대로 표시될 거라고 생각했습니다. 제가 잘못 기억하고 있거나, 변경된 것일 수도 있습니다. 사이드바에는 여전히 지속적인 업데이트가 이루어지고 있습니다.

사이드바의 새 콘텐츠에 대한 컨텍스트 정보는 로그인한 사용자에게 새 콘텐츠가 있는 모든 메뉴 항목 뒤에 표시되는 알림 점(notification dots)입니다:

2개의 좋아요

이 테마를 정말 좋아합니다.

어떤 이유에선지 Dark/Light 토글 테마 구성 요소가 헤더에 표시되지 않습니다.

2개의 좋아요

감사합니다 :sunny:

기본 테마에서도 저한테는 안 보여서, 아마 컴포넌트 관련 문제인 것 같습니다.

실제로는 여기 보세요: Dark/Light Mode Toggle - #88 by RGJ 현재 토글은 사용자가 자동 색상 모드 전환을 활성화한 경우에만 표시됩니다.

1개의 좋아요

@manuel 정말, 정말 잘하셨어요. 글자 크기가 의도적으로 이렇게 큰 건가요 (제 기준으로는)?

스크린샷은 15인치 노트북에서 찍은 건데, 비율이 어색해 보이네요.

박스 형태로 목록에 카테고리를 표시하는 대신, 탭형 솔루션을 고려해 보셨나요? 예를 들어 "피드백"을 “핀보드에 오신 것을 환영합니다” 옆에 탭으로 배치하는 방식이요.

:warning: 이 테마의 리팩터링을 방금 푸시했습니다. UI에는 미묘한 변경 사항만 있지만, 테마 코드는 재구성되었고 몇 가지 새로운 컴포넌트가 포함되었습니다.

이전에 테마를 설치했다면, 테마 위에 설정한 컴포넌트와 스타일 선언을 다시 조정해야 합니다. 지금 이 작업을 원하지 않는 경우, v1-branch에서 테마를 가져와 이전 설정을 유지할 수도 있습니다:

참고로 v1의 설치 후 세부 사항은 다음과 같습니다:

테마 기능

  • 카테고리 또는 태그 중 하나만 사용
    인터페이스에서 태그나 카테고리를 숨기고 둘 중 하나만 사용할 수 있습니다.

  • 커스텀 랜딩 페이지
    미리보기와 유사한 커스텀 랜딩 페이지를 만들 수 있습니다.

    • Versatile Showcase 컴포넌트를 설치하고 아웃렛 위치를 discovery-list-container-top으로 설정하세요.
    • 홈페이지를 top 경로로 설정하세요.
    • 테마에서 custom top page 옵션을 선택하세요.

컴포넌트 기능

테마는 몇 가지 추가 컴포넌트를 자동으로 설치합니다:

  • 다크/라이트 토글
    테마 설정에서 라이트 색상 스킴을 설정하세요. 일반 설정에서 다크 색상 스킴을 선택하세요.

  • 헤더 검색

  • 클릭 가능한 주제

  • 태그 스타일
    태그의 색상 스타일을 선택합니다.

4개의 좋아요

완벽한 테마네요, 정말 깔끔해요!

이 테마가 데스크톱용인지 모바일용인지 궁금합니다.

1개의 좋아요