|||
|:discourse2:| Zusammenfassung | Fügt optionale Variationen oder Animationen zu Emojis hinzu.|
|:eyeglasses:| Vorschau | Vorschau auf theme-creator.discourse.org|
|:hammer_and_wrench:| Repository-Link | GitHub - Arkshine/discourse-emoji-fluff|
|:open_book:| Neu bei Discourse-Themes? | Anfängerleitfaden zur Verwendung von Discourse-Themes|
Installieren Sie diese Theme-Komponente
Diese Komponente erfordert eine aktuelle Discourse-Version vom 2024-11-26T23:00:00Z. [1]
Beschreibung
Emoji Fluff ermöglicht es Benutzern, gespiegelte oder animierte Emojis in ihren Beiträgen zu platzieren.
Es ermöglicht Benutzern, ausgefallene Emoji-Arbeiten zu posten, wie zum Beispiel:
Sie können diese Dekorationen aus dem Emoji-Autovervollständigungs-Popup, aus dem Emoji-Picker oder durch Anhängen von Schlüsselwörtern direkt nach dem Emoji-Kurzcode auswählen:
Beispiele: :bike:f-slide , :smile:f-bounce
Horizontale und vertikale Spiegelungen können mit anderen Dekorationen kombiniert werden.
Beispiele:
:horse:f-slide,flip::spider:f-float,flip_v:
Screenshots
Verfügbare Emoji-Fluffs
So fügen Sie einem Emoji einen Fluff hinzu
Aus dem Emoji-Autovervollständigungs-Popup
Aus dem Emoji-Picker
Durch manuelles Eingeben des Fluff-Suffixes
Funktionen
-
Horizontal oder vertikal gespiegelte Emojis
-
Animierte Emojis (Bounce, Rotate, Pulse, etc.)
-
Einstellung, um auszuwählen, welche Emoji-Dekorationen für Benutzer verfügbar sein sollen
-
Einstellung, um einen Dekorationsselektor in der Autovervollständigung oder im Emoji-Picker einzufügen.
-
Ermöglicht Administratoren, neue Fluffs zu erstellen
Einstellungen
| Einstellung | Beschreibung |
|---|---|
| enabled | Aktiviert oder deaktiviert die Funktionalitäten der Komponente. Standardwert: trueDeaktivierung verhindert, dass die Emoji-Dekoration angewendet wird. Dies ist nützlich, wenn Sie die Komponente pausieren oder entfernen möchten, aber den Dekorationscode wie z. B. Weitere Informationen finden Sie unter Zurücksetzen von Emoji-Dekorationen in diesem Thema. |
| allow decorations | Liste der erlaubten Dekorationen. Standardwert: flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray |
| allow selector in | Wo der Fluff-Selektor verfügbar sein soll. Standardwert: bothnone – deaktiviert die Selektoren.both – aktiviert den Selektor in der Autovervollständigung und im Emoji-Picker.autocomplete – aktiviert den Selektor nur in der Autovervollständigung.emoji-picker – aktiviert den Selektor nur im Emoji-Picker. |
spin:
Zusätzlich sind die Zeichenfolgen der Theme-Komponente in den Einstellungen übersetzbar.
Zurücksetzen von Emoji-Dekorationen
Wenn Sie die Komponente deaktivieren, bleiben diese Suffixe erhalten, was zu Emojis wie diesem führt: 
f-spin:
Aufgrund von Einschränkungen und Designentscheidungen der Theme-Komponente fügen wir einfache Suffixe zu Emojis hinzu, um ihnen diese dekorativen Effekte zu verleihen. Das Fluff-Präfix f- hilft bei der Identifizierung dieser Dekorationen, sodass sie mit dem unten verfügbaren Skript leicht entfernt werden können.
Sie können eine Rake-Aufgabe herunterladen und ausführen, um Fluff-Suffixe endgültig aus Beiträgen zu entfernen.
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
Die Rake-Aufgabe erstellt standardmäßig keine Beitragsrevisionen. Sie können false als Argument hinzufügen, um dieses Verhalten zu ändern: rake fluff:delete_all[false]
Lesen Sie Administrative Bulk Operations für Anweisungen zur Eingabe des Containers zur Ausführung der Rake-Aufgabe.
Erstellen Sie immer ein Backup, bevor Sie diese Aufgabe ausführen. Es gibt keine Garantie, dass keine unerwünschten Zeichenfolgen entfernt werden. Verwenden Sie es auf eigene Gefahr und überprüfen Sie den Code, wenn Sie unsicher sind.
Erstellen Ihrer Fluffs
Die Erstellung von Fluffs erfordert CSS-Kenntnisse.
Wenn ein Fluff zu einem Emoji in einem Beitrag hinzugefügt wird, wird das Emoji von einem <span>-Tag mit der Klasse fluff umschlossen:
<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>
Fügen Sie benutzerdefiniertes CSS zu Ihrem Theme oder einer neuen Theme-Komponente hinzu, um neue Fluffs hinzuzufügen.
Hier sind zwei Beispiele für neue Fluffs:
Kippen eines Emojis um 90°
.fluff--tilt img {
transform: rotate(90deg);
}
3D-Spin-Effekt
.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);
}
}
Dann müssen Sie den Fluff-Suffix in den erlaubten Dekorationen von Emoji Fluff hinzufügen:
Das ist alles; Ihre neuen Fluffs sollten jetzt für Benutzer verfügbar sein. Viel Spaß!
Credits
- @Canapin: Ursprüngliche Idee, allgemeine Hilfe bei der Vorbereitung und dem Testen dieser TC.
Genauer gesagt benötigt TC mindestens eine Discourse-Version nach dem 30. Oktober und speziell die Unterstützung des Emoji-Pickers, eine aktuelle Version vom 2024-11-26T23:00:00Z (danke an das Team für das Hinzufügen eines Plugin-Outlet vor ein paar Tagen!) ↩︎
