Retour pour la suite et fin, Cette fois-ci, place à l'utilisation de Ghost et toutes les petites astuces pour bien rédiger ses publications.

Le menu de la page d'administration du blog

On va passer en revue cette première page de l'administration :

La première partie

• Blog de Tom : le nom du site avec la zone de recherche à l'intérieur du site
• Dashboard ou tableau de bord qui apparait à droite, celui-ci vous indique des informations diverses : la liste de vos membres, vos publications, des informations de la communauté Ghost…
• View site : voir le site dans son ensemble tel qu'il apparait aux lecteurs
• Explore : la page des blogs Ghost en ligne

La deuxième partie

• Posts : Publication : c'est le cœur de la rédaction : Création et modification des articles ou posts.
• Drafts : ce sont les brouillons des articles non publiés
• Scheduled : programme les publications, on décide le moment ou sera publié l'article sur le site : Le jour et l'heure.
• Published : la liste des posts publiés

La troisième partie

• Pages : on a la possibilité de créer des pages dites statique, la page d'accueil étant la seule page dynamique du blog, on peut vouloir publier un thème permanent sur une page, ou une information...
• Tags : les "tags" sont les mots clés en français, ils sont importants car ils favorisent l'indexation de votre blog et rend les recherches plus pertinentes.
• Members : la listes des membres, au démarrage, il vous propose de vous ajouter vous-même pour tester le fonctionnement.

Le bas de page

• "Tête de bonhomme" : c'est l'emplacement de votre profil, vous pouvez renseigner vos infos personnelles et insérer votre photo.
• La roue dentée : on l'a vu précédemment.
• Le petit bouton "noir et blanc" : c'est le mode clair ou sombre de la page de l'administration.

La page de rédaction

Voici la page de rédaction d'un "post"
Il y a deux items présent à l'écran

• L'image de couverture "add feature image": vous pouvez soit intégrer vos propres images ou utiliser la bibliothèque d'image "Unsplash"
• Le titre : Il est impératif, c'est la porte d'entrée de votre post.

Vous avez un icône "+" sur la gauche, c'est l'endroit où vous avez accès à toute une liste d'outils d'édition :

Liste des outils d'édition et d'intégration

1. Images : intégration d'une image, on peut modifier sa taille, insérer un lien... Vous pouvez choisir vos propres images ou utiliser la banque d'images Unsplash"
   

2. Markdown : c'est notre éditeur en chef, il utilise un langage très simple de balisage. On va revenir dessus évidemment.
   

3. HTML : celui-là, c'est  pour intégrer du code HTML.
   

4. Gallery : vous pouvez insérer une galerie de 9 images.
   

5. Divider : cela ajoute une ligne séparatrice horizontale.
   

6. Bookmark : cela ajoute un signet de votre choix sous forme de carte, c'est vraiment sympa.
   

7. Email content : si j'ai bien compris, cela crée une personnalisation d'un envoi de courriel aux  membres du blog.
   

8. Email call to action : c'est un appel par e-mail aux membres du site, c'est assez flou.
   

9. Public preview : cela concerne surtout si l'on monnaie son blog, cela permet de monter des parties payantes de la publication à des visiteurs "free"
   

10. Button : vous pouvez ajouter un bouton sur votre site avec un lien personnalisé vers une action ou autre selon vos souhaits.
    

11. Callout : c'est assez agréable, cela met en évidence dans un encart esthétique un texte important.
    

12. Toggle : cela permet d'afficher qu'une partie du texte, le reste est à dérouler ou à déplier  par un clic, c'est top !
    

13. Audio : intègre un fichier audio à votre publication.
    

14. Video : intègre une vidéo à votre post.
    

15. File : insère un lien de téléchargement d'un fichier.
    

16. Product : si vous vendez des produits, cela permet d'afficher une carte de mise en avant.
    

17. Header : vous pouvez ici créer un entête esthétique à la place d'un titre ou d'un séparateur. 
    

18. Signup Card : vous pouvez intégrer une carte d'invitation à l'abonnement dans votre publication.
    

