Ghost - Static front page

Il y a 8 mois j'ai migré l'ensemble de mes sites utilisant Wordpress et Anchor sous Ghost. Il en fut de même pour un portfolio qui était quant à lui sous indexhibit (je ferai peut-être d'ailleurs un article sur comment adapter un blog Ghost à cet usage).

Pour l'un d'entre eux il a été nécessaire de créer une page d'accueil statique, l'idée étant d'afficher à la racine du site les actualités uniquement, pas l'ensemble des articles ni même forcément les plus récents.

La méthode la plus simple et la plus dynamique est d'exploiter le système de tag inhérents à Ghost. Dans l'exemple qui suit nous allons appliquer le tag Actualité aux articles que nous souhaitons mettre en avant sur l'accueil.

Tout d'abord si n'avez pas de fichier home.hbs dans votre, créez-le en copiant le contenu de index.hbs. Ca devrait ressembler à ça:

{{!< default}}

{{! The comment above "< default" means - insert everything in this file into
    the {body} of the default.hbs template, which contains our header/footer. }}

{{> header}}


<div id="post-index" class="container">

<main class="content" role="main">
	
	</main>

</div>

home.hbs se chargera en lieu et place de l'index, Ghost a prévu le coup. Repérez maintenant la ligne <main class="content" role="main">et copiez en dessous la balise {{> actualite}}, tel quel:

{{!< default}}

{{! The comment above "< default" means - insert everything in this file into
    the {body} of the default.hbs template, which contains our header/footer. }}

{{> header}}


<div id="post-index" class="container">
<main class="content" role="main">

    {{> actualite}}


</main>

</div>

En veillant à supprimer la balise {{> "loop"}} pour éviter que la loop se charge.
La balise {{> actualite}} signifie que depuis le home le fichier partial nommé actualite.hbs devra être chargé.

Il ne nous reste plus qu'à créer le fichier en question. Rendez-vous dans le répertoire /VOTREBLOG/content/themes/VOTRETHEME/partials/ et créez le fichier actualite.hbs en y copiant ce qui suit:

{{#foreach posts}}

{{#has tag="Actualité"}}

<article class="home">
		<header class="post-header">
			<div class="clear"></div>
			<section class="post-content">
			<h1 class="home-post-title"><a class="js-ajax-link js-show-post" href="{{url}}">{{{title}}}</a></h1>
			</section>
		</header>
</article>

{{/has}}
{{/foreach}}

Actualite.hbs va donc retourner {{#foreach posts}} tous les articles ayant le tag Actualité {{#has tag="Actualité"}}.

Voilà! Relancez votre blog et attribuez aux articles souhaités le tag choisi, ils devraient apparaître à la racine de votre site. 😜