태그 스타일 도구

:information_source: 요약 Tag Style Tool을 사용하면 태그의 외관을 사용자 지정할 수 있습니다.
:eyeglasses: 미리 보기 입력 예정
:hammer_and_wrench: 저장소 Github의 TagStyleTool
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

소개

TagStyleTool은 Discourse에서 태그의 외관을 사용자 지정할 수 있도록 기존 3가지 컴포넌트에서 영감을 받아 제작된 버전입니다!

v0.2
시각적 스타일 빌더 추가 - 아이콘 검색, 색상 선택, 카테고리 가져오기 기능 지원!

기능:

  • 호환성 문제 해결 (특히 대시 제거와 태그 아이콘 사이의 문제)
  • 특정 태그에 Font Awesome 아이콘 할당.
  • 정의되지 않은 태그에 기본 태그 아이콘을 적용하는 옵션 추가.
  • 상속 역전 (예: 라벨 또는 텍스트 색상)
  • 라벨 색상 설정을 사용할 때 텍스트 색상의 대비 색상 문제 해결.
  • 기존 태그 스타일 중에서 선택할 수 있는 기능 허용.
  • 기본 태그 또는 대시 기능을 비활성화할 수 있는 설정의 다양성.
  • 설정 형식은 Tag Icons와 동일하며(새로운 설정 추가), 쉽게 이식/적용할 수 있습니다.

v0.2 기준

  • 전체 카테고리에 적용하는 옵션 구현. (이것에는 단점이 있지만, 가능하다고 생각하며 추가 유지보수가 필요합니다)
  • FontAwesome 데이터베이스에서 완벽한 아이콘을 검색하세요!
  • 시각적 색상 선택기에서 좋아하는 색상을 선택하세요.

추가 예정:

  • 기본 태그 색상 :sweat_smile: 아이콘 없이 색상만 원하는 경우의 시나리오.
  • 사용자 친화적인 설정 수정

기타:

오래된 것이지만 이번에 처음으로 공개적으로 무언가를 게시합니다. 문제가 있으면 알려주세요!

영감(그리고 일부 경우 형식/설정 등)은 다음 기존 프로젝트에서 직접 채택되었습니다:
Remove Dashes from Tag Names
Tag Icons
Color Tag Style

도움이 되는 리소스
이것들은 이제 모두 컴포넌트에 통합되었습니다
Font Awesome
HTML Color Picker

10개의 좋아요

이거 한번 써볼 거예요! 감사합니다!! 태그 스타일링 컴포넌트를 꽤나 찾아봤는데, 여러 개를 설치해야 해서 번거로울 것 같아서, 다음에 제 세팅을 손볼 기회가 있으면 이걸로 한번 시도해볼게요!

1개의 좋아요

간단히 테스트해 보았습니다. "초보자"의 코멘트 두 가지입니다:

  • FontAwesome 관련해서 조금 헷갈립니다. 무료 아이콘만 해당되는 건가요? 어떤 버전인가요? 모든 아이콘 목록이 어딘가에 있는지요 (아니면 너무 길어서 목록화하기 어려운 건가요)?
  • 색상: RGB에 익숙하지 않은 사용자를 위해 색상 선택기를 제공하려면 얼마나 복잡한가요? :innocent:

하지만 이미 감사드립니다. 괜찮아 보입니다!

길을 잃는 것에 대해 걱정하지 마세요. 제가 도와줄 수 있는 모든 방법으로 기꺼이 도와드리겠습니다. 결국 Discourse의 존재 이유가 바로 그런 거잖아요?

Font Awesome

이 컴포넌트는 현재 Discourse 버전에서 지원하는 현재 버전의 Font Awesome 아이콘을 자동으로 지원해야 합니다. 현재 v6을 지원하는 것으로 알고 있습니다. 모든 아이콘은 여기 Font Awesome에서 찾을 수 있습니다.

질문의 두 번째 부분에 대해서는, 네, 무료입니다. 프리미엄 버전이 있지만, Font Awesome이 이미 코어에 포함되어 있기 때문에 Discourse와 어떻게 연동되는지는 정확히 알지 못합니다.

색상 선택기 (Color Picker)

구현해 볼 수 있는지 살펴보고 싶지만, 테마 컴포넌트인 관계로 플러그인으로 전환해야 할 정도로 얼마나 많은 작업을 할 수 있을지는 확신할 수 없습니다. 그래도 이 유용한 도구를 사용할 수 있습니다. 색상이 표시되는 “Use HTML 5” 영역을 클릭하면 되며, 이 컴포넌트에는 16진수(hex) 색상을 사용해야 합니다. HTML Color Picker

1개의 좋아요

감사합니다! 사실 설정 화면에서 그 두 자원에 대한 링크만 있어도 정말 도움이 될 것 같습니다!

1개의 좋아요

요즘에는 색상을 선택하기 위한 네이티브 HTML 컴포넌트가 있습니다.

더 쉽게 사용할 수 있도록 이 컴포넌트를 래핑한 컴포넌트도 제공합니다.

5개의 좋아요

정말 감사합니다!

Chandler Bing Smiling in Friends

