Votre site et les Modèles

Un modèle est un petit squelette SPIP qui décrit un fragment de HTML facile à insérer dans un autre squelette.

Article mis en ligne le 19 août 2024

Il insère le résultat d’un squelette contenu dans le répertoire modeles/.

Ces inclusions peuvent aussi être appelées depuis la rédaction d’un article (avec une écriture spécifique) :

il est ainsi possible de créer de nouveaux raccourcis de la forme <modele1>, simplement en ajoutant un squelette dans le répertoire modeles/ de son dossier de squelettes !

On prendra soin de nommer son fichier en lettres minuscules, SPIP ne recherchera que des fichiers nommés en minuscules.

Attention
En l’absence de tout modèle correspondant au raccourci indiqué (par exemple, <breve1>), le gestionnaire de modèle de SPIP regarde s’il connaît l’objet demandé (ici, breve), et si ce dernier a une URL.

<breve1> Dans ce cas (vérifié ici, car les brèves sont connues du système et disposent d’une fonction d’URL), SPIP remplace le raccourci <breve1> par un petit encadré flottant, avec un lien vers la brève, et l’affichage de son titre, comme si l’on avait indiqué [->breve1].

Si l’objet n’est pas connu, SPIP laisse le raccourci intact, pour qu’il soit éventuellement traité par la suite (par un plugin ou un filtre supplémentaire), ou tout simplement ignoré.

la syntaxe d’un modeles :

// XX est l'identifiant de l'objet à transmettre.
<nomXX>
// arguments avec des |
<nomXX|argument=xx|argument2=yy>

Il est par ailleurs possible de passer des paramètres supplémentaires aux modèles. La syntaxe en est généralisée et accepte même du HTML, comme dans l’exemple :

<son19|couleur=#ff0000
   |legende=Le grand <i>Count Basie</i>
   |photo=12>

qui pourrait appeler un modèle modeles/son.html, lequel exploiterait les paramètres pour afficher la photo numéro 12, dans un cadre de couleur #ff0000, avec une légende comportant des mots en italique.

Des usages multiples, voici quelques exemples

Afficher une image timbrée.

Une fois qu’on sait faire un squelette qui affiche une photo sous forme de timbre-poste, il suffit de le nommer modeles/timbre.html pour créer le raccourci .

timbre.html

Rôle : placer vos images de 600 × 350 pixels dans des timbres.

