Éditeur XML 2013 : Fonctionnement

Entre mars et novembre 2019 nous remettons à jour notre base de connaissances. Cette fiche fera bientôt l'objet d'une révision. Pour plus de détails, consultez notre agenda.

Blogger - L’éditeur XML de thèmes
Le nouvel éditeur XML de Blogger a débarqué dans votre interface le 10 avril dernier.
Faisons le point sur les nombreuses fonctionnalités qui ont été intégrées.

Boutons des vues

Deux boutons sont regroupés et permettent de basculer d'une vue à une autre.


Boutons des vues


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.


Accéder au code HTML


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é.


Prévisualisation


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.


Accéder aux gadgets


Les noms des gadgets mentionnés dans la liste, sont en fait, les identifiants des gadgets.
Appendice - Liste des gadgets

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èchessituées sur la gauche, indiquent que la balise contient du contenu. En cliquant dessus, vous développez le contenu.


Déployer un gadget


Résultat du déploiement du gadget


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 clairBalises HTML spécifiques à Blogger
Bleu foncéAttributs contenus dans les balises HTML
Bleu clairAttributs d'expressions Blogger
Marron foncéValeurs des attributs
Marron clairValeurs des attributs, spécifiques à Blogger
RougeErreur
BrunCommentaires <!-- -->


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.


Rechercher dans le code du modèle


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.


Annuler les modifications


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.


Restaurer les codes des gadgets originaux


La grande nouveauté provient du fait, qu'il est désormais possible de rétablir le contenu par défaut, gadget par gadget.


Restaurer les codes des gadgets originaux


Avant de rétablir un gadget, assurez-vous d'avoir effectué une sauvegarde de votre thème.

  • Tableau de bord
  • Modèle
  • Sauvegarder/Restaurer
  • Télécharger le modèle complet


Notez qu'il est possible de réinitialiser le thème des gadgets, inclusion par inclusion. Pour se faire, repérez le code HTML 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.


Déployer un gadget


Supprimez les inclusions que vous voulez rétablir par défaut.


<b:includable ></b:includable>


Supprimer les inclusions


Enregistrez votre modèle. 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'/>


Mettre en forme le modèle

Ce bouton permet d'aligner le balisage.


Mettre en forme le code HTML


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 balise b:section qui 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/>.
Code XML Minimum
<?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>


Gestion d'autres fonctionnalités Blogger

Blogger évolue et la Base de connaissances de Blogger Code PE suit le mouvement.
La rubrique Fonctionnalités fait actuellement l'objet d'une révision complète. Nous traiterons la sous-rubrique Gestion entre le 27 juin et le 19 septembre 2019. Nous mettrons à jour les fiches existantes, nous ajouterons de nouvelles fiches et nous recyclerons d'anciennes fiches devenues obsolètes.
Restez informé via nos pages Facebook et Twitter.

Spotlight

Populaires cette semaine

Les opérateurs Lambdas / Lambda operators [any/all/none/count/map/where/first]

Facebook : Bouton J'aime [Like button]