|||
|:discourse2:| Résumé | Ajoute des variations ou des animations optionnelles aux émojis.
| 
| Aperçu | Aperçu sur theme-creator.discourse.org|
|:hammer_and_wrench:| Lien du dépôt |
https://github.com/arkshine/discourse-emoji-fluff|
|:open_book:| Nouveau sur les thèmes Discourse ? | Guide pour débutants sur l’utilisation des thèmes Discourse|
Installer ce composant de thème
Ce composant nécessite que Discourse soit à jour à la date du 2024-11-26T23:00:00Z. [1]
Description
Emoji Fluff permet aux utilisateurs d’ajouter des émojis miroir ou animés à leurs publications.
Il permet aux utilisateurs de publier des travaux d’émojis fantaisistes tels que :
Vous pouvez choisir ces décorations dans la fenêtre contextuelle d’autocomplétion des émojis, dans le sélecteur d’émojis, ou en ajoutant des mots-clés directement après le shortcode de l’émoji :
Exemples : :velo:f-slide , :sourire:f-bounce
Les retournements horizontaux et verticaux peuvent être combinés avec d’autres décorations.
Exemples :
:cheval:f-slide,flip::araignee:f-float,flip_v:
Captures d’écran
Fluff d’émojis disponibles
Comment ajouter du fluff à un émoji
Depuis la fenêtre contextuelle d’autocomplétion des émojis
Depuis le sélecteur d’émojis
En tapant manuellement le suffixe de fluff
Fonctionnalités
-
Émojis miroir horizontalement ou verticalement
-
Émojis animés (rebond, rotation, pulsation, etc.)
-
Paramètre pour choisir quelles décorations d’émojis doivent être disponibles pour les utilisateurs
-
Paramètre pour choisir d’insérer un sélecteur de décorations dans l’autocomplétion ou le sélecteur d’émojis.
-
Permet aux administrateurs de créer de nouveaux fluffs
Paramètres
| Paramètre | Description |
|---|---|
| activé | Active ou désactive les fonctionnalités du composant. Valeur par défaut : trueLa désactivation empêchera l’application de la décoration d’émoji. C’est utile si vous souhaitez mettre en pause ou supprimer le composant mais que vous ne voulez pas voir le code de décoration, comme Pour plus d’informations, consultez Rétablir les décorations d’émojis dans le sujet. |
| autoriser les décorations | Liste des décorations autorisées. Valeur par défaut : flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray |
| autoriser le sélecteur dans | Où le sélecteur de fluff doit être disponible. Valeur par défaut : bothnone – désactive les sélecteurs.both – active le sélecteur dans l’autocomplétion et le sélecteur d’émojis.autocomplete – active le sélecteur uniquement dans l’autocomplétion.emoji-picker – active le sélecteur uniquement dans le sélecteur d’émojis. |
spin:
De plus, les chaînes de caractères du composant de thème sont traduisibles à partir des paramètres.
Rétablir les décorations d’émojis
Si vous désactivez le composant, ces suffixes subsistent, ce qui donne des émojis comme ceci : :sourire:f-spin:
En raison des limitations et des choix de conception du composant de thème, nous ajoutons des suffixes simples aux émojis pour leur donner ces effets décoratifs. Le préfixe de fluff f- aide à identifier ces décorations, ce qui les rend faciles à supprimer via le script disponible ci-dessous.
Vous pouvez télécharger et exécuter une tâche rake pour supprimer définitivement les suffixes de fluff des publications.
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
La tâche rake ne crée pas de révisions de publication par défaut. Vous pouvez ajouter false comme argument pour modifier ce comportement : rake fluff:delete_all[false]
Lisez Administrative Bulk Operations pour obtenir des instructions sur la façon d’entrer dans le conteneur pour exécuter la tâche rake.
Faites toujours une sauvegarde avant d’exécuter cette tâche. Il n’y a aucune garantie qu’elle ne supprimera pas de chaînes indésirables. Utilisez-la à vos propres risques et examinez le code en cas de doute.
Créer vos fluffs
La création de fluffs nécessite des connaissances en CSS.
Lorsqu’un fluff est ajouté à un émoji dans une publication, l’émoji est encapsulé dans une balise avec une classe fluff :
<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>
Ajoutez du CSS personnalisé à votre thème ou à un nouveau composant de thème pour ajouter de nouveaux fluffs.
Voici deux exemples de nouveaux fluffs :
Incliner un émoji de 90°
.fluff--tilt img {
transform: rotate(90deg);
}
Créer un effet de rotation 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);
}
}
Ensuite, vous devez ajouter le suffixe de fluff dans les décorations autorisées d’Emoji Fluff :
C’est tout ; vos nouveaux fluffs devraient maintenant être disponibles pour les utilisateurs. Profitez-en !
Crédits
- @Canapin : Idée originale, aide générale à la préparation et aux tests de ce TC.
Pour être précis, TC nécessite au moins une version de Discourse après le 30 octobre, et spécifiquement le support du sélecteur d’émojis, une version actuelle à la date du 2024-11-26T23:00:00Z (merci à l’équipe d’avoir ajouté un point de sortie de plugin il y a quelques jours !) ↩︎