음, 좀 진전이 있었습니다. push하기 전에 정리할 몇 가지가 남아 있습니다. 예를 들어, 삽입 로직이 작동하지 않습니다(복제는 작동하긴 하고), 버튼이 사이트 전체에 표시되며, 가장 눈에 띄는 문제는 이미 보셨듯이 버튼이 하단 구석에 위치해 있다는 점입니다.

또한 :eyes: 태그 그룹의 모든 태그에 적용하는 방법도 알아냈습니다.


colorpickdemo

4개의 좋아요

그 스타일 빌더는 정말 강력한 기능이 될 거예요!

:smiley: 배포를 완료했습니다. 문제가 있으면 알려주세요.

3개의 좋아요

빌더가 정말 훌륭합니다! 처음 몇 가지 태그에 사용해보았고, 설정을 저장하기 위해 초록색 체크 버튼을 눌렀더니 태그 스타일 빌더가 사라졌습니다.

페이지를 새로고침해도 버튼이 잠시 나타났다 다시 사라집니다.

빌더에서 제안된 아이콘(예: lock-keyhole)을 태그에 표시하려고 해도 나오지 않습니다. SVG 아이콘 목록에도 추가하고 저장했지만 여전히 문제가 해결되지 않았습니다.

이제 막 즐거움을 선사할 것 같은데, 노고에 감사드립니다. 이 기능이 제 테마의 여러 다른 컴포넌트를 영구적으로 대체해 주었으면 좋겠습니다.

2개의 좋아요

:sweat_smile: 새벽 1~2시에 이 작업을 완료했고, 오전 6시에 게시했으니 몇 가지 실수는 너그럽게 봐주세요.

  • 버튼이 사라지는 문제를 재현할 수 있었습니다. 이 녀석은 정말 고집이 세네요. 해결했다고 생각합니다.
  • Font Awesome 아이콘 관련해서 뭔가 빠뜨린 것 같습니다. 사이트 설정으로 이동하여 SVG Subset 메뉴에서 수동으로 추가해야 합니다. Discourse에서 이미 사용 중이지 않다면 기본적으로 렌더링되지 않습니다. 다만, 이렇게 해도 렌더링이 안 되는 문제가 여전히 남아 있습니다. 이 부분은 더 자세히 살펴보겠습니다.

이 내용은 배포되었습니다.

3개의 좋아요

그랬으면 좋았을 텐데 말이에요.

결국 빌더 버튼이 보이게 하려면 컴포넌트를 삭제하고 다시 설치(두 번 모두)해야 했습니다.

최신 버전에서는 태그 초기 설정 시 버튼이 유지되도록 할 수 있습니다. 새로고침 후에도 유지됩니다. 하지만 테마 및 컴포넌트에서 컴포넌트 편집 화면으로 돌아가면 버튼이 다시 사라져요. 얄미운 버그네요.

아이콘 부분에 대해 좀 더 살펴보겠습니다. 기본 아이콘을 끄는 방법이 있는데, 색상 태그의 태그 아이콘을 없앨 수도 있을까요? 예를 들어 기본 아이콘 세트와 일치하는 경우처럼요. 색상 태그 컴포넌트는 아이콘을 설정할 필요가 없어 깔끔한 느낌을 주어서 좋았는데, 그 느낌을 재현할 수 있다면 저에게는 유용한 기능이 될 것 같아요.

2개의 좋아요

:sweat_smile: 정말 골치 아픈 작은 문제네요.

몇 가지 방법을 시도해 보고 있고, 최신 베타 번들을 보내드렸으니 해당 코드베이스를 기반으로 작업하고 있으므로 문제가 있으면 알려주세요.

이로 인해 몇 가지 문제가 수정되어야 합니다. 예: Tag1,Pencil,NoColor인 경우 Tag1,Pencil만 렌더링되고, 기본값이 사용되면 <Color가 적용되며, True 또는 False 기본값이 사용되고, 그렇지 않으면 색상이 적용되지 않습니다.>라는 방식으로 오버라이드를 폴백하기 위한 할 일 목록을 추가했습니다.

저에게는 훌륭한 학습 과정입니다! :joy:

2개의 좋아요

안녕하세요! 다시 돌아왔는데, Tag Style Builder가 어디에 있는지 아무리 찾아도 모르겠어요?

테마 구성 요소 설정에서 Tag icon list 위쪽에 표시되어야 합니다.

TC가 /customize/components/와 같은 관리자 URL을 찾지만, discourse가 이제 /customize/themes/로 리다이렉트하기 때문에 작동하지 않습니다.

이 문제가 수정될 때까지, 기존 경로는 여전히 작동하며 URL에서 themescomponents로 직접 교체할 수 있습니다:

다음에서:
image
다음으로:
image

그런 다음, 버튼이 나타납니다:

1개의 좋아요

원하시면 PR을 제출해 주세요. 지난 한 달 정도 꽤 바빴지만, 이번 주말에 수정할 수 있습니다. 알려주셔서 감사합니다! PR을 직접 하기가 부담스러우시면, 알려주신 덕분에 더 빠르게 수정할 수 있습니다!

1개의 좋아요

간단한 PR을 하나 올립니다: Add support for /admin/customize/themes/ route - Pull Request #1 - jdc20181/TagStyleTool - GitHub

2개의 좋아요

@stephtara 이 내용을 병합했으니 업데이트해 주세요. 이제 올바른 페이지에 표시됩니다.

2개의 좋아요