SPIP-iser une page HTML

Les squelettes de l’espace public de SPIP étant en simple HTML, il est très facile de transformer une page HTML même complexe en page de squelette SPIP.

Pour une page-exemple, il faut :
- renommer la page en un fichier de squelette HTML, appelable par les URL de SPIP
- gérer les chemin des fichiers liés (images et feuilles de style),
- remplacer les libellés et textes existants par des boucles et balises d’accès dans SPIP

La migration vers un ensemble de squelettes, bâtis autour du design d’une page récupérée, relèvera d’autres explications, selon qu’on travaille en squelettes simples, ou à partir d’un modèle de squelette Z...

Néanmoins, une précaution s’impose : soyez respectueux des droits d’auteur sur les design trouvés sur le Web, et également des droits à l’image !

 
 
 
 
 
 
 
 
 
 

Supposons que nous disposions d’une page HTML récupérée en ligne : il est probable que vous l’aurez enregistrée sous forme de "page complète" sur votre poste, et votre navigateur aura pareillement récupéré tous les fichiers annexes (fichiers images, feuilles de styles CSS et éventuellement JavaScript) enregistrés dans un sous-dossier, par exemple _fichiers en relatif.

 Nommer le squelette principal

La première étape est d’insérer votre future page dans SPIP, donc de lui donner un nom de fichier, dans le dossier ./squelettes, correspondant aux normes d’appel URL de SPIP :
- soit pour définir un squelette standard de SPIP (cf. Quel squelette modifier ?)
- soit pour ajouter une page nouvelle
auquel cas il faudra aussi insérer des liens d’appel.

Dans notre cas, nous allons commencer par surcharger la page d’accueil du site : il faut donc copier le fichier html en ./squelettes /sommaire.html, qui est le nom réservé par SPIP pour ce premier squelette principal.

 Corriger les chemins d’inclusion

Il est probable que ce source HTML utilise des fichiers liés, que vous pourriez retrouver dans le sous-dossier _fichiers : vous allez pareillement les copier dans un sous-dossier de votre squelette ; on utilise souvent une organisation par types de fichiers, créant par exemple :
- un sous-dossier ./squelettes /css pour les feuilles de styles
- un sous-dossier ./squelettes /images pour les illustrations
- et peut-etre un sous dossier ./squelettes /inclure pour des noisettes réutilisables.

A vous de placer les divers fichiers correspondants dans les emplacements que vous aurez organisés.... [1]
Mais, on s’aperçoit vite que SPIP ne semble pas retrouver ses petits : par exemple, votre page ne semble pas reconnaître votre feuille de style perso.css, que vous avez pourtant bien placée dans le sous-dossier ./squelettes /css : pourtant il vous génère bien ce code <link rel="stylesheet" href="css/perso.css" type="text/css" media="all" /> !! ?

Il faut préciser à SPIP que tous ces chemins sont bien relatifs à notre page squelette : cela se fait simplement en introduisant une balise #CHEMIN{} sur chaque paramètre src, ou href de notre squelette initial :
<link rel="stylesheet" href="#CHEMIN{css/perso.css}" type="text/css" media="all" />en choisissant de dédier un sous-dossier aux feuilles de styles [2]

Vous ferez de même si besoin, pour votre image de logo, ou votre fond de bandeau, et tous vos fonds de div : sans doute penserez vous à également corriger des propriétés background-image dans vos styles....sauf que ?? !

Les images définies en background-image : url(...) ne semblent pas trouvées [3], car les balises SPIP ne sont pas interprétées dans les fichiers n’ayant pas l’extension finale .html

Renommer les fichier .css en .css.html permettra de résoudre le problème d’interpretation de #CHEMIN [4] ; une meilleure solution est peut-être de remplacer l’appel de chemin par l’usage de #URL_PAGE qui forcera l’interprétation spipienne de vos squelettes :

  1. [<link type="text/css" href="(#URL_PAGE{css/perso.css})" rel="stylesheet" media="all,screen">]

.

 Extraire une noisette de menu

Prenons un autre cas fréquent : un bloc HTML (sans doute un <div...    </div>) va être utile dans tous nos squelettes à l’identique !
On va copier-coller ce code dans une noisette, enregistrée dans le sous dossier ./squelettes /inclure/menu-service.html .

SPIP peut se charger de l’inclure dans tout squelette qui contiendra une balise d’appel :
#INCLURE{fond=inclure/menu-service},
en précisant en paramètre de fond de la balise, le chemin relatif du fichier à intégrer dans l’arborescence de ./squelettes/  ; il est inutile de préciser l’extension de fichier .html qui sera automatiquement recherchée par SPIP, et le fond recherche de lui-même dans le #CHEMIN relatif, inutile donc à introduire !

Ce système aurait pu être appliqué dès le paragraphe précédent, en ajoutant directement dans votre squelette la ligne :

#INCLURE{fond=inclure/head}

 Introduire les balises de texte

Il doit rester dans votre page, du texte affiché -actuellement écrit en dur dans le squelette de votre page- !
Il s’agit d’y faire apparaitre les textes issus de vos saisies dans la base de données SPIP :

  1. soit définissant l’Identité du site
  2. soit extrait d’un Article créé : intérssons-nous à ce second cas, plus général :
    il faut que l’article soit rempli, publié pour être accessible au public,
    et une boucle d’accès à la base de données se chargera de l’affichage, plus précisément La boucle ARTICLES et ses balises de champs

Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Et nous verrons utltérieurement que l’emplacement du dossier ./squelettes peut être déplacé !

[2Ce chemin de votre fichier est au standard SPIP 3, et pas au standard SPIP, qui s’attend à le trouver à la racine de ./squelettes.

[3L’etude du code source, et du code résultant générée par SPIP à afficher comme source dans votre navigateur montre cette fois ci, que la balise SPIP #CHEMIN introduite dans votre fichier perso.css n’a pas été interprétée

[4Utilisant [<link type="text/css" href="(#CHEMIN{css/perso.css.html})" rel="stylesheet" media="all,screen">].


Liens visibles seulement pour les inscrits.

Article publié le 18 mars 2014, et actualisé en mai 2015 .

Répondre à cet article