L'éditeur Markdown sera votre principal allié, je vais vous présenter ici la majorité des syntaxes qui permettent de formater tout ce que vous rédigez. Elles sont très faciles à utiliser et permettent de travailler rapidement. Certains caractères spéciaux ne sont pas simples à identifier sur un clavier, mais la plupart des OS intègrent un tableau de ces caractères. Vous trouverez aussi tous les raccourcis clavier dans le menu " Post settings" (icône en haut à droite de "Publish")

↯Mot en gras

Mise en gras du texte : ce sont deux tirets "bas"(tiret du 8) avant et après.
__Mise en gras du texte__
Autre méthode
Mise en gras du texte : deux Astérix avant et après le texte sans espace.
**Mise en gras du texte**

↯Mot en italique

Mise en italique du texte : c'est un Astérix au début et à la fin.
*Mise en italique du texte*

↯Les titres

Un gros titre #un dièse avant le mot

Un moyen titre ## deux dièses avant le mot

Un petit titre ### trois dièses avant le mot

Non!!! Ce n'est pas un hashtag ✋⚠️😁😂

↯Le bloc de citation

Bloc de citation: c'est une sorte de mise en avant d'un texte

On met tout simplement cette syntaxe" > "avant le texte
Comme ceci:
>Bloc de citation: c'est une sorte de mise en avant d'un texte

↯Le pastillage

• Une pastille devant le texte : juste un tiret" - "et un espace avant le mot (le tiret du 6) comme ceci - Une pastille devant le texte
  Il se répète à chaque mise à la ligne.

On peut aussi faire pastiller une sous-catégorie :

• Une pastille devant le texte
  • Une autre pastille
    Il suffit de décaler votre syntaxe deux fois vers la droite.

↯La numérotation

1. La numérotation : commencez par "1."suivi d'un espace avant le mot.
   Comme ceci ``1. la numérotation'` le retour à la ligne, va créer le numéro suivant.
2. suivant
3. suivant

↯Insertion d'un lien

