Documentation mise en page

Le contenu est organisé par blocs (texte, image, galerie, etc.). Chaque bloc est définit par un "marqueur". Dans l'éditeur de texte de l'article ou de la page, on signale le début d'un bloc avec son marqueur. Ci-dessous la liste des marqueurs disponibles:

Pour que le système fonctionne, il faut impérativement que chaque bloc soit fermé par une marqueur de fermeture: #CLOSE. Ci-dessous un exemple pour le bloc "Intro": 

Le premier marqueur #INTRO ouvre le bloc, le marqueur #CLOSE ferme le bloc. La logique est la même pour tous les blocs.

Pour la construction d'un bloc, il est important de respecter quelques règles pour éviter des bugs d'affichage. Dans l'éditeur de texte de Shopify, il faut ajouter un marqueur par paragraphe, le contenu des blocs doit être dans des paragraphes après celui du marqueur d'ouverture et avant le marqueur de fermeture. Il ne doit pas avoir de paragraphe "vide", ni entre les marqueurs, ni entre les éléments à l'intérieur des marqueurs. Exemple ci-dessous:

Le bloc texte est destiné à contenir du contenu texte régulier. Il est possible d'ajouter de la graisse, l'italic, ou faire un lien vers une adresse. Pour les liens, il est préférable de les utiliser pour site web tiers et d'ouvrir la fenêtre dans un nouvel onglet pour ne pas perdre le visiteur. Pour les liens avec les produits, voir la section de la documentation plus loin dans cette page. Ce bloc de contenu est un bloc de type #TEXT.

Les bloc titre et sous-titre, fonctionne de manière similaire. La différence étant que le bloc #TITLE insère une ligne de séparation. Le contenu des titre doit être dans un paragraphe entre les marqueurs. Cependant, pour le SEO, il est possible de remplacer ce formatage paragraphe par un Heading2, 3, etc. selon les besoins de hiérarchisation du contenu. Note: le heading H1 est déjà attribuer au titre de la page généré par le theme, celui-ci doit être unique, préféré un H2 ou H3 selon l'importance du titre. Rester logique, un H3 ne devrait pas précéder un H2 dans la logique du texte. Exemples:

Texte ou élément à la suite d'un titre ou sous-titre. On peut noter que l'espace entre ces éléments est moindre que pour les autres blocs, pour créer une liaison.

Le bloc d'introduction est conçu pour être utilisé en début d'article en temps que premier bloc. Le premier bloc de cette page est un bloc #INTRO.

Le bloc image permet d'insérer des images et de les accompagner d'un commentaire. L'image doit impérativement être dans le 1er paragraphe à l'intérieur des marqueurs. Le commentaire dans le second. Il est important qu'image et commentaire soit dans des paragraphes différents. Exemple ci-dessous:

Le marqueur image possède un option qui permet d'aligner la photo à gauche ou à droite. Il faut ajouter -LEFT ou -RIGHT -› #IMAGE-LEFT, #IMAGE-RIGHT, exemples ci-dessous:

Le bloc Galerie permet de contenir un nombre indéfini d'images. Il est préférable de rester dans une tranche résonnable, minimum 3 à 4 photo, maximum 8 à 10. Comme pour le bloc #IMAGE, chaque photo doit être dans un paragraphe. Exemples ci-dessous: 

Le bloc colonne permet d'organiser 2 éléments en colonnes (photo+texte). À noter que sur mobile, les éléments seront l'un en dessous de l'autre. Chaque élément doit être dans un paragraphe. Le marqueur colonne a une option qui permet d'inverser l'ordre d'affichage: #COL-INV. Le premier élément, initialement à gauche, passera à droite. Cela est utile pour les combinaisons photo+texte, sur mobile, la photo sera toujours le premier élément affiché. Exemples ci-dessous:

Le bloc verbatim permet de mettre en avant un extrait de contenu, une citation ou une information important. Il n'est pas conçu pour contenir de liens ou tout type de formatage (gras, italic, etc.). Exemple ci-dessous:

Le bloc card permet de créer un cadre autour d'un texte, il est utile pour une explication précise ou une portion de texte qui nécessite d'apparaître différente du reste du texte. Veiller à ne pas abuser de ce bloc: son intérêt, comme pour le verbatim, reste d'être moins fréquent pour ressortir et contraster avec l'ensemble du texte. Exemple ci-dessous:

Le bloc embedded permet d'inclure des médias externes, ex.: Youtube, Vimeo, etc. Sa condition d'utilisation est que le code source récupéré pour le partage commence par <iframe> et finit par </iframe>. La plupart des plateformes qui propose une intégration, fournissent ce code, souvent via l'option "intégrer". Exemple ci-dessous: 

Le bloc tiroir permet de créer des listes avec titres et contenus que l'on peut afficher ou masquer. Contrairement aux autres blocs, il faut ici utiliser 2 marqueurs, avec les options -HEADER pour le titre et -CONTENT pour le contenu. Par exemple:

Dans certains cas il est possible que l'affichage soit brisé. Cela est souvent lié à l'une de ces raisons:

Lorsque l'affichage est brisé, le problème se situe là ou l'affichage ne se comporte plus comme souhaité. Repérer alors dans l'éditeur la partie concernée, puis vérifier les marqueurs. Pour cela placer le curseur au début du paragraphe qui contient le marqueur et vérifier qu'il n'y a pas d'espace avant le caractère #, ni à la fin de la ligne: dans le cas de #VERB, le curseur ne doit plus se déplacer après la lettre B (ou alors passer au paragraphe suivant). Si un espace s'est inséré, le supprimer et relancer une pré-visualisation de la page. De même pour les paragraphes vides, penser à la supprimer, leur présence créer des espaces non désirés entre les blocs.

Le bouton "Clear formatting" permet de supprimer des "balises poubelles". Ces balise proviennent souvent de copier-coller (Word par exemple) ou autre page web. Invisibles dans l'éditeur de texte mais présentes et interprétées dans le code source, elles peuvent générer un problème d'affichage. Pour nettoyer ces balises, sélectionner la partie concerner et cliquer sur le bouton "Clear formatting" (dernier bouton de l'éditeur, icône cercle barré).