source: spip-zone/_squelettes_/html5up_editorial/inclure/head.html

Last change on this file was 107460, checked in by chankalan@…, 23 months ago

ajout du squelette html5up editorial
README.txt :
Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial
Le squelette Solid State https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_solid_state
a été pris pour commencer celui-ci.

v1.0.0
Ce squelette n'utilise pour l'instant que les articles et les rubriques racines, sans sous-rubrique.

Conseil : utiliser Court-Circuit pour éviter la page rubrique s'il n'y a qu'un seul article dans une rubrique.

La page de configuration permet quelques réglages. On y défini le contenu de la page d'accueil, le premier article est le "héro", le second est le "majeur".
L'article héro : le titre, un résumé + le logo + un bouton "Lire la suite"
L'article majeur : le titre + le champ texte intégral. Si cet article est une "page unique" (plugin "Pages") il n'apparaîtra pas dans le menu. Pour rédiger le texte, un modèle permet d'afficher comme dans le thème de départ une icône de FontAwesome? et un texte en deux blocs par ligne. C'est le modèle <iconebloc|> qui prend quelques paramètres :

|icone=fa-rocket (ou tout autre icone de FontAwesome? http://fontawesome.io/icons/)
|iconetitre=le titre
|iconetexte=le texte

L'article héro de la colonne gauche est aussi désigné dans la page de configuration : on verra le titre, l'introduction et un lien vers la page. En utilisant le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visible sur la page de l'article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l'article XX, avec les parametres :

|affichertitre=non
|afficherlien=non

Un autre modèle permet d'insérer n'importe quel icône de FontAwesome? dans le flux d'un texte <icone> avec des parametres :

|icone=fa-rocket (ou tout autre icone de FontAwesome? http://fontawesome.io/icons/)
|taille=3em (ou 60px ou 150%)

Un problème js empêchait aléatoirement le script javscript/main.js de retirer la classe "is-loading" qui est placé sur la balise body (par ce même script). Ce petit soucis cause des prblèmes plus gros dans l'interface.
Un petit bout de code dans javascript/perso.js permet de retirer cette classe de manière plus sûre, mais c'est une rustine en attendant mieux.

TODO
Vérifier et adapter les modèles où qu'on les insère.
Retrouver le multilinguisme
Adapter les autres objets SPIP (mots, sites, brèves)

File size: 2.2 KB
Line 
1[(#REM) Fierement fabrique avec SPIP ]
2<meta name="generator" content="SPIP[ (#SPIP_VERSION)]" />
3
4[(#REM) Divers ]
5<meta name="viewport" content="width=device-width, initial-scale=1" />
6
7[(#REM) Lien vers le flux RSS du site ]
8[<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="(#URL_PAGE{backend})" />]
9
10[<link rel="stylesheet" href="(#CSS{css/main.css})" type="text/css" />]
11[<!--\[if IE 8\]><link rel="stylesheet" href="(#CSS{css/ie8.css})" /><!\[endif\]-->]
12[<!--\[if IE 9\]><link rel="stylesheet" href="(#CSS{css/ie9.css})" /><!\[endif\]-->]
13
14[<link rel="stylesheet" href="(#CSS{css/spip.css})" type="text/css" />]
15[<link rel="stylesheet" href="(#CSS{css/spip.form.css})" type="text/css" />]
16[<link rel="stylesheet" href="(#CSS{css/spip.comment.css})" type="text/css" />]
17[<link rel="stylesheet" href="(#CSS{css/spip.list.css})" type="text/css" />]
18[<link rel="stylesheet" href="(#CSS{css/spip.petition.css})" type="text/css" />]
19[<link rel="stylesheet" href="(#CSS{css/spip.pagination.css})" type="text/css" />]
20[<link rel="stylesheet" href="(#CSS{css/spip.portfolio.css})" type="text/css" />]
21
22[(#REM) Balise permettant aux plugins d'inserer des fichiers CSS ]
23#INSERT_HEAD_CSS
24
25[(#REM) Feuille de style du theme ]
26[<link rel="stylesheet" href="(#CSS{css/theme.css})" type="text/css" />]
27
28[(#REM) Feuille de style CSS pour l'impression, n'existe pas par defaut ]
29[<link rel="stylesheet" href="(#CSS{css/print.css})" type="text/css" media="print" />]
30
31[(#CHEMIN{inc-theme-head.html}|oui)
32        #INCLURE{fond=inc-theme-head,env}
33]
34
35[(#REM) Feuille de style personnalisee pour surcharger les precedentes ]
36[<link rel="stylesheet" href="(#CSS{css/perso.css})" type="text/css" />]
37
38[(#REM) Balise permettant aux plugins d'inserer des appels javascript ou css ; ]
39#INSERT_HEAD
40
41[(#REM) Scripts ]
42[<script src="(#CHEMIN{javascript/skel.min.js})" type="text/javascript"></script>]
43[<script src="(#CHEMIN{javascript/util.js})" type="text/javascript"></script>]
44[<script src="(#CHEMIN{javascript/main.js})" type="text/javascript"></script>]
45<!--[if lt IE 9]>
46[<script type='text/javascript' src="(#CHEMIN{javascript/ie/html5shiv.js})"></script>]
47<![endif]-->
48[(#REM) Vos scripts ]
49[<script src="(#CHEMIN{javascript/perso.js})" type="text/javascript"></script>]
Note: See TracBrowser for help on using the repository browser.