Contextes & Routage Ghost 2026 : Templates Dynamiques (Post, Page, Tag, Author…)

Les thèmes Ghost reposent sur un système de templating flexible avec Handlebars. Les contextes définissent les données disponibles selon la page consultée, et le routage détermine quel template utiliser pour une URL donnée. Ce guide s'adresse aux débutants en développement web, comme les propriétaires de PME ou les startups qui veulent personnaliser leur site sans partir de zéro. Nous couvrons les bases des contextes (post, page, tag, author, error, index), le routage dynamique, et des exemples pratiques pour une homepage personnalisée et des templates de posts.

Qu'est-ce qu'un contexte dans Ghost ?

Un contexte est un environnement qui détermine les données accessibles dans un template Handlebars (.hbs). Il s'active en fonction de l'URL visitée. Par exemple, sur une page d'article, le contexte "post" charge les données de cet article. Les contextes interagissent avec les helpers Handlebars, comme {{meta_title}} pour les métadonnées SEO.

Pour détecter le contexte actif, utilisez le helper {{#is}} :

{{#is "post"}}
  <p>Ceci est un article.</p>
{{else}}
  <p>Autre type de page.</p>
{{/is}}

Les contextes principaux incluent index (homepage), post (article), page (statique), tag (archive par tag), author (par auteur), et error (erreurs). Tous ont accès aux données globales @site (titre du site, logo).

Le contexte index : La liste des publications

Le contexte index gère la liste des posts sur la homepage ou les pages paginées (/page/2/). Il utilise le template index.hbs. Sur la première page (/), c'est le contexte "home" ; ensuite, c'est "page".

Données disponibles :

Une liste de posts, triés du plus récent au plus ancien (limite : posts_per_page dans package.json).
Pagination via {{pagination}}.

Exemple basique dans index.hbs :

{{!< default}}  {{!-- Inclut le layout par défaut --}}
<main>
  {{#foreach posts}}
    <article>
      <h2><a href="{{url}}">{{title}}</a></h2>
      <time>{{date format="DD MMMM YYYY"}}</time>
      {{excerpt}}  {{!-- Aperçu --}}
    </article>
  {{/foreach}}
  {{pagination}}  {{!-- Liens précédent/suivant --}}
</main>

Si index.hbs n'existe pas, Ghost utilise un template par défaut. Ce contexte sert aussi de fallback pour les archives tag/author si pas de template spécifique.

Le contexte post : Afficher un article individuel

Le contexte post s'active sur /:slug/ (configurable en admin). Template principal : post.hbs (obligatoire). Hiérarchie : d'abord post-:slug.hbs (pour un post spécifique), puis template custom sélectionné en admin, enfin post.hbs.

Données : Objet post avec id, title, slug, excerpt, content, url, feature_image, meta_title, published_at, primary_author, tags. Accédez via bloc {{#post}}.

Helpers spécifiques : {{title}}, {{content}}, {{url}} (préférez-le à post.url), {{date}}, {{excerpt}}, {{img_url}} pour images, {{post_class}} pour classes CSS dynamiques (ajoute "post", "featured", "tag-slug").

Exemple post.hbs :

{{!< default}}
{{#post}}
<article class="{{post_class}}">
  <header>
    <h1>{{title}}</h1>
    <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
    {{#foreach tags}}
      <span class="tag-{{slug}}">{{name}}</span>
    {{/foreach}}
  </header>
  {{#if feature_image}}
    <img src="{{img_url feature_image size='m'}}" alt="{{feature_image_alt}}">
  {{/if}}
  <section>{{content}}</section>
</article>
{{/post}}

Pour les pages statiques, si pas de page.hbs, il fallback sur post.hbs mais avec page: true.

Le contexte page : Les pages statiques

Similaire au post, mais pour les pages statiques (/slug/). URL fixe : /:slug/. Template : page.hbs (optionnel ; fallback sur post.hbs). Hiérarchie : page-:slug.hbs, puis page.hbs, puis post.hbs.

Données : Même que post (title, content, etc.), avec page: true. Accès via {{#post}} (oui, même bloc).

Différences : Pas de date published par défaut, URL non configurable. Idéal pour "À propos" ou "Contact".

Exemple page.hbs :

{{!< default}}
{{#post}}
<article class="{{post_class}}">
  <h1>{{title}}</h1>
  <div class="page-content">{{content}}</div>
</article>
{{/post}}

Pour une page "about", créez page-about.hbs pour un design unique.

Le contexte tag : Archives par étiquette

Actif sur /tag/:slug/ ou /tag/:slug/page/:num/. Template : tag.hbs (fallback : index.hbs). Hiérarchie : tag-:slug.hbs, tag.hbs, index.hbs.

Données :

Objet tag : id, name, slug, description, feature_image, meta_title, url, accent_color.
Liste de posts via {{#foreach 'posts'}}.
Pagination : {{pagination}}.

Exemple tag.hbs :

{{!< default}}
{{#tag}}
  <h1>{{name}}</h1>
  {{#if description}}<p>{{description}}</p>{{/if}}
  {{#if feature_image}}
    <img src="{{img_url feature_image}}" alt="{{name}}">
  {{/if}}
{{/tag}}
<main>
  {{#foreach posts}}
    <article>
      <h2><a href="{{url}}">{{title}}</a></h2>
    </article>
  {{/foreach}}
</main>
{{pagination}}

Utile pour regrouper du contenu thématique, comme "Tutoriels" ou "Actualités".

Le contexte author : Pages d'auteur

Pour /author/:slug/, listant les posts d'un auteur. Template : author.hbs (fallback : index.hbs). Hiérarchie : author-:slug.hbs, author.hbs, index.hbs.

Données :

Objet author : id, name, bio, location, website, profile_image, cover_image, url.
Liste posts : {{#foreach posts}}.
Pagination.

Exemple :

{{!< default}}
{{#author}}
  <header>
    <img src="{{profile_image}}" alt="{{name}}">
    <h1>{{name}}</h1>
    {{#if bio}}<p>{{bio}}</p>{{/if}}
    <a href="{{website}}">Site web</a>
  </header>
{{/author}}
<main>
  {{#foreach posts}}
    <article><h2><a href="{{url}}">{{title}}</a></h2></article>
  {{/foreach}}
</main>
{{pagination}}

Parfait pour les blogs multi-auteurs en startup.

Le contexte error : Gestion des erreurs

Pour les pages d'erreur (404, 500). Template : error.hbs. Hiérarchie : error-:code.hbs (ex. error-404.hbs), error-4xx.hbs (tous 4xx), error-5xx.hbs, puis error.hbs.

Données : statusCode, message, errorDetails (rule, ref, message). Limité : seul {{asset}} autorisé (pas d'autres helpers, sauf en 404).

Exemple error.hbs :

{{!< default}}
<main>
  <h1>Erreur {{statusCode}}</h1>
  <p>{{message}}</p>
</main>

Personnalisez pour une expérience utilisateur cohérente.

Routage dynamique dans Ghost

Le routage mappe les URLs aux templates via routes.yaml (éditable en admin > Labs). Redémarrez Ghost pour les changements manuels.

Configuration de base :

routes:
  /: template: index
collections:
  /:
    permalink: /{slug}/
    template: index
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Routes custom

Pour une page statique /features/ :

routes:
  /features/:
    template: features

Avec données d'une page (slug "team") :

routes:
  /about/team/:
    template: team
    data: page.team  {{!-- Redirige /team/ vers nouvelle URL --}}

Pour un RSS custom :

routes:
  /podcast/rss/:
    template: podcast-feed
    content_type: text/xml

Collections

Groupent les posts en sections. Ex. : Blog sous /blog/ :

routes:
  /: template: home  {{!-- Homepage custom --}}
collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index
    filter: primary_tag:blog  {{!-- Filtre par tag principal --}}

Pour multilangue :

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: 'tag:-#de'  {{!-- Exclut allemand --}}
  /de/:
    permalink: /de/{slug}/
    template: index-de
    filter: 'tag:#de'

Taxonomies

Génèrent archives. Customisez :

taxonomies:
  tag: /topic/{slug}/
  author: /host/{slug}/

Omettez pour désactiver.

Channels

Flux filtrés sans changer URLs (posts dans plusieurs). Ex. :

routes:
  /apple-news/:
    controller: channel
    filter: tag:[iphone,ipad,mac]

Tutoriel : Créer une homepage custom

Utilisez home.hbs pour une homepage unique (reconnu auto). Commencez par le thème Casper.

Créez home.hbs :

{{!< default}}
<main>
  <section class="hero">
    <h1>Bienvenue sur votre site</h1>
    <p>Description de votre PME.</p>
    <button data-portal="signup">S'abonner</button>
    <img src="{{img_url @site.cover_image size='l'}}" alt="Couverture">
  </section>
  <section>
    <h2>Derniers articles</h2>
    <div class="grid">
      {{#foreach posts limit="3"}}
        <article>
          {{#if feature_image}}
            <img src="{{img_url feature_image size='m'}}" alt="{{title}}">
          {{/if}}
          <h3><a href="{{url}}">{{title}}</a></h3>
        </article>
      {{/foreach}}
    </div>
  </section>
</main>

Ajoutez CSS dans assets/css/home.css et importez-le.
Pour sections filtrées (ex. tag "actus") :

{{#get "posts" filter="primary_tag:actus" limit="6"}}
  {{#foreach posts}}
    <article>...</article>
  {{/foreach}}
{{/get}}

Testez localement, uploadez en admin.

Tutoriel : Templates de posts custom

post.hbs rend les articles. Ajoutez conditions avec {{#match}}.

Exemple header avec tag principal :

{{#post}}
<header>
  {{#match primary_tag}}
    <div style="--color: {{primary_tag.accent_color}};">
      <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
    </div>
  {{/match}}
  <h1>{{title}}</h1>
  {{#is "post"}}
    <p>{{plural authors.length empty="" singular="Auteur" plural="Auteurs"}} : {{authors}}</p>
    <time>{{date}}</time>
  {{/is}}
  {{#match feature_image_caption}}
    <p>{{feature_image_caption}}</p>
  {{/match}}
</header>

{{#match feature_image}}
  <picture>
    <source srcset="{{img_url feature_image size='m' format='webp'}}" type="image/webp">
    <img srcset="{{img_url feature_image size='m'}}" alt="{{title}}">
  </picture>
{{/match}}

<article>{{content}}</article>

{{comments}}  {{!-- Si activé --}}
{{/post}}

Utilisez {{post_class}} pour CSS : .post.tag-tuto { ... }.

Pour un template spécifique, sélectionnez-le en édition de post.

Conclusion

Les contextes et le routage permettent des sites adaptables sans complexité. Commencez par copier des exemples, testez en local, et itérez. Pour PME et startups, cela signifie une homepage engageante et des archives organisées, boostant l'engagement sans code lourd. Consultez routes.yaml pour des ajustements avancés.

Contextes & Routage Ghost: Templates Dynamiques