Discourse 내비게이션 항목 아이콘 / 이모지

:information_source: 요약 내비게이션 항목 앞에 아이콘/이모지 추가
:hammer_and_wrench: 저장소 GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스코ourse 테마를 처음 사용하시나요? 디스코ourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

안녕하세요 :wave:

이 테마 컴포넌트를 사용하면 내비게이션 항목 앞에 아이콘 또는 이모지를 추가할 수 있습니다. 이 테마 컴포넌트는 Discourse Easy 'SVG Icon' and 'Emoji' in CSS 를 기반으로 합니다.

nav item prefix

이 설정은 아이콘과 이모지도 처리할 수 있습니다.

따라야 할 규칙은 다음과 같습니다:

아이콘

내비게이션 항목 앞에 아이콘을 추가하려면:
icon:nav-item:icon-set:icon-name:icon-color

내비게이션 항목 앞에 아이콘을 추가하려면 먼저 icon으로 유형을 정의해야 합니다.

  • nav-item: latest, hot, new, unread, categories 등…
  • icon-set: brands, regular, solid
  • icon-color: currentColor, HEX 또는 색상 변수

예시:
icon:latest:solid:rocket:currentColor
icon:top:regular:star:var(--gold)
icon:unseen:solid:compass:#228C22

icon


이모지

내비게이션 항목 앞에 이모지를 추가하려면:
emoji:nav-item:emoji-set:emoji-name:filter

내비게이션 항목 앞에 이모지를 추가하려면 먼저 emoji로 유형을 정의해야 합니다.

  • nav-item: latest, hot, new, unread, categories 등…
  • emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
  • filter: 라이트 모드에서는 이모지 색상을 검정으로, 다크 모드에서는 흰색으로 만듭니다. 이모지에 마우스를 올리거나 활성화되면 전환 효과와 함께 표시됩니다. (선택 사항)
    emoji-filter

예시:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

데스크톱 내비게이션

emoji

모바일 내비게이션

9개의 좋아요

정말 멋지네요, Don. FontAwesome Pro와 함께 작동할 수 있을지 가능성이 있을까요? 저는 라이트 아이콘을 사용하는데…

1개의 좋아요

네, 가능하다고 생각하지만 안타깝게도 프로 아이콘 세트에 접근할 수 없어요. 아이콘 SVG로 작동하니까 이 파일에 접근할 수 있다면 작동할 거예요. 컴포넌트를 조금 수정해서 이 SVG를 추가해야 해요. 그 다음에 설정에서 사용할 수 있어요. 그리고 또 중요한 건, 웹사이트에서 프로 아이콘 SVG를 법적 사용 가능 여부가 어떤지인데, 이 부분은 제가 확신하지 못하겠어요.

2개의 좋아요

왜 후속 토론이 없나요 :rofl: ? 만드는 주제마다 알림을 받고 싶어요! 용어가 말하듯…대박이에요!

1개의 좋아요

Discourse를 업데이트한 후 모바일 터미널에 아이콘이 표시되지 않아 혼란을 겪고 있습니다. 저와 같은 상황을 겪고 계신 분이 있을까요??

스크린샷을 보면 (좌측 모서리의 햄버거 아이콘을 기준으로 판단했을 때) 데스크톱 뷰로 보입니다. 하지만 제 모바일에서는 해당 컴포넌트가 정상적으로 작동하네요. :thinking:

@sheng_hualuo 님이 말씀하신 새로운 내비게이션(드롭다운)에 동의합니다. 해당 드롭다운이 표시되지 않습니다.

아, 드롭다운에서도 보네요. :thinking:

네, 죄송합니다. 이 테마 컴포넌트와 내비게이션 바를 수정한 다른 컴포넌트들도 이 변경 사항(DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub) 이후 업데이트가 필요합니다. 해결책을 생각해보겠습니다. 모달의 내비게이션 항목은 쉽게 대상 지정할 수 있지만, 선택된 항목에는 불행히도 특정 클래스가 없으며 데스크톱 내비게이션을 컴포넌트에서 제거해야 할 것 같습니다.

4개의 좋아요

안녕하세요 :wave:

이 컴포넌트에 업데이트를 적용했습니다.

  1. 모바일에서 데스크톱 내비게이션 버전을 제거합니다.
  2. 새로운 모바일 내비게이션과의 호환성을 추가합니다.

불행히도 이 섹션에는 특정 내비게이션 항목 클래스가 없어 여기에 추가할 수 없습니다.
Screenshot 2024-08-19 at 19.52.18

2개의 좋아요

수정해 주셔서 정말 감사합니다. 다만 데스크톱 버전 기능이 제거된 점은 매우 죄송합니다. 제 웹사이트와 함께 볼 때 정말 멋져 보였거든요.

2개의 좋아요