[(#SET{id_doc, #ENV{doc}})]

<BOUCLE_documents_joints(DOCUMENTS){id_document=#GET{id_doc}}>
[(#FICHIER|image_masque{images/timbre-horizontal.webp}|image_masque{images/timbre-horizontal.webp}|image_rotation{-5}|image_reduire{0,140})]


<article class="entry document spip_doc[ (#EXTENSION|attribut_html)]">
							<strong class="h3-like entry-title">[(#TITRE|sinon{#FICHIER|basename|couper{80}})]</strong>
							<span class="type"><span class="sep"> - <span class="sep"> - </span>[(#TAILLE|taille_en_octets)]</span>
							</p>
							[<div class="#EDIT{descriptif} introduction entry-content">(#DESCRIPTIF)</div>]
						</article>


</BOUCLE_documents_joints>

Exemple :
<timbre|doc=xx>

L’Essaillon - - 29.1 kio

L’Essaillon : Etudier, préserver et faire connaître le Patrimoine Historique, Naturel et Culturel de Séderon et de sa Région.

choix_article_mot.html

Rôle : Afficher une liste d’articles
Quelques paramétrages supplémentaires permet de choisir le nombre de colonnes (colonne=x] limité à 3 colonnes max, la taille du logo (logo=50) et le choix de la couleur et du dégradé (background=linear-gradient(#DAE6F6, #336699))

Exemple :
<choix_article_mot|mot=SPIP|colonne=3|logo=50|background=linear-gradient(#DAE6F6, #336699)>
xx étant le mot-clé choisie

[(#SET{mot,[(#ENV{mot})]})]

[(#SET{colonne,[(#ENV{colonne,1})]})]
[(#SET{fond,[(#ENV{background,[(#CONFIG{escal/config/couleuruneart,#DAE6F6})]} )] } )]
[(#SET{logo,[(#ENV{logo,80})]})]

[(#GET{colonne}|=={1}|oui)
#SET{width,100}
]
[(#GET{colonne}|=={2}|oui)
#SET{width,40}
]
[(#GET{colonne}|=={3}|oui)
#SET{width,25}
]
[(#GET{colonne}|>={4}|oui)
#SET{width,25}
]

<div class="container-choix">
<br />
<BOUCLE_article (ARTICLES){titre_mot=#GET{mot}}{par sinum titre, num titre, titre}>

<div class="choix-article choix#ID_ARTICLE" style="width:#GET{width}%;">
<a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]"
title="[(#DESCRIPTIF|textebrut|entites_html)]" style="background:#GET{fond}">
<!-- affichage logo -->
	<span class="logo-choix"> [(#LOGO_ARTICLE_RUBRIQUE||image_reduire{#GET{logo},0})] </span>
	
<!-- affichage titre -->
	<span class="titre-choix">
	[(#TITRE|couper{#CONFIG{escal/config/nbrecaracttitre,27}})]
	</span><br />

<!-- affichage rubrique -->
	<BOUCLE_Rub_suite(RUBRIQUES){id_rubrique}{si #CONFIG{escal/config/affichrubrique}|=={non}|non}>
		<span class="rubrique-choix">
			 <:rubrique:> : [(#TITRE|couper{30})]
		</span>
		<br />
	</BOUCLE_Rub_suite>
	<br />
	<div class="nettoyeur"></div>

<!-- affichage texte article -->
	<div class="texte-autres">
		[(#TEXTE*|couper{#CONFIG{escal/config/nbrecaracttexte,150}})]      
	</div>
	<br />

</a>
</div>

</BOUCLE_article>

</div>

<code>
<choix_article_mot|mot=SPIP|colonne=3|logo=50|background=linear-gradient(#DAE6F6, #336699)>

----

{{{liste_articles.html}}}
[**Rôle :*] Afficher le titre des articles sur 2 colonnes sauf ceux ayant le mot clé "invisible". Les liens sont clicquables, affichage au hasard,  un classement est possible par numéro, de plus on indique si l'article est nouveau ou modifié.

<code>[(#SET{mot,[(#ENV{mot})]})]

<div class="container-listart">
<BOUCLE_article(ARTICLES){par num titre}{titre_mot=#GET{mot}}{par hasard}{!titre_mot=invisible}>
<div class="listart">
<li>

<BOUCLE_new(ARTICLES){id_article}{age<31}{doublons}>
<a href="#URL_ARTICLE">#TITRE</a>
<span class="changement">Nouveau</span>
</BOUCLE_new>

<BOUCLE_modif(ARTICLES){id_article}{age_modif<7}{doublons}>
<a href="#URL_ARTICLE">#TITRE</a>
<span class="changement">Modifié</span>
</BOUCLE_modif>

<BOUCLE_autres(ARTICLES){id_article}{doublons}>
<a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_autres>

</li>
</div>
</BOUCLE_article>
</div>

Exemple :
<liste_articles|mot=xx>

Adhésion / Cotisation

COOKIES & RGPD

Mentions légales

Sauvegarde & Mise a jour

Accessibilité du site spipfactory.fr

Valide PPNP-NS

Valide KOAK 2.0 (strict)

Sécurisation & Sécurité

playliste.html

Rôle : Afficher une playliste

[<!--(#REM)

	Modele pour <playliste> qui utilise MediaElement.js

	afficher une playliste

	Ex: a partir d'un squelette
	[(#MODELE{playliste}{par=fichier})]
	permet de forcer l'ordre des elements dans la liste
	triee par le nom du fichier mp3.
	Pratique si vos noms de fichiers commencent par
	un chiffre ;-)

-->]#SET{id_first,0}[(#SET{playlist_id,[p(#ENV**|concat{#REM|uniqid}|md5|substr{0,8})]})]
<B_doc>
	<div class="liste documents play-liste">
		[<h2>(#ENV{titre,Playlist})</h2>]
		<dl class='spip_documents spip_documents_playlist[ (#ENV{class})] spip_lien_ok'>
			[(#INCLURE**{fond=players/mejs/player,
				id_document=#GET{id_first},
				player=mejs,
				largeur=1000,
				playlist=[#(#GET{playlist_id})],
			  features=#LISTE{'playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'},
			  plugins=#ARRAY{playlist,#CHEMIN{players/mejs/mejs-feature-playlist.min.js}|timestamp},
			})]
			<dd class="mejs-playlist" id="#GET{playlist_id}">
				<ul class="liste-items">
				<BOUCLE_doc (DOCUMENTS)
					{id_document ?}
					{id_article ?}
					{id_album ?}
					{id_objet ?}{objet ?}
					{media=audio}
					{extension IN mp3,ogg}
					{tri #ENV{par,num titre}}{par titre}{!par date}{0,100}>[(#GET{id_first}|non)#SET{id_first,#ID_DOCUMENT}]
					#SET{titre,#TITRE|sinon{#FICHIER|player_joli_titre|couper{30}}}
					<li class="item short track"
						data-url="[(#FICHIER|attribut_html)]"
						title="[(#GET{titre}|attribut_html)]">
						<article class="entry document spip_doc[ (#EXTENSION|attribut_html)]">
						[(#LOGO_DOCUMENT|image_reduire{100})]
							<strong class="h3-like entry-title">[(#TITRE|sinon{#FICHIER|basename|couper{80}})]</strong>
						<a href="#URL_DOCUMENT" rel="download" class="download" type="#MIME_TYPE" title="<:bouton_telecharger:> [(#TYPE_DOCUMENT) - ][(#TAILLE|taille_en_octets)]" ><:bouton_telecharger:></a>
							<p class="publication">[<time pubdate="pubdate" datetime="[(#DATE|date_iso)]"><i class="icon-calendar"></i> (#DATE|affdate_jourcourt)</time>]
							<span class="type"><span class="sep"> - </span>[(#TYPE_DOCUMENT)]</span><span class="poids"><span class="sep"> - </span>[(#TAILLE|taille_en_octets)]</span>
							</p>
							[<div class="#EDIT{descriptif} introduction entry-content">(#DESCRIPTIF)</div>]
						</article>
					</li>
				</BOUCLE_doc>
				</ul>
			</dd>
		</dl>
	</div>
	[<style>(#INCLURE{#CHEMIN{players/mejs/mejs-feature-playlist.css}|url_absolue_css})</style>]
	[<style>(#INCLURE{#CHEMIN{css/playliste.css}|url_absolue_css})</style>]
</B_doc>

Exemple :
<playliste|id_article=454>