SPIP-iser une page HTML

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 :

.

 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 :

 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