(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 !

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.

(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.
/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');
    }
    
});

Précédent(DEV) Shortcodes/Fonctions SuivantSécurité et Intégralité CMS

Dernière mise à jour il y a 2 mois

// 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'); } });