 |
요약 | 이모지에 선택적 변형이나 애니메이션을 추가합니다. |
 |
미리보기 | theme-creator.discourse.org에서 미리보기 |
 |
저장소 링크 | https://github.com/arkshine/discourse-emoji-fluff |
 |
디스코urs 테마를 처음 사용하시나요? | 디스코urs 테마 사용 입문가이드 |
이 테마 컴포넌트 설치
이 컴포넌트는 2024-11-26T23:00:00Z 기준으로 최신 버전의 디스코urs가 필요합니다. [1]
설명
Emoji Fluff는 사용자가 게시글에 거울 반전되거나 애니메이션이 적용된 이모지를 사용할 수 있게 합니다.
사용자가 다음과 같은 화려한 이모지 효과를 게시할 수 있습니다:
이모지 자동완성 팝업, 이모지 피커, 또는 이모지 쇼트코드 뒤에 키워드를 직접 추가하여 이러한 장식 효과를 선택할 수 있습니다:
예시: :bike:f-slide , :smile:f-bounce
수평 및 수직 플립은 다른 장식 효과와 함께 사용할 수 있습니다.
예시:
:horse:f-slide,flip::spider:f-float,flip_v:
스크린샷
사용 가능한 이모지 플러프
이모지에 플러프를 추가하는 방법
이모지 자동완성 팝업에서
이모지 피커에서
플러프 접미사를 직접 입력하여
기능
-
수평 또는 수직으로 거울 반전된 이모지
-
애니메이션 이모지 (바운스, 회전, 펄스 등)
-
사용자가 사용할 수 있는 이모지 장식을 선택하는 설정
-
자동완성 또는 이모지 피커에 장식 선택자를 삽입할지 선택하는 설정.
-
관리자가 새로운 플러프를 생성하도록 허용
설정
| 설정 | 설명 |
|---|---|
| enabled | 컴포넌트 기능을 켜거나 끕니다. 기본값: true비활성화하면 이모지 장식이 적용되지 않습니다. 게시글에 자세한 내용은 토픽의 이모지 장식 되돌리기를 참고하세요. |
| allow decorations | 허용된 장식 목록. 기본값: flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray |
| allow selector in | 플러프 선택자가 사용 가능한 위치. 기본값: bothnone – 선택자를 비활성화합니다.both – 자동완성과 이모지 피커 모두에서 선택자를 활성화합니다.autocomplete – 자동완성에서만 선택자를 활성화합니다.emoji-picker – 이모지 피커에서만 선택자를 활성화합니다. |
spin:
또한, 테마 컴포넌트 문자열은 설정에서 번역할 수 있습니다.
이모지 장식 되돌리기
컴포넌트를 비활성화하면 이러한 접미사가 남아 있어 다음과 같은 이모지가 됩니다: 
f-spin:
테마 컴포넌트의 제한 사항과 디자인 선택으로 인해, 이러한 장식 효과를 부여하기 위해 이모지에 단순한 접미사를 추가합니다. 플러프 접두사 f-는 이러한 장식을 식별하는 데 도움이 되며, 아래에서 사용할 수 있는 스크립트를 통해 쉽게 제거할 수 있습니다.
rake 작업을 다운로드하고 실행하여 게시글에서 플러프 접미사를 영구적으로 제거할 수 있습니다.
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
rake 작업은 기본적으로 게시글 수정 이력을 생성하지 않습니다. 이 동작을 변경하려면 인수로 false를 추가할 수 있습니다: rake fluff:delete_all[false]
rake 작업을 실행하기 위해 컨테이너에 들어가는 방법에 대한 지침은 Administrative Bulk Operations 을 참고하세요.
이 작업을 실행하기 전에 항상 백업을 만드세요. 원치 않는 문자열이 제거되지 않을 것이라는 보장은 없습니다. 책임 소재는 사용자 본인에게 있으며, 의심이 들면 코드를 검토하세요.
나만의 플러프 만들기
플러프 생성에는 CSS 지식이 필요합니다.
게시글 안의 이모지에 플러프가 추가되면, 해당 이모지는 fluff 클래스가 있는 <span> 태그로 감싸집니다:
<span class="fluff fluff--bounce">
<img src="https://your.discourse.com/images/emoji/twitter/kangaroo.png?v=12" title=":kangaroo:" class="emoji" alt=":kangaroo:" loading="lazy" width="20" height="20" style="aspect-ratio: 20 / 20;">
</span>
새로운 플러프를 추가하려면 테마 또는 새로운 테마 컴포넌트에 사용자 정의 CSS를 추가하세요.
다음은 새로운 플러프 두 가지의 예시입니다:
이모지를 90° 기울이기
.fluff--tilt img {
transform: rotate(90deg);
}
3D 스핀 효과 적용
.fluff--spin3d img {
animation: f-spin3d 2s infinite linear;
}
@keyframes f-spin3d {
0% {
transform: perspective(50em) rotateY(0deg);
filter: brightness(1);
}
50% {
transform: perspective(50em) rotateY(90deg);
filter: brightness(0.85);
}
51% {
transform: perspective(50em) rotateY(91deg);
filter: brightness(1.15);
}
100% {
transform: perspective(50em) rotateY(180deg);
filter: brightness(1);
}
}
그 다음, Emoji Fluff의 허용된 장식에 플러프 접미사를 추가해야 합니다:
이것으로 끝입니다; 이제 사용자에게 새로운 플러프가 사용 가능합니다. 즐기세요!
크레딧
- @Canapin: 원래 아이디어, 이 TC 준비 및 테스트를 위한 전반적인 도움.
정확히 말하면, TC는 10월 30일 이후의 디스코urs 버전이 필요하며, 특히 이모지 피커 지원이 포함된 2024-11-26T23:00:00Z 기준 최신 버전이 필요합니다. 며칠 전 플러그인 아웃렛을 추가해 주신 팀에 감사드립니다! ↩︎
