사용법:
[wrap=icon id=square][/wrap]
예시:
이것은 [wrap=icon id=far-square][/wrap] 아이콘이고 이것은 [wrap=icon id=pencil][/wrap] 아이콘입니다.
참고: 아이콘이 표시되지 않는다면 하위 집합에 해당 아이콘이 없는 것입니다. 관리자라면 사이트 설정의 svg icon subset에서 추가할 수 있습니다.
우리가 호스팅을 하고 계신가요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.
31개의 좋아요
sam
3월 5, 2020, 7:16오전
3
대단해요! 정말 상징적인 순간이에요!
(메타에는 테마가 정말 많지만, 다행히도 @kris.kotlarek 덕분에 모든 테마에 추가하는 버튼이 있습니다… 진행 상황을 정리해야 해요. 마법이 걸리는 데 시간이 좀 걸리거든요)
13개의 좋아요
j.jaffeux
3월 5, 2020, 7:23오전
4
네, 지금은 아직 전부 추가하고 싶지 않아서요. 방금 코딩을 마쳤거든요
수정: 아, 이미 끝냈네요
10개의 좋아요
maiki
3월 5, 2020, 6:31오후
5
고마워요, 정말 재미있네요!
저는 BB 스크립트 태그에 익숙하지도 않고, FontAwesome를 직접 코드로 작성해 본 적도 없어서 빈 태그 쌍을 사용하는 관행이 항상 이상하게 느껴졌어요. 그게 일반적인 관례인가요, 아니면 태그 쌍을 사용하는 데 웹 개발상의 이유가 있나요? 그리고 태그 사이에 내용을 넣을 수 있나요? 그렇게 하면 텍스트에 영향을 미치나요?
3개의 좋아요
j.jaffeux
3월 7, 2020, 12:20오후
6
여기에는 여러 가지 원인이 있습니다.
먼저, wrap BBCode 기능을 만들었을 때 @sam이 3가지 형식을 지원해 달라고 명시적으로 요청했습니다:
[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap]
이는 Discourse에서 기존에 사용 중인 BBCode 사용 방식과 일관성을 유지하기 위한 것입니다.
[icon=times]와 같은 더 나은 문법을 사용할 수도 있었지만, 그렇게 했다면 테마 컴포넌트가 아닌 플러그인으로 구현해야 했습니다.
실험적인 관점에서 현재 상태가 문제없다고 생각하며, 사람들이 이를 많이 사용하게 된다면 더 간결한 문법으로 이 기능을 수행하는 플러그인을 고려해 볼 수 있을 것입니다.
또 다른 아이디어는 사용자/카테고리/이모지처럼 컴포저에서 자동완성 기호를 추가할 수 있는 API를 제공하는 것입니다. 하지만 여러 컴포넌트가 각자 원하는 기호를 선택하게 되면 관리가 악몽이 될까 봐 걱정됩니다…
5개의 좋아요
pfaffman
3월 7, 2020, 12:26오후
7
오! 다른 bbcode에 대한 지원도 추가해야 하는데, 처음에는 이걸 시작점으로 사용하려고 했었습니다. 하지만 래핑 관련 처리는 코어에서 이루어진다고 하셨는데, 그게 제 테마 컴포넌트에서 어떻게 처리되는지 찾을 수 없는 이유를 설명해 주네요.
현재 제 해결책은 링크된 단어 컴포넌트와 보기 흉한 정규식을 사용하는 것입니다. 하지만 여전히 링크에 필요한 클래스를 추가하는 데 어려움을 겪고 있습니다.
3개의 좋아요
j.jaffeux
3월 7, 2020, 12:28오후
8
네, 더 자세한 내용은 아래 주제를 참고해 주세요:
I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin.
// wrapped in div.d-wrap
[wrap=baz foo=bar]Content[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
Content
[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
[/wrap]
// this one will be rendered as a span.d-wrap instead of a div.d-wrap
a [wrap=baz]Content[/wrap] b
The name of the component w…
4개의 좋아요
pfaffman
3월 7, 2020, 12:34오후
9
맞아요, 열 번 넘게 살펴봤어요. 그리고 컴포넌트 코드를 출력해서 몇 시간 동안 뚫어지게 들여다보며, 제가 이해하지 못하는 부분이 JavaScript 때문인지 Ember 때문인지, 어느 정도까지 그런 건지 파악하려고 했어요. 플러그인 없이 [foo] 태그를 추가할 수 없나요? 아니면 제 코드에서 wrap을 foo로 대체해서 새로운 bbcode를 처리할 수 있는 방법이 있을까요?
1개의 좋아요
j.jaffeux
3월 7, 2020, 12:36오후
10
5개의 좋아요
pfaffman
3월 7, 2020, 12:43오후
11
감사합니다! 이제 조금씩 이해가 가기 시작합니다. 1990년에 C++과 Objective Pascal을 배울 때 이후로 이 정도로 고생하면서 새로운 언어를 배워본 적이 없네요.
지금 제가 만든 정규식 해킹이 거의 작동합니다. 플러그인 방식으로 갈지, 아니면 제 해킹 방식을 유지할지(그리고 클래스를 추가하는 방법을 알아내야 합니다) 결정해야 할 것 같습니다.
적어도 이제 왜 테마 컴포넌트에서 그 래프를 찾을 수 없었는지 이해할 수 있게 됐습니다!
3개의 좋아요
riking
3월 9, 2020, 10:03오후
12
이 기능을 래핑(wrap) 플러그인에 추가하기 위한 몇 가지 가능한 문법 레이아웃을 생각해 볼 수 있습니다:
[wrap=foo /]
[wrap/=foo]
(XML의 셀프 클로징 태그를 모방한 형태)인데, 둘 다 꽤 보기 안 좋습니다
보기에도 괜찮은 멋진 아이디어가 있는 분 계신가요?
3개의 좋아요
큰 버그를 발견했습니다…
아이콘 랩을 사용한 후 해당 텍스트를 강조하여 인용하면, 결과 이미지가 엄청나게 커집니다:
게시물의 문장 내에 아이콘 랩을 사용합니다. 예: 이것은 아이콘입니다 [wrap=icon id=far-check-square][/wrap]
관련 텍스트를 강조한 뒤 '인용’을 선택합니다.
인용된 발췌문에서 아이콘이 엄청나게 커집니다.
강조 인용 시 구문이 다음과 같이 보입니다:
[quote="JammyDodger, post:1, topic:294, full:true"]
이것은 아이콘입니다 
[/quote]
이것은 거대해져 버리는 답변입니다
다만, 포맷 막대의 말풍선 아이콘을 사용하여 인용하는 경우에는 문제가 없습니다.
4개의 좋아요
인용 아이콘을 강조 표시하는 방법은 무엇인가요? 제 테스트 사이트에서는 해당 아이콘이 건너뛰어집니다.
잘 모르겠어요. 그냥 마우스만 쓰고 있습니다.
어떤 브라우저를 사용하고 계신가요?
마우스로 Chrome과 Firefox에서 테스트해 보았지만, 아이콘을 선택할 수 없었습니다.
수정:
현재 서브셋에 없는 아이콘을 감싸면, 대신 SVG 이미지가 생성됩니다.
2개의 좋아요
Canapin
4월 24, 2023, 2:55오후
20
예시를 제공해 주실 수 있나요? 스크린샷에는 체크된 체크박스가 표시되어 있지만, 제 테스트 인스턴스에서 이를 선택하는 데 문제가 없었습니다(아마도 Discourse에서 사용되지 않는 x-ray 같은 다른 아이콘도 마찬가지입니다).
2개의 좋아요
문제를 파악했습니다. 해당 컴포넌트는 d-wrap 클래스가 있는 래퍼가 있는지 확인하여 검색을 수행합니다. 그러나 제공된 아이콘이 서브셋에 포함되지 않으면 래퍼가 없으며, 대신 SVG로 이미지가 생성됩니다.
예를 들어:
SVG, 서브셋에 포함된 아이콘
SVG로 생성된 이미지, 서브셋에 포함되지 않은 아이콘
이미지를 인용하면 래퍼가 없기 때문에(그리고 이미지는 마크다운으로 변환되어 클래스가 없는 이미지가 됨) 컴포넌트는 아무 동작도 하지 않습니다.
1개의 좋아요
gormus
11월 7, 2023, 6:44오후
22
이는 테마에서 사용할 수 있는 settings.yml에 svg_icons 필드가 있어야 한다는 뜻인가요? 아니면 활성화된 테마 컴포넌트 중 어디에든 존재하는 svg_icons 필드를 사용할 수도 있나요? 만약 후자라면, 이 필드를 해당 테마 컴포넌트에 추가하는 것이 합리적인가요?
svg_icons:
default: ''
type: 'list'
list_type: 'compact'
제 경험상 SVG 아이콘은 <img /> 태그로 변환되며, 색상 스키마가 변경될 때 currentColor를 상속받지 못합니다:
예시 단락을 비교해 보세요:
2개의 좋아요
thoka
12월 13, 2024, 5:55오전
23
다크 모드에서 렌더링을 개선할 수 있을까요?
인터페이스와 동일한 색상을 적용해 주셨으면 좋겠습니다:
3개의 좋아요
하지만 이제 바로 하겠습니다
