Créer un site dynamique en YAML Front Matter

Voir la vidéo

Bienvenue dans ce nouveau tutoriel où je vous propose de découvrir comment créer un site dynamique en utilisant des fichiers YAML pour la gestion des contenus à la place d'une base de données MySQL.

Pourquoi ?

Avant de se lancer dans les explications il est important de faire un point sur le pourquoi. Pourquoi se passer d'une base de données et utiliser un fichier YAML pour la gestion des contenus ̉? Le problème se présente lorsque l'on travaille sur des sites de petite envergure, avec quelques dizaines de pages. Le problème c'est que dans ce cas-là le client veut souvent pouvoir modifier de temps en temps le contenu, sans avoir un budget assez conséquent pour mettre en place un système d'administration.

On pourrait évidemment utiliser un CMS tel que WordPress, mais ça serait sortir l'artillerie lourde pour pas grand-chose. L'avantage avec l'utilisation des fichiers YAML est que l'on va pouvoir séparer le contenu de la forme. Du coup si le client vous demande de modifier une page, vous ne vous retrouverez pas à modifier des dizaines et des dizaines de fichiers HTML. Et avec cette méthode vous ne sacrifiez par la portabilité de votre code vu que vous n'utilisez pas de bases de données.

Enfin on peut se demander pourquoi on n'utilise pas des outils tels que Jekyll pour générer les fichiers HTML correspondant à nos différentes pages. Il y a plusieurs raisons à cela :

  • On souhaite pouvoir utiliser PHP si plus tard on veut mettre en place des formulaires de contact par exemple pour récupérer des informations depuis des API.

  • Le client peut avoir la main sur les contenus (en modifiant les fichiers YAML sur le serveur) sans avoir besoin de recompiler les fichiers HTML

YAML Front Matter

Donc le principe que l'on cherche à mettre en place et très inspiré de ce que l'on retrouve sur d'autres outils tels que Jekyll ou Middleman. On va avoir un dossier content qui contiendra des fichiers YAML correspondants différentes pages de notre site. Globalement chaque fichier représentera une page.

Pour la gestion des contenus, on va utiliser un format de fichier particulier, le YAML Front Matter. Ce format de fichier est relativement simple. On va placer dans une première partie du YML qui contiendra les variables de configuration de la page (par exemple le titre la description) et ensuite on aura le contenu qui pourrait être au format HTML, Markdown ou autre.

Afin de générer les routes on va utiliser le Framework Slim et on va utiliser le système d'itérateur de PHP pour être capable de récupérer l'ensemble des fichiers YAML de notre dossier content. Je ne vous copie ici que les parties importantes du code, l'ensemble du projet étant disponible sur GitHub.

$app = new \Slim\Slim(['debug' => true]);
$files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator(content_path . DIRECTORY_SEPARATOR . trim($path, '/')));
$files = new RegexIterator($files, '/^.+\.yaml$/i', RecursiveRegexIterator::GET_MATCH);
foreach($files as $path => $value){
 $page = new Page($path);
    $app->any($page->getUrl(), function() use ($page, $app){
        require app_path . DIRECTORY_SEPARATOR . 'helpers.php';
        echo $page->render();
    })->name($page->getName());
}

Au niveau de nos pages, on va avoir besoin de parser le contenu et récupérer les différentes variables situées dans la partie YML. Pour cela on va utiliser la librairie Frontmatter :

composer require vkbansal/frontmatter

Et ensuite pour parser le fichier il nous suffira de faire :

use VKBansal\FrontMatter\Parser;
$parsed_data = Parser::parse(file_get_contents($path));

// Ce qui va nous donner l'accès à un nouvel objet qui contiendra les méthodes pour accéder aux contenus
$parsed_data->getContent();
$parsed_data->getConfig();

Afin de gérer un système qui soit facilement modulable, on va mettre en place un système d'extension permettant de choisir le formatage du contenu. Si par exemple un fichier à l'extension Markdown alors on utilisera un système de Markdown pour parser la partie contenu. Il nous faut donc créer un petit système de détection de l'extension :

 // $this->path = /var/www/content/page.markdown.yaml
 $pathinfo = explode('.', pathinfo($this->path, PATHINFO_FILENAME));
 $type = end($pathinfo);
 $method = "parse_$type";
 return $this->$method($this->parsed_data->getContent());

Voilà pour la partie qui selon moi nécessite des explications, il y a beaucoup de code pour faire fonctionner notre application, mais c'est plus un problème de logique que de connaissances de PHP. Pour ceux qui souhaiteraient utiliser ce code comme base, ou encore améliorer cette base pour y ajouter des fonctionnalités, le code se trouve disponible sur GitHub.

Publié
Technologies utilisées
Auteur :
Grafikart
Partager