Discourse 아이콘

:discourse2: 요약 Discourse Icon을 사용하면 게시물에서 SVG 아이콘 하위 집합의 아이콘을 사용할 수 있습니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 리포지토리 링크 https://github.com/discourse/discourse-icon
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

기능

사용법:

[wrap=icon id=square][/wrap]

예시:
이것은 아이콘이고 이것은 아이콘입니다.

이것은 [wrap=icon id=far-square][/wrap] 아이콘이고 이것은 [wrap=icon id=pencil][/wrap] 아이콘입니다.

참고: 아이콘이 표시되지 않는다면 하위 집합에 해당 아이콘이 없는 것입니다. 관리자라면 사이트 설정의 svg icon subset에서 추가할 수 있습니다.


:discourse2: 우리가 호스팅을 하고 계신가요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

31개의 좋아요

Awesome! This is iconic!

(meta has many many themes, but luckily thanks to @kris.kotlarek we have an add to all themes button… got to sort out progress there, cause it takes a while to do its magic)

13개의 좋아요

Yes didnt want to add to all for now, as I just finished coding it :grin: but will do now

Edit: oh already done

10개의 좋아요

Thanks, that’s super fun! :sunglasses:

I never got into BB script tags, nor have I hand-coded FontAwesome, so the practice of using an empty tag pair has always seemed strange to me. Is that by popular convention, or is there a webcraft reason for using tag pairs? Also, can they have stuff between them, does that affect the text?

3개의 좋아요

There are multiple causes here.

First when I wrote the wrap BBCode feature, @sam explicitly asked to me support 3 formats:

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap] 

This is done to be consistent with our existing BBCode usage in Discourse.

I could have a better syntax as: [icon=times] but then it would have to be a plugin and not a theme component.

As an experimentation, I think it’s fine as it is today, and if people were to use it a lot, we could think of having a plugin do this with a more concise syntax.

Another idea I have had is to add an API to add autocompletes symbol in the composer just like we have fore users/categories/emojis… But I’m afraid this would be a nightmare with multiple components choosing their own symbol…

5개의 좋아요

Oh! I need to add support for another bbcode and those) thought that I’d use this as a starting point, but you’re saying that the wrap stuff is handled in core, which explains why I can’t find how it’s handled by your theme component.

My current solution is to use the linked words component and an ugly regex, but I’m still struggling to add the necessary classes to the links.

3개의 좋아요

Yes read this topic to know more:

4개의 좋아요

Right I’ve looked at it a dozen times. And printed out the code for your component and stared at it for hours, trying to understand if the degree to which it’s javascript or ember that I don’t understand. I can’t add a [foo] tag without a plugin? Or can I some how replace wrap in your code with foo to cover my new bbcode?

1개의 좋아요

No you can’t. Because part of it is server side. If you want your own custom BBCode you will have to write a plugin and look at how wrap is implemented for example:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

5개의 좋아요

Thanks! It’s starting to make sense. I’ve not had this much trouble learning a new language since C++ and objective Pascal in 1990.

My current regex hack almost works. I’ll need to decide whether to go the plugin route or stick with my hack (and figure out how to add the classes).

At least now I understand why I can’t find that wrap in the theme component!

3개의 좋아요

I can think of a few possible syntax layouts to add to the wrap plugin for this:

[wrap=foo /]
[wrap/=foo]

(mimicing XML’s self-closing tags) but those are both fairly ugly :confused:

Anyone got amazing ideas for something that looks okay?

3개의 좋아요

yeh not a big fan of these :confused:

6개의 좋아요

큰 버그를 발견했습니다…

아이콘 랩을 사용한 후 해당 텍스트를 강조하여 인용하면, 결과 이미지가 엄청나게 커집니다:

  • 게시물의 문장 내에 아이콘 랩을 사용합니다. 예: 이것은 아이콘입니다 [wrap=icon id=far-check-square][/wrap]
  • 관련 텍스트를 강조한 뒤 '인용’을 선택합니다.
  • 인용된 발췌문에서 아이콘이 엄청나게 커집니다.

강조 인용 시 구문이 다음과 같이 보입니다:

[quote="JammyDodger, post:1, topic:294, full:true"]
이것은 아이콘입니다 ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

이것은 거대해져 버리는 답변입니다

다만, 포맷 막대의 말풍선 아이콘을 사용하여 인용하는 경우에는 문제가 없습니다.

4개의 좋아요

인용 아이콘을 강조 표시하는 방법은 무엇인가요? 제 테스트 사이트에서는 해당 아이콘이 건너뛰어집니다.

잘 모르겠어요. 그냥 마우스만 쓰고 있습니다.

어떤 브라우저를 사용하고 계신가요?

마우스로 Chrome과 Firefox에서 테스트해 보았지만, 아이콘을 선택할 수 없었습니다. :thinking:


수정:

현재 서브셋에 없는 아이콘을 감싸면, 대신 SVG 이미지가 생성됩니다.
그 후, 이를 인용할 수 있습니다.

2개의 좋아요

예시를 제공해 주실 수 있나요? 스크린샷에는 체크된 체크박스가 표시되어 있지만, 제 테스트 인스턴스에서 이를 선택하는 데 문제가 없었습니다(아마도 Discourse에서 사용되지 않는 x-ray 같은 다른 아이콘도 마찬가지입니다).

2개의 좋아요

문제를 파악했습니다. 해당 컴포넌트는 d-wrap 클래스가 있는 래퍼가 있는지 확인하여 검색을 수행합니다. 그러나 제공된 아이콘이 서브셋에 포함되지 않으면 래퍼가 없으며, 대신 SVG로 이미지가 생성됩니다.

예를 들어:

SVG, 서브셋에 포함된 아이콘

SVG로 생성된 이미지, 서브셋에 포함되지 않은 아이콘

이미지를 인용하면 래퍼가 없기 때문에(그리고 이미지는 마크다운으로 변환되어 클래스가 없는 이미지가 됨) 컴포넌트는 아무 동작도 하지 않습니다.

1개의 좋아요

이는 테마에서 사용할 수 있는 settings.ymlsvg_icons 필드가 있어야 한다는 뜻인가요? 아니면 활성화된 테마 컴포넌트 중 어디에든 존재하는 svg_icons 필드를 사용할 수도 있나요? 만약 후자라면, 이 필드를 해당 테마 컴포넌트에 추가하는 것이 합리적인가요?

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

제 경험상 SVG 아이콘은 <img /> 태그로 변환되며, 색상 스키마가 변경될 때 currentColor를 상속받지 못합니다:

예시 단락을 비교해 보세요:

2개의 좋아요

다크 모드에서 렌더링을 개선할 수 있을까요?

인터페이스와 동일한 색상을 적용해 주셨으면 좋겠습니다:

3개의 좋아요