 |
Résumé | Ajoute des encadrés de style Obsidian en alternative aux citations Markdown. |
 |
Aperçu | Theme Creator |
 |
Dépôt | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
Guide d’installation | Comment installer un thème ou un composant de thème |
 |
Nouveau sur les thèmes Discourse ? | Guide de démarrage pour utiliser les thèmes Discourse |
Installer ce composant de thème
Ce composant de thème ajoute la prise en charge des encadrés de style Obsidian dans Discourse en alternative aux citations Markdown.
Les encadrés sont un excellent moyen de mettre en évidence du contenu et d’ajouter des notes, des avertissements ou d’autres messages spéciaux à vos publications.
Utilisation
Pour créer un encadré, vous avez plusieurs options.
Syntaxe Markdown
Ajoutez [!type] à la première ligne d’une citation, où type est l’identifiant du type. L’identifiant du type détermine l’apparence et le comportement de l’encadré. Pour voir tous les types disponibles, consultez la section Types pris en charge.
> [!tip]
> **Astuce** : Utilisez des `extraits de code` pour améliorer la lisibilité. Ils apportent clarté et précision.
Aperçu
Vous pouvez changer le type en cliquant sur l'icône :
Éditeur de texte enrichi
Il est désormais entièrement pris en charge, veuillez consulter la section Prise en charge de l’éditeur de texte enrichi.
Raccourci clavier
- Ctrl + q — Insérer un encadré vide
Barre d’outils
Chat
Un bouton dans la barre d’outils permet d’insérer un encadré par défaut.
Titre personnalisé
Par défaut, le titre de l’encadré est son identifiant de type en majuscules initiales. Vous pouvez le modifier en ajoutant du texte après l’identifiant du type :
> [!question] Étiquette personnalisée 🤗
> Les étiquettes des encadrés peuvent être personnalisées.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> Elles peuvent également contenir un formatage en ligne spécial comme des dates dynamiques.
Vous pouvez également créer des encadrés avec uniquement un titre :
> [!success] résolu.
Encadrés dépliables
Vous pouvez rendre un encadré dépliable en ajoutant un plus + ou un moins - directement après l’identifiant du type.
+développe l’encadré par défaut-le replie à la place
> [!todo]- Ma liste de tâches
>
> - [x] Écrire la documentation
> - [ ] Ajouter des tests
> - [ ] Réviser le code
> [!todo]+ Ma liste de tâches développée
>
> - [x] Créer le dépôt
> - [ ] Configurer CI/CD
> - [ ] Déployer en production
Encadrés imbriqués
Vous pouvez imbriquer des encadrés à plusieurs niveaux.
> [!question] Les encadrés peuvent-ils être imbriqués ?
>
> > [!todo] Oui !, ils le peuvent.
> >
> > > [!example] Vous pouvez même utiliser plusieurs niveaux d'imbrication.
> [!tip]
> Voici une astuce utile
>
> > [!info]
> > Avec quelques informations supplémentaires
> >
> > > [!example]
> > > Et un exemple imbriqué
>
> Retour à l'astuce principale
Types par défaut pris en charge
Vous pouvez utiliser plusieurs types et alias d’encadrés.
Chaque type est accompagné d’une couleur d’arrière-plan et d’une icône différentes.
Consultez le paramètrecallouts.
note. Consultez la section Défauts de repli pour plus d’informations.
| Type | Description | Alias |
|---|---|---|
note |
Pour les notes et informations générales | - |
abstract |
Pour les résumés ou sections abstraites | summary, tldr |
info |
Pour le contenu informatif | - |
todo |
Pour les listes de tâches ou éléments à faire | - |
tip |
Pour les astuces et informations importantes | hint, important |
success |
Pour les messages de succès | check, done |
question |
Pour les questions et FAQ | help, faq |
warning |
Pour les avertissements | caution, attention |
failure |
Pour les notifications d’échec | fail, missing |
danger |
Pour les messages de danger ou d’erreur | error |
bug |
Pour les rapports de bugs ou problèmes connus | - |
example |
Pour les exemples | - |
quote |
Pour les citations | cite |
Personnalisation
Icône
Vous pouvez utiliser une icône FontAwesome ou fournir directement un élément SVG.
Élément SVG
Bien que la version gratuite de FontAwesome propose de nombreux choix, vous pouvez parfois vous sentir limité.
Vous pouvez fournir un élément SVG <svg>...</svg>.
Exemple : Icônes Lucide – C’est un excellent ensemble avec l’avantage de pouvoir choisir la largeur du trait.
- Sélectionnez une icône
- Ajustez la largeur du trait
- Cliquez sur Copier SVG
- Accédez aux paramètres du composant de thème et collez le contenu
Défauts de repli
Vous pouvez définir des valeurs par défaut lorsque le type d’encadré spécifié n’est pas trouvé avec les paramètres suivants :
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse est fantastique]
> Oui.
Configuration globale
Vous pouvez personnaliser divers aspects des encadrés via :
- Opacité de l’arrière-plan
- Propriétés de la bordure (largeur, style, couleur, rayon)
- Espacement interne (padding)
- Propriétés de la police du titre (taille, graisse)
- Espace entre l’icône et le titre
Configuration par encadré
Chaque type d’encadré peut être personnalisé avec :
- Icône personnalisée
- Texte du titre
- Schéma de couleurs
- Propriétés de la bordure
Consultez la section Paramètres ci-dessous.
Paramètres
Liste
| Paramètre | Description |
|---|---|
| callouts | Définir les encadrés. |
| callout_fallback_type | Le type d’encadré par défaut à utiliser lorsque le type spécifié n’est pas trouvé. Valeur par défaut : note |
| callout_fallback_icon | L’icône par défaut à utiliser lorsque le type spécifié n’est pas trouvé. Valeur par défaut : far-pen-to-square |
| callout_fallback_color | La couleur par défaut à utiliser lorsque le type spécifié n’est pas trouvé. Valeur par défaut : #027aff |
| callout_background_opacity | L’opacité de l’arrière-plan globale pour l’encadré (1 à 100). Valeur par défaut : 10 |
| callout_border_width | La largeur de la bordure globale pour l’encadré. Valeur par défaut : vide |
| callout_border_style | Le style de la bordure globale pour l’encadré. Valeur par défaut : vide |
| callout_border_color | La couleur de la bordure globale pour l’encadré. Valeur par défaut : vide |
| callout_border_radius | Le rayon de la bordure globale pour l’encadré. Valeur par défaut : var(--d-border-radius) |
| callout_padding | L’espacement interne global pour l’encadré. Valeur par défaut : 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | La taille de police globale pour le titre de l’encadré. Valeur par défaut : inherit |
| callout_title_font_weight | La graisse de police globale pour le titre de l’encadré. Valeur par défaut : bold |
| callout_title_gap | L’espace global entre l’icône et le titre de l’encadré. Valeur par défaut : 0.5em |
| callout_icon_sizep | La taille globale pour l’icône de l’encadré. |
| callout_transition_duration_ms | La durée de l’animation d’ouverture et de fermeture (ms). |
| svg_icons | Liste des icônes FontAwesome 6 utilisées dans ce composant de thème. |
Page de paramètres par encadré :
| Paramètre | Description |
|---|---|
| Type* | Le type de l’encadré. Ce identifiant sera utilisé dans la syntaxe de l’encadré : [!type] |
| Alias | Les alias pour l’encadré, séparés par |.Exemple : cite|quote |
| Icône | L’icône fontawesome pour l’encadré. Vous devrez peut-être l’ajouter au paramètre svg_icons si elle n’est pas disponible dans le sous-ensemble par défaut.Alternativement, vous pouvez fournir directement un élément SVG, par ex. <svg>...</svg> |
| Taille de l’icône | La taille pour l’icône de l’encadré. Remarque : Utilisez uniquement des valeurs CSS valides, par ex. 1em, 16px, 1.5rem |
| Titre | Le titre pour l’encadré. Si aucun titre n’est fourni dans l’encadré, ce paramètre sera utilisé. Remarque : si les deux sont vides, le titre sera le type de l’encadré. |
| Couleur | La couleur pour l’encadré. Cela sera utilisé pour l’arrière-plan, le titre et l’icône. Remarque : Utilisez uniquement des codes couleur hexadécimaux, par ex. #027aff |
| Largeur de la bordure | La largeur de la bordure pour l’encadré. |
| Style de la bordure | Le style de la bordure pour l’encadré. |
| Couleur de la bordure | La couleur de la bordure pour l’encadré. Important : si vous utilisez des fonctions CSS pour produire une valeur alpha, comme rgba, assurez-vous de ne pas utiliser d’espaces entre les valeurs, par ex., rgba(145,145,145,0.1) |
| Rayon de la bordure | Le rayon de la bordure pour l’encadré. |
* Paramètre requis
Prise en charge de l’éditeur de texte enrichi
Ce composant prend désormais en charge l’éditeur de texte enrichi de Discourse, facilitant la création, la modification et l’organisation des encadrés.
Création d’encadrés
Vous pouvez insérer des encadrés de plusieurs façons :
- Raccourci clavier : Ctrl + Q
- Bouton de la barre d’outils
- Règles de saisie :
/callout<:type>!!<type>
- Prise en charge du collage
Vidéo
Modification des encadrés
Les contrôles pour modifier un encadré n’apparaissent que lorsque vous le sélectionnez au préalable.
-
Sélecteur de type
En cliquant sur l’icône, un menu flottant apparaîtra. -
Titre personnalisé
Prend en charge le formatage en ligne et les émojis -
Pliage
Définir les encadrés comme dépliables. Cela peut être accédé via le menu des options.
Vidéo
Déplacement des contrôles
-
Bureau
- Glisser-déposer à l’aide d’une poignée
-
Appareils tactiles
- Déplacer les encadrés vers le haut/bas
- Imbriquer dans les encadrés adjacents
- Désactivé par défaut (peut être activé dans les options)
Vidéo
Navigation au clavier
Améliore la navigation à l’intérieur des encadrés imbriqués :
- ← au début du titre ouvre le sélecteur de type
- ↑ / ↓ dans les zones vides crée/supprime des paragraphes
- Entrée dans le titre déplace le curseur dans le corps
Vidéo
Clic pour insérer
- Cliquez dans les zones vides pour créer un paragraphe
- Des boutons optionnels permettent d’insérer du contenu à l’intérieur ou à l’extérieur des encadrés
Vidéo
Feuille de route
Les plans de développement futurs pourraient inclure :
- Saisie semi-automatique des types lors de la frappe
Crédits
- @StefanoCecere – Demande de fonctionnalité, Style blockquotes as callouts in Obsidian
Votre site pourrait ne pas fonctionner car un thème / composant contient des erreurs.