Insérer un lien web
votre titre en deux crochets [] et le lien entre deux parenthèses ()
[Insérer un lien web](http://monsu.desiderio.free.fr/atelier/caracteres.html)

↯Le surlignage

Surligner du texte 2 signes" = "avant et après le texte sans espace :
Comme ceci ==surligner du texte==

↯Le barré

Barré du texte, c'est le caractère spécial "~" . On en place deux avant et deux après le texte sans espace :
~~barré du texte~~

↯Les exposants

exposant ^haut un accent circonflexe avant et après le mot "haut" comme ceci :
^haut^
exposant _bas le caractère spécial "~" avant et après le mot "bas" comme ceci :
~bas~

↯Les notes en bas de page

Pour implémenter une note en bas de page, il suffit d'indiquer après le mot concerné cette balise. [^1]
et d'inscrire quelque part dans le paragraphe la relation avec cette balise.
[^1]: On écrit ici ce qui apparaitra en bas de page.
Si vous avez plusieurs notes, vous aurez la balise. [^2]
[^2]: On écrit ici ce qui apparaitra en bas de page.
Laisser toujours une ligne vierge après cette indication.

Exemple :
Ghost est un blog en pleine ascension ^[1], je l'utilise tous les jours. Quelqu'un m'a parlé de Wordpress^[2] mais je lui ai dit que je préférais rester sur ce CMS.

↯Le code de formatage

Le code en ligne et le bloc de code permettent une présentation technique plus adaptée de certains éléments de texte et de caractères :
On utilise pour cela la syntaxe "backtick"`" une espèce d'apostrophe inversée.

Le code en ligne permet d'enfermer les termes avec précision en utilisant un backtick au debut et un à la fin comme ceci :

j'ai une seule ligne

j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire,j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire,j'ai plusieurs lignes à écrire, j'ai plusieurs lignes à écrire,

Vous voyez que le format se limite au texte.

Le bloc de code crée un bloc complet :

Je crée un bloc formaté en déplaçant la ligne vers l'intérieur.

Je crée un bloc complet

J'ai utilisé deux méthodes pour créer le bloc.
1ʳᵉ méthode : vous déplacez votre texte vers l'intérieur avec la barre d'espace.
2ᵉ méthode : vous placez 3 "backticks"```(sans espace) au dessus et 3 en dessous de ce que vous inscrivez.

• On va prendre l'exemple d'un fichier "json" qui ont des marges et des colonnes dans leur conception:
  Si je met qu'un seul "backtick" au début et la fin, voilà ce que l'on obtient:

{ "url": "http://10.0.0.22:2368/", "server": { "port": 2368, "host": "10.0.0.22" }, "database": { "client": "mysql", "connection": { "host": "10.0.0.7", "user": "userghost", "password": "ghost", "database": "ghost" } }, "mail": { "transport": "Direct" }, "logging": { "transports": [ "file", "stdout" ] }, "process": "systemd", "paths": { "contentPath": "/opt/ghost/content" } }

C'est le bazar et si vous le copiez tel quel, rien ne va marcher😱.
Pour ce type de fichier, il est impératif que ce soit un bloc de code:
On insère trois backsticks avant et après!!!
On obtient cela :

  "url": "http://10.0.0.22:2368/",
  "server": {
    "port": 2368,
    "host": "10.0.0.22"
  },
  "database": {
    "client": "mysql",
    "connection": {
      "host": "10.0.0.7",
      "user": "userghost",
      "password": "ghost",
      "database": "ghost"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "systemd",
  "paths": {
    "contentPath": "/opt/ghost/content"
  }
}

C'est mieux, non ?

ATTENTION : entre chaque bloc de code, il faut laisser une ligne vierge !

On peut aussi, integrer un bloc de code en utilisant directement l'outil HTML.

↯Insertion d'une ligne

L'insertion d'une ligne séparatrice : il suffit d'écrire au moins trois fois le tiret "-"(tiret du 6) entre deux lignes vierges :
---

Pour ceux qui sont intéressés, voici le code pour changer la couleur de la ligne :

<style>
hr.red {
  border: 1px solid  #f44336;
  border-radius: 1px;
}
</style>

Ce code est à inscrire dans "Post settings" à "Code injection"
Pour l'exemple, la ligne est rouge.
Pour l'intégrer dans votre publication, il faut faire appel à cette ligne.
Par la balise
<hr class="red">

Vous la verrez en couleur dans la "preview"

↯Créer un tableau

|nom      |  prénom     |  age     |     
|:-----|:-------:|---:|   
| Willis      |   Bruce    |   65    |             
| Cage      |  Nicolas     |   60    |             
|  Pitt     |   Brad    |   60    |     

Une barre verticale entre chaque colonne et une désignation pour définir la colonne
Le tiret horizontal (tiret du 6), son nombre définit la largeur de la colonne.
Les deux points quand ils sont :
À gauche = alignement à gauche
À droite = alignement à droite
Des deux côtés = centré

Certaines balises n'existent pas sur Markdown, on peut intégrer du code HTML, celui-ci les interprète sans problème.

↯Souligner du texte

On utilise la balise html <U> qu'on met avant et après le mot à souligner comme ceci <U>mot souligné</U>
Ce qui donne mot souligné

• Il faut savoir qu'on ne recommande plus de souligner un texte sur les publications web, car il y a confusion avec les liens.

↯Mettre en couleur la police

Pour la couleur de la police, on utilise la balise </span>

<span style="color: #f44336 ">je veux un texte en rouge</span>

je veux un texte en rouge

↯Mettre le fond de texte en couleur

Pour une couleur de fond pour le texte, on utilise la balise </mark>

Dans le texte, <mark style="background: #f44336;">Je veux une couleur de fond rouge </mark>, c'est pas terrible.

Dans le texte, Je veux une couleur de fond rouge , c'est pas terrible.

↯Aligner le texte

Alignement du texte avec le code html suivant:

<p style="text-align: left;">Gauche</p>

a droite
<p style="text-align: right;">Droite</p>

au centre
<p style="text-align: center;">Centre</p>

Ce qui donne:

Gauche

Droite

Centre

Une dernière petite chose : Le "snippet" permet d'enregistrer des extraits de vos articles, des éléments récurrents a vos publications.
Un exemple:

Vous voulez enregistrer cette info que vous allez répéter sur tous vos posts.
Il suffit de cliquer sur le petit carré écorné à côté du stylo :

Vous enregistrez ce "snippet", il sera disponible dans le menu des outils d'édition. Vous pouvez réaliser des "snippets" sur tout ce que vous insérez dans vos articles.

Vous pouvez aussi créer un snippet pour une action : tout à l'heure je vous ai montré comment intégrer une ligne séparatrice rouge en utilisant du code HTML
Pour appeler, cette ligne, il faut écrire, à chaque fois, son code d'appel. Pour automatiser cette action, il suffit d'enregistrer cette ligne dans un snippet.

Voilà en ce qui concerne l'édition. On a tout ce qu'il faut pour faire ce que l'on veut dans nos publications et franchement c'est vraiment facile d'utilisation. Une dernière recommandation, n'écrivez pas tout votre article dans un seul corp ou bloc. Ainsi, on peut facilement interchanger des sections entre elle en les glissant à l'endroit où vous le souhaitez. Cela permet aussi d'être plus structuré dans la publication et de mieux si retrouvé.

Les paramètres du post

On arrive à la dernière partie de cette note, c'est le "Post settings", C'est un passage obligatoire avant de publier, car il y a quelques paramètres à vérifier.
Vous avez en haut à droite de "Publish" un petit bouton à actionner pour découvrir le menu.
On passe tout cela en revue :

• Post url
  Ça reprend le titre de votre post, Vous pouvez le modifier, il ne faut pas qu'il soit trop long, chaque mot doit être séparé par un tiret, il le fait automatiquement de toute façon, n'oubliez pas, c'est ce que les moteurs de recherche vont indexer !

• Publish date
  On s'en doute, c'est la date de publication, vous pouvez la modifier dans le passé.

• Tags
  Très important, un tag, c'est un mot-clé en relation évidemment avec ce que vous rédigez : il permet la structuration de votre blog et une indexation des moteurs de recherche.

• Post acces
  Vous pouvez définir pour ce post, ceux qui peuvent y avoir accès, vous avez défini de manière générale cet état dans les paramètres globaux du site.

• Excerpt
  Cela veut dire extrait, vous pouvez créer un résumé ici pour mettre en avant votre contenu, il sera repris dans la partie Meta data plus bas.

• Authors
  Cela définit l'auteur de la rédaction du post.

• Feature this post
  Si vous l'activez, cet article sera mis en avant sur la page d'accueil.

• Post history
  Celui-là, il va vous plaire, c'est l'historique de votre article, mais pas des logs. Ce sont de véritables "snapshots^[1]" de votre post. Si vous avez fait une grosse bêtise, vous pouvez revenir en arrière et restaurer une version précédente.

• Code injection
  Vous avez la possibilité de modifier certaines parties d'un thème afin de l'adapter à vos besoins.
  Par exemple, vous souhaitez que la photo de couverture soit conforme à une taille prédéfinie par vous, Injectez le code ci-dessous :

<style>
    .article-image {
        max-width: 500px;
        margin: 0 auto !important;
        float: none !important;
 }
</style>

• Meta data
  Cela reprend les données ci-dessus, le titre et l'extrait, que vous pouvez encore modifier et affiner ici. Ce sont ces éléments que les moteurs de recherche indexeront. Attention, le nombre de caractères est limité.

• X card et Facebook card
  Vous pouvez créer ici une carte de votre article à intégrer sur vos réseaux sociaux.

• Keyboard shortcuts
  Tout ce qu'on a vu dans l'édition plus haut concernant les syntaxes existe sous forme de raccourcis clavier que vous pouvez mémoriser et utiliser.

• A tout moment de la création de votre post, vous pouvez avoir un aperçu de ce qu'il donne à l'aspect et à la lecture. Il suffit pour cela de cliquer sur "Preview" en haut a gauche de "Publish"
  Vous verrez le rendu sur un écran classique et sur un smartphone et comment apparait le partage sur les réseaux sociaux.
  Vous pouvez aussi l'envoyer par e-mail à quelqu'un de vos membres pour relecture.

Enfin La publication, la mise en ligne de votre article, il suffit de cliquer sur "Publish" en haut à droite. Vous pouvez publier immédiatement ou prévoir un jour et une heure de publication, dans ce cas le système le mettra en ligne à l'instant programmé. Vous pouvez aussi envoyer votre article en "newsletter" à vos membres.

Ainsi s'achève cette épopée sur Ghost...Ben non, il y aura une suite car il faut parler de la mise en forme de son blog, on parlera de pages et de tags...A suivre.

C'est terminé!!!