Éditeur XML 2013 : Fonctionnement
Le nouvel éditeur XML de Blogger a débarqué dans votre interface le 10 avril 2013.
Faisons le point sur les nombreuses fonctionnalités qui ont été intégrées.
Remarque :
Cette fiche traite de fonctionnalités intégrées dans l'UI-2010 (à la retraite depuis 2021). Nous attendons les prochaines évolutions de l'UI-2020 pour mettre à jour le contenu.
Boutons des vues
Deux boutons sont regroupés et permettent de basculer d'une vue à une autre.
La vue par défaut qui s'affiche lorsqu'on accède à l'éditeur est la vue du code HTML du modèle. Si vous basculez sur une autre vue, il suffit de cliquer sur le bouton "Modifier le modèle" pour revenir à cette vue.
L'autre vue, permet d'afficher une prévisualisation du blog. Cet affichage tient compte des modifications que vous avez apportées dans le code HTML, même si vous n'avez pas enregistré.
Bouton accéder au gadget
C'est l'une des fonctionnalités que vous utiliserez le plus souvent. Ce bouton permet de pointer directement sur le code du gadget que vous sélectionnez dans la liste.
Les noms des gadgets mentionnés dans la liste, sont en fait, les identifiants des gadgets.
Introduction aux gadgets Blogger
Déploiement des codes et numérotation des lignes
Fini de cocher "Développer les modèles des gadgets". Cette fonctionnalité a disparue.
A la place, apparaît la numérotation des lignes et une fonctionnalité de déploiement.
Les petites flèches ► situées sur la gauche, indiquent que la balise contient du contenu. En cliquant dessus, vous développez le contenu.
Par défaut, les contenus qui ne sont pas déployés, sont les balises <b:skin/> et <b:template-skin/> (habillage CSS), <b:widget/> (Les gadgets) et <b:includable/> (Inclusions des gadgets).
Il est également possible de refermer les autres balises en cliquant sur son numéro de ligne.
Couleurs des codes
Les couleurs représentent des parties spécifiques du code XML.
| Couleurs | Éléments |
|---|---|
| Vert foncé | Balises HTML Standards |
| Vert clair | Balises HTML spécifiques à Blogger |
| Bleu foncé | Attributs contenus dans les balises HTML |
| Bleu clair | Attributs d'expressions Blogger |
| Marron foncé | Valeurs des attributs |
| Marron clair | Valeurs des attributs, spécifiques à Blogger |
| Rouge | Erreur |
| Brun | Commentaires <!-- --> |
Fonction recherche intégrée
Une petite boîte de recherche a été intégrée dans l'éditeur
Pour l'activer, cliquez dans la zone de l'éditeur et ensuite appuyez sur les touches de votre clavier : CTRL + F.
Vous n'avez plus qu'a écrire les occurrences et utiliser CTRL + MAJ + F ou ENTER.
Les codes trouvés se déploieront et seront mis en surbrillance.
Annuler les modifications
Si vous avez effectué des modifications sans avoir sauvegardé, le bouton d'annulation restaurera le code du modèle tel qu'il était à la dernière sauvegarde.
Rétablir les paramètres par défaut des modèles des gadgets
Cette fonctionnalité rétabli le contenu original des gadgets. C'est en quelque sorte, un rafraîchissement qui permet à Blogger de vous envoyer les dernières mises à jour.
Rétablir par gadget la configuration par défaut
La grande nouveauté provient du fait, qu'il est désormais possible de rétablir le contenu par défaut, gadget par gadget.
Avant de rétablir un gadget, assurez-vous d'avoir effectué une sauvegarde de votre thème.
- UI-2020
- Thème
- Menu Personnaliser
- Sauvegarder
Rétablir par inclusion la configuration par défaut
Notez qu'il est possible de réinitialiser le thème des gadgets, inclusion par inclusion. Pour se faire, repérez le code XML d'un gadget. Aidez-vous du bouton "Accéder au widget".
Déployez-le ( ► Flèche noire à gauche) pour découvrir une ou plusieurs inclusions.
Supprimez les inclusions que vous voulez rétablir par défaut.
<b:includable id='INCLUDE_ID'></b:includable>
Enregistrez votre thème. Quittez et revenez dans l'éditeur.
En recherchant à nouveau votre gadget, vous constaterez que les inclusions que vous avez supprimées sont réapparues et réinitialisées.
A noter que si vous voulez supprimer une inclusion que vous n'utilisez pas ou qui n'est pas raccordée, vous ne devez pas la supprimer, mais la refermée :
<b:includable id='feedLinks' var='post'></b:includable>
<b:includable id='feedLinks' var='post'/>
Analyse du processus de réinitialisation des gadgets
La fonctionnalité Réinitialiser les modèles de gadgets, implémentée dans l’éditeur XML de Blogger, constitue un mécanisme pour restaurer la structure et les balisages par défaut des gadgets. Analysons en détail l’impact de cette action qui affecte directement les balises <b:widget> et ses inclusions associées, en mettant en lumière les implications techniques pour la gestion des données et la modularité des thèmes.
1. Suppression des inclusions explicites
Toutes les balises
<b:includable>définies explicitement au sein d’un gadget sont intégralement supprimées lors de la réinitialisation.Cela inclut les variantes personnalisées ou les modifications introduites manuellement par l’utilisateur dans le fichier XML.
Ce processus garantit que le gadget est nettoyé de toute altération et revient à un état standard, permettant ainsi une compatibilité immédiate avec les balisages par défaut ou les variantes définies globalement.
Pour les utilisateurs, cela signifie également que toutes les personnalisations locales sont effacées, ce qui peut être une source de frustration si des sauvegardes n’ont pas été effectuées en amont.
2. Réintroduction des balisages originaux
Les inclusions originales, préalablement stockées dans le BackEnd sous forme de balisages système, sont réintégrées explicitement dans le fichier XML en tant qu’inclusions FrontEnd.
-
Par exemple, si l’inclusion
mainavait été modifiée ou remplacée, elle est rétablie dans sa version originale tout en restant accessible via le BackEnd avec la syntaxe suivante :<b:include name='super.IdIncludable'/> - Ce mécanisme préserve une copie non modifiable de la version originale pour une réutilisation ou une restauration future. En d'autres termes, cela garantit que l’intégrité des balisages système est toujours maintenue, même après des modifications successives par l’utilisateur.
- Les développeurs avancés peuvent exploiter ce fallback pour effectuer des tests comparatifs ou restaurer des fonctionnalités supprimées par inadvertance.
3. Application des variantes depuis <b:defaultmarkups>
Les balisages définis dans les balises
<b:defaultmarkups>sont automatiquement injectés dans le gadget si des variantes sont spécifiées.Dans ce cas, les variantes écrasent les inclusions restaurées par défaut.
Lorsqu’aucune variante n’est définie dans un balisage
<b:defaultmarkup>, les inclusions originales, telles que restaurées, sont utilisées par défaut.Ce processus assure une hiérarchisation des priorités entre les variantes explicites et les balisages originaux. De plus, cela permet une personnalisation plus fine pour des thèmes ou gadgets spécifiques, tout en maintenant une structure de secours fiable.
L’inclusion d’une variante dans les balisages par défaut simplifie considérablement la mise en œuvre de personnalisations globales, évitant ainsi aux utilisateurs finaux de devoir modifier manuellement chaque gadget concerné.
Exemple illustratif : Impact de la réinitialisation
Voici une illustration concrète de l’avant et l’après d’une réinitialisation :
<b:widget id='Blog1'> <b:includable id='main'> <!-- Contenu personnalisé --> </b:includable> </b:widget>
<b:widget id='Blog1'> <b:includable id='main'> <!-- Contenu par défaut --> </b:includable> </b:widget>
La version restaurée devient modifiable, tandis que la version originale reste disponible en tant que fallback via BackEnd.
Il est également possible d’ajouter une variante issue de <b:defaultmarkups> pour remplacer ce balisage par défaut tout en maintenant la flexibilité pour d’autres thèmes ou gadgets.
Considérations avancées
-
Nettoyage et standardisation
Le processus de réinitialisation vise principalement à restaurer un état stable et cohérent pour chaque gadget, indépendamment des personnalisations appliquées. Cela permet :
Une harmonisation des gadgets dans des projets complexes où plusieurs développeurs interviennent.
Une simplification du débogage, en évitant les conflits causés par des modifications locales non documentées.
-
Interopérabilité avec les thèmes
Les balisages provenant de
<b:defaultmarkups>permettent une adaptation fluide aux besoins des thèmes modernes. Par exemple :- Un thème comme Contempo peut définir des variantes spécifiques pour les gadgets Blog, tandis que d’autres thèmes héritent directement des balisages originaux.
- Cela garantit une expérience utilisateur cohérente, tout en permettant une personnalisation avancée pour les développeurs.
-
Flexibilité pour les utilisateurs avancés
Pour les développeurs souhaitant expérimenter ou étendre les fonctionnalités des gadgets, le mécanisme de fallback via le BackEnd constitue un atout majeur. Ils peuvent :
Modifier des variantes sans risque de perdre l’accès aux balisages originaux.
Tester différents scénarios en alternant entre les versions explicites et les balisages par défaut.
Synthèse des implications techniques
Nettoyage systématique : La suppression des inclusions explicites garantit un retour à un état stable et standardisé du gadget.
Hiérarchisation des balisages : Les variantes définies dans
<b:defaultmarkups>ont priorité sur les balisages originaux, tout en permettant leur conservation en BackEnd.Flexibilité et robustesse : Ce processus offre un équilibre entre la modularité des gadgets et la préservation des données d’origine.
Adaptation thématique : Les balises
<defaultmarkups>permettent de définir des variantes spécifiques à un thème, renforçant ainsi la cohérence visuelle et fonctionnelle à l’échelle du site.Expérimentation sans risque : La disponibilité permanente des balisages originaux dans le BackEnd offre une sécurité pour tester des modifications sans compromettre la stabilité.
En conclusion, la réinitialisation des gadgets est une fonctionnalité clé pour maintenir la cohérence structurelle des thèmes Blogger tout en garantissant une flexibilité pour les futures personnalisations. Elle constitue un outil puissant pour les développeurs et administrateurs cherchant à optimiser ou rétablir rapidement leurs gadgets.
Mettre en forme le thème
Ce bouton permet d'aligner le balisage.
Par exemple, vous avez écrit un code de cette manière :
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a></span>
En mettant en forme, vous obtiendrez :
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'> <data:post.author/> </span> </a> </span>
Ajouter / Supprimer des gadgets
Dans le code XML, vous pouvez ajouter manuellement des gadgets dans les <b:section>...</b:section>
Si vous connaissez l'identifiant et le type du gadget, vous pouvez l'ajouter comme suit :
<b:widget id='LinkList1' locked='false' title='Titre du gadget' type='LinkList'/>
A l'enregistrement, Blogger se chargera de généré le contenu du gadget.
Pour le supprimer, vous faites l'opération inverse.
<b:widget id='LinkList1' locked='false' title='Titre du gadget' type='LinkList'></b:widget>
b:skin - Où sont les CSS ?
Les CSS que vous avez ajoutés sont toujours là.
Déployez la balise <b:skin></b:skin>.
Dans cette balise, vous retrouverez les définitions des variables CSS et les CSS.
Construire un nouveau thème dans l'éditeur
Vous voulez construire un thème Blogger à partir d'une feuille blanche ?
Vous avez déjà une bonne maîtrise en HTML et CSS ? C'est un bon départ.
Vous comprenez le langage XML de Blogger ? C'est parfait.
Vous êtes donc prêt à vous lancer ce nouveau défi.
Le code ci-dessous est le minimum requis pour débuter l'écriture d'un nouveau modèle.
Le doctype, ainsi que les balises habituelles <html>, <head> et <body> sont requises, comme pour la structure d'une page web standard.
Du côté des balises XML Blogger, les balises de mises en pages sont obligatoires :
<b:skin>La balise d'habillage qui renferme les définitions des variables ou/et les fichiers CSS.
La balise doit être contenue dans<head/>.
La balise<style/>ne doit pas être mentionnée.<b:section/>Zone déterminant un groupe de gadgets.
Il faut au minimum, 1 baliseb:sectionqui autorise l'ajout de gadgets (paramètre :showaddelement='yes').
La balise doit être contenu dans<body/>.<b:widget/>Balise gadget.
1 gadget, de préférence celui qui contient les articles :Blog1.
Les<b:widget/>doivent être contenu dans une<b:section/>.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <!-- DÉBUT DE L'ENTÊTE --> <!-- EMPLACEMENT 1 : BALISES META, LINKS, FICHIERS JS, ETC --> <b:skin><![CDATA[ /* EMPLACEMENT CSS */ ]]></b:skin> <!-- EMPLACEMENT 2 : BALISES META, LINKS, FICHIERS JS, ETC --> <!-- FIN DE L'ENTÊTE --> </head> <body> <!-- DÉBUT STRUCTURE HTML --> <!-- AU MOINS 1 B:SECTION & 1 B:WIDGET REQUIS --> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget> </b:section> <!-- FIN STRUCTURE HTML --> </body> </html>
