Yoan De Macedo [ Web & Ecologie ]

Les thèmes

Le thème permet de faire le lien entre le contenu et la page HTML générée (le résultat qui sera finalement affiché).
Il est possible de préparer plusieurs thèmes pour un site puis de choisir celui qui sera utilisé.

C'est probablement la partie la plus technique dans l'utilisation de Fruga. Si vous décidez de réaliser votre propre thème alors vous avez besoin de maîtriser le HTML / CSS et d'avoir quelques notions de PHP.
Aucun "méta langage" comme smarty ou twig n'est utilisé. Les thèmes utilisent directement du PHP. Je sais que certains n'aiment pas cette approche.

J'ai moi-même par le passé développé une sorte de "méta langage" pour un CMS e-commerce. Avec le recul, je me dis que ce n'était pas forcément nécessaire.
PHP a été développé au départ pour créer des pages web. Il s'insère parfaitement dans des pages HTML et il n'est pas obligatoire d'ajouter une couche supplémentaire. C'est peut-être un peu moins bien pour la gestion des erreurs notamment mais ça offre aussi de nombreux avantages.

Pourquoi je parlais plus haut de "notions de PHP" pour réaliser un thème Fruga ? Tout simplement parce que l'outil expose quelques méthodes relativement simple pour construire assez facilement quelque chose. Mais, ceux qui voudront aller plus loin et qui maitrisent le PHP pourront repousser les limites.

J'ai choisi de mettre en place pour mon site, un thème très sobre. Il est tout à fait possible de créer des thèmes très graphiques si on le souhaite. Vous êtes libre de réaliser ce que vous souhaitez. Personnellement, je pense que la sobriété est importante pour rendre le web plus léger mais c'est un avis personnel.

Je vous invite à étudier le thème "simple" du site "example" (sites/example/themes/simple). Parfois un exemple vaut mieux qu'un long discours.

Structure générale d'un thème

            montheme
                |
                |____ css
                |
                |____ templates
                         |
                         |_____ home.php
                         |
                         |_____ page.php

Le répertoire css contiendra vos feuilles de style.
Le répertoire template contiendra tous les modèles de pages : si vous avez un fichier de contenu page.md quelque part alors il faudra un page.php, si vous avez un home.md alors on aura besoin d'un home.php

Ce template php définira comment s'affichera le contenu des pages du type correspondant.
Vous pouvez tout à fait découper le header, le footer, faire des inclusions d'autres fichiers PHP etc. Vous êtes libre.

Il est possible aussi d'ajouter d'autres répertoires à la racine du thème (un dossier js par exemple pour votre code javascript).

Configuration

Pour choisir le thème qui sera utilisé par le site, il faudra éditer le fichier sites/monsite/configuration/theme/theme.json

            {
                "name":"montheme"
            }

Ce fichier de configuration s'étoffera peut-être dans le futur en fonction des thèmes.
Pour l'instant, on utilise simplement la propriété name qui définit le nom du thème utilisé.
Le système ira chercher ici le thème dans sites/monsite/themes/montheme

Conception du thème

Comme vous l'avez vu précédemment, il est possible de créer plusieurs modèles de pages. Rappelez vous home.md, page.md, etc.

Imaginons que vous vous rendiez sur la page /blog/article-a et que le dossier sites/monsite/pages/blog/article-a contienne le fichier markdown page.md.
C'est le script page.php du thème qui sera chargé au moment de la génération de cette page.
Celui-ci recevra notamment la structure et le contenu du fichier markdown. Il pourra alors l'utiliser pour afficher les informations aux endroits souhaités.

Pour récupérer et afficher les informations d'en-tête d'un contenu :
```
        <?php echo $page->get('nom_du_header'); ?>
```

Il suffit de remplacer nom_du_header. Par exemple title ou un header que vous auriez ajouté.

Pour récupérer et afficher la partie contenu :

        <?php echo $page->get('content'); ?>

Pour récupérer et afficher la partie contenu :

        <?php echo $page->get('content'); ?>

Pour récupérer et utiliser le lien d'une page :
Imaginons que dans votre menu, vous souhaitiez faire un lien vers la page /mes-prestations.
```
        <a href="<?php echo $page->find('/mes-prestations')->get('link'); ?>">Mes prestations</a>
```
Lister des pages :
Vous pourriez (pour un blog par exemple) vouloir lister les différentes articles avec un lien pour les visualiser.
Je le fais aussi sur la page qui liste les différentes sections de cette documentation.
```
        $articles = $page->find('/fruga/doc/fr')->children->sort('pos', 'asc'); 
```

Ici, on récupère toutes les pages qui sont "enfants" de /fruga/doc/fr (Introduction, Commencer avec Fruga, ...).
On les classe via un ordre manuel (le petit numéro dont je vous ai déjà parlé devant le nom du répertoire). On aura donc un classement du plus petit au plus grand. Si je veux faire l'inverse, j'utilise desc à la place de asc (la liste des classements va s'étoffer dans le futur).

Ensuite je n'ai plus qu'à "boucler".

                <ul id="archiveList">
                    <?php 
                        foreach($articles as $article){ 
                    ?>
                    <li><a href="<?php echo $article->get('link'); ?>"><?php echo $article->get('title'); ?></a> <a href="<?php echo $article->get('link'); ?>">[Lire]</a></li>
                    <?php } ?>         
                </ul>

Avec toutes ces informations, vous êtes en mesure de réaliser votre propre thème.
En fonction des retours, je reviendrai probablement modifier cette page. Comme je vous l'ai dit, c'est la partie la plus technique dans l'utilisation de l'outil Fruga.
Je le répète mais n'hésitez pas à regarder le thème du site "example" et à le modifier pour expérimenter.

Retour au sommaire de la documentation

Mentions légales | Politique de confidentialité | RSS | Généré par Fruga