(DEV) Thèmes

Décomposition d'un thème

(TWIG/PHP) Un theme se compose de la façon suivante au niveau squelette:

• blocks : c'est ici que les blocks de wigets et loops de variables sont placés

• blog : c'est ici que les singlepost, amp, commentaires, rss et archives des news sont placés

• customtype : c'est ici que les templates des taxonomies sont placés

• global : c'est ici que les templates de paginations php sont placés

• layout > footer-parts : c'est ici que se situe les scripts de bas de page

• layout > footers : c'est ici que se situe le footer principal

• layout > headers : c'est ici que se situe les headers principaux

• layout > parts : c'est ici que se situe les menus.json et le menu principal

• modules-core : c'est ici que se situe des extensions de widgets au theme

• pages : c'est ici que se situe les templates des pages

• templates > footers : c'est ici qu'est sauvegarder les footers en html depuis le FSE

• templates > statics : c'est ici qu'est sauvegarder les pages au format .twig depuis le FSE

• base.twig correspond au layout principal du site

• theme.json correspond à l'identification du thème

Injection dans le footer ou le header de votre thème, dans vos modules c'est également possible.

{% block headextends %} INJECTERA DANS VOTRE HEAD {% endblock %}
{% block footextends %} INJECTERA DANS VOTRE FOOTER {% endblock %}

CORE EDITOR

Dans la partie ADMIN, vous disposez d'un "Editeur avancé" permettant ainsi de modifier le HTML/CSS/JS/TWIG/PHP/ENV/.TXT/JSON.. de votre site !

Editeur de code twig,php,js,css,robots,json,htaccess...

TWIG EDITEUR

Dans la partie ADMIN, vous disposez d'un "Editeur Twig avancé" permettant ainsi de crée/modifier/supprimer, des blocks customs, des templates de taxonomies ou d'articles/pages depuis le CMS, ils seront automatiquement reconnu dans vos articles/pages/taxonomies.

Editeur de blocks et de templates customs de taxonomies,blog,pages TWIG uniquement

(CSS/JS) Un theme se compose de la façon suivante au niveau FRONT:

Niveau CSS

• front/themes/nom_du_theme/assets/{css/fonts/js/img}..

• front/themes/nom_du_theme/preview.jpg

• /css/parts/ (andromede.css + blog.css + global.css)

• andromede.css = le framework CSS en général du CMS

• blog.css = le design des articles en général

• global.css = le design en général du site/theme

Niveau Javascript

• Le front n'utilise pas du tout JQUERY mais HOTWIRED STIMULUS/TURBO et JS natif.

• Documentation : https://hotwired.dev/

• /js/AndromedeTheme.js (charge les dépendances JS Hotwired) et votre propre JS natif.

// requis
import { Application, Controller } from '/front/core/js/androfast/AndromdeStimulus.js';
import CoreAPI  from '/front/core/js/androfast/CoreApi.js';

const StimulusApp = Application.start();

// votre propre controller
StimulusApp.register("votre_controller", class extends Controller {

   // Permet d'ajouter des valeurs au dom, ex: data-votre_controller-macles-value="5"
    static values = {
      'macles':String
    }
    
    // charge a la connexion d'une page de façon permanent et affichera ici COUCOU 1 fois.
    connect(){
      // this.maclesValue : Affichera donc 5
      this.helloWorld();
    }

    // décharge à chaque changement de page, et donc affichera COUCOU x fois.
    disconnect(){
      this.helloWorld();
    }
    
    // crée vos propres actions exemple: data-action="click->votre_controller#helloWorld"
    // executera cette fonction ;)et affichera en console coucou !
    helloWorld(){
      console.log('COUCOU');
    }
    
});