MiniGriSpip

FredoMkb · 15-05-2007 07:22:13

Bonjour à tous smile

Suite à la demande de MacOramix sur ce message, voici un petit pas-à-pas généraliste, basé sur la version 1.6 de Mgs, pour créer des pages personnalisées...

Admétons que nous souhaitons créer une page personnalisée affichant uniquement la liste complète des brèves publiées sur le site.

Si on regarde les différents fichiers déjà disponibles, on s'apperçois que plusieurs affichent déjà une liste de brèves publiées selon un contexte précis, comme, par exemple, les fichiers "mot.html", "plan.html", "rubrique.html" et "sommaire.html".

1. Donc, commençons par dupliquer un de ces fichiers du squelette listant déjà des brèves... prenons par exemple le fichier "plan.html", qui est un des plus simples à personnaliser pour ce qu'on souhaite faire ;

2. Une fois dupliqué, renommons ce nouveau fichier en "breves.html", mais attention, il ne faut utiliser d'accents et il faut bien s'assurer de mettre le nom au pluriel, puisqu'il existe déjà un fichier nommé "breve.html" ;

3. Éditons maintenant ce nouveau fichier pour supprimer les parties du code indésirables et conserver, voire ajouter, les codes qu'on souhaite afficher ;

4. Pour faire simple dans notre exemple, il faut supprimer l'ensemble des codes présents juste après les lignes suivantes :

Code:

<!-- Bloc du contenu principal -->
<div id="mgs_principal" class="contenu">

Jusqu'à la ligne suivante :

Code:

</div> <!-- /contenu -->

Il faut donc tout supprimer SAUF cette ligne de code :

Code:

<!-- Inclusion des Breves publiees-->
<INCLURE{fond=inc/inc-breves}{lang}{tri=titre}{ordre=0}{cntxt=plan}>

Nous devrions donc nous retrouver avec un code qui ressemble à :

Code:

<!-- Bloc du contenu principal -->
<div id="mgs_principal" class="contenu">

    <!-- Inclusion des Breves publiees-->
    <INCLURE{fond=inc/inc-breves}{lang}{tri=titre}{ordre=0}{cntxt=plan}>

</div> <!-- /contenu -->

5. Voilà, déjà à ce stade nous avons un fichier Html qui devrait afficher une liste paginée avec l'ensemble des brèves publiées sur le site, mais on peut personnaliser un peu cette liste, en changeant par exemple le critère de "tri", qui est ici par "titre" et lui préférer un tri par "date" par exemple, ainsi que l'ordre d'affichage des brèves, de la plus récente à la plus ancienne, en changeant le critère "ordre" avec la valeur "1" (sans guillemets).

6. Voilà, notre page "breves.html" est prète, maintenant voyons comment faire pour l'appeler à partir d'une autre page du site. Le plus simple est de créer un lien, qui pourrait se trouver dans un bouton-lien du bandeau d'en-tête par exemple, ou dans un bloc-menu dans la colonne de navigation, voyons donc ces deux possibilités :

6.1. Pour ajouter un bouton-lien sur le bandeau d'en-tête, pointant vers notre fichier "breves.html", il suffit d'éditer le fichier "inc-bandeau.html" qui se trouve dans le dossier "inc" à la racine du dossier du squelette.

Il suffit donc d'ajouter un item supplémentaire, à l'emplacement de votre choix, dans la liste de boutons-liens matérialisés par le code suivant :

Code:

<!-- Liste des boutons-liens -->
<div id="mgs_menu_tete">
    <ul>
        <li><a href="#URL_SITE_SPIP/"><:mgs_accueil:></a></li>
        <li><a href="#URL_PAGE{plan}"><:mgs_plan:></a></li>
        <li><a href="http://fredomkb.free.fr/forum/"><:mgs_forums:></a></li>
        <li><a href="mailto:[(#EMAIL_WEBMASTER|asciihtml)]"><:mgs_contact:></a></li>
        <li><a href="ecrire/"><:mgs_redaction:></a></li>
    </ul>
</div>

La ligne de code à ajouter serait comme suit :

Code:

<li><a href="#URL_PAGE{breves}"><:mgs_breves:></a></li>

Attention à bien inscrire le nom exact du fichier sans l'extension "html".

Ce qui nous donnerait en tout, par exemple, le code suivant :

Code:

<!-- Liste des boutons-liens -->
<div id="mgs_menu_tete">
    <ul>
        <li><a href="#URL_SITE_SPIP/"><:mgs_accueil:></a></li>
        <li><a href="#URL_PAGE{breves}"><:mgs_breves:></a></li>
        <li><a href="#URL_PAGE{plan}"><:mgs_plan:></a></li>
        <li><a href="http://fredomkb.free.fr/forum/"><:mgs_forums:></a></li>
        <li><a href="mailto:[(#EMAIL_WEBMASTER|asciihtml)]"><:mgs_contact:></a></li>
        <li><a href="ecrire/"><:mgs_redaction:></a></li>
    </ul>
</div>

----------

6.2. Pour ajouter un bloc-menu dans la colonne de navigation, avec un lien pointant vers notre fichier "breves.html", il suffit d'éditer le fichier "inc-menu.html" qui se trouve dans le dossier "inc" à la racine du dossier du squelette.

Il suffit donc d'ajouter, à l'emplacement de votre choix entre deux autres blocs-menus, le code suivant :

Code:

<!-- Bloc breves -->
<div class="mgs_menu">
    <div class="mgs_picto mgs_picto_brv"></div>
    <ul class="general">
        <li class="mgs_menu_titre">
            <a href="#URL_PAGE{breves}"><:mgs_breves:></a>
        </li>
    </ul>
</div>

------------------------------

Voilà... ce petit pas-à-pas est juste à titre d'exemple, mais en vous inspirant de ces quelques manipulations, vous pourrez créer autant de pages personnalisées que vous en aurez besoin...

Bonne continuation à tous... à+ smile

PS. Pour plus amples informations sur l'art et la manière de réaliser des squelettes Spip, voir la documentation officielle.

MacOramix · 15-05-2007 07:32:54

Bonjour à tous

Merci pour cette réponse Fred, je test ça au plus vite et je te tiens au courant mais pour l'instant je vais au lit (et oui je rentre du boulot smile et non pas de boîte comme pourrais le penser certains big_smile ). Je tiens juste a preciser que j'utilise la version 1.4.2 de ton squelettes mais de ce que j'ai vu des explications, cela devrait etre pareil.

Je vais essayer de m'en sortir avec ça.

Encore merci et à bientôt

FredoMkb · 15-05-2007 07:40:04

Re...

MacOramix a écrit:
...mais pour l'instant je vais au lit (et oui je rentre du boulot et non pas de boîte comme pourrais le penser certains ).

Ouais... allez... à d'autres !!! blink tongue mdr ... wink

MacOramix a écrit:
Je tiens juste a preciser que j'utilise la version 1.4.2 de ton squelettes mais de ce que j'ai vu des explications, cela devrait etre pareil.

La méthode est très semblable, ce qui change surtout, c'est qu'il y a moins d'inclusions dans les versions précédentes du squelette, il est donc fort probalbe que les codes listant les données à afficher soient intégralement nécessaires...

Par exemple, sur la page plan de la version 1.4.2, il y a les codes entiers (entendre codes Html + boucles Spip) listant les données à afficher, donc pour notre manipulation, il faut isoler les parties de code qui nous intéresse dans un fichier autonome, puis appeler ce fichier par une des méthodes décrites (elles ne changent pas).

Donc, sur notre exemple de fichier "breves.html", son contenu deviendra quelque chose comme :

Code:

<!-- Bloc du contenu principal -->
<div id="mgs_principal" class="contenu">

    <!-- Bloc liste des breves publiees -->
    <B_plan_breves>
    <div class="mgs_bloc" id="mgs_plan_breves">
    <ul class="general">
        <li class="mgs_menu_titre">
            <:mgs_breves_publiees:>#GRAND_TOTAL&nbsp;<small><:mgs_breves_tri_date:></small>
            [&nbsp;&nbsp;|&nbsp;(#PAGINATION)&nbsp;|]
        </li>
        <BOUCLE_plan_breves(BREVES) {tout} {par date} {pagination}>
        <li class="mgs_menu_item_article">
            [<div class="mgs_logo">(#LOGO_BREVE_RUBRIQUE|right|#URL_BREVE|image_reduire{45})</div>]
            <h3 class="mgs_titre">&nbsp;&nbsp;<a href="#URL_BREVE">#TITRE</a></h3>
            <p class="mgs_infos">[(#DATE|nom_jour)] [(#DATE|affdate)]</p>
            <div class="mgs_chemin"></div>
        </li>
        </BOUCLE_plan_breves>
        <li class="mgs_menu_titre">
            [<:mgs_breves_publiees:>#GRAND_TOTAL&nbsp;<small><:mgs_breves_tri_date:></small>
            &nbsp;&nbsp;|&nbsp;(#PAGINATION)&nbsp;|&nbsp;-&nbsp;]
            <small><a href="[(#SELF)]"><:mgs_haut:></a></small>
        </li>
    </ul>
    </div> <!-- /mgs_bloc -->
    </B_plan_breves>

</div> <!-- /contenu -->

Voilà... je pense que tu devrais t'en sortir avec ces précisions, si jamais tu buttes sur quelque chose, n'hésites pas à nous en faire part...

Tiens-moi au courant Stp... à+ smile

MacOramix · 15-05-2007 17:29:51

Eh bien voila, j'ai suivi tes indications néanmoins j'ai quelques soucis a l'affichage c'est à dire que les breves sont classees de la plus ancienne à la plus recente.

Je suis desole mais je ne suis pas tres doue en html et CSS, je te demande encore un petit peu d'aide stp smile . De plus une autre question, je suppose que si je desire faire une page referençant tous les liens du site, la methode sera la meme.

Voici le code de ma page "breves.html" et le lien pour la visionner :
http://www.creationsnumeriques.com/spip.php?page=breves

Code:

<!-- Bloc du contenu principal -->
<div id="mgs_principal" class="contenu">

<!-- Bloc liste des breves publiees -->
                    <B_plan_breves>
                    <div class="mgs_bloc" id="mgs_plan_breves">
                        <ul class="general">
                            <li class="mgs_menu_titre">
                                <:mgs_breves_publiees:>#GRAND_TOTAL <small><:mgs_breves_tri_date:></small>
                                [  | (#PAGINATION) |]
                            </li>
                            <BOUCLE_plan_breves(BREVES) {tout} {par date} {pagination}>
                            <li class="mgs_menu_item_article">
                                [<div class="mgs_logo">(#LOGO_BREVE_RUBRIQUE|right|#URL_BREVE|image_reduire{45})</div>]
                                <h3 class="mgs_titre">  <a href="#URL_BREVE">#TITRE</a></h3>
                                <p class="mgs_infos">[(#DATE|nom_jour)] [(#DATE|affdate)]</p>
                                <div class="mgs_chemin"></div>
                            </li>
                            </BOUCLE_plan_breves>
                            <li class="mgs_menu_titre">
                                [<:mgs_breves_publiees:>#GRAND_TOTAL <small><:mgs_breves_tri_date:></small>
                                  | (#PAGINATION) | - ]
                                <small><a href="[(#SELF)]"><:mgs_haut:></a></small>
                            </li>
                        </ul>
                    </div> <!-- /mgs_bloc -->
                    </B_plan_breves>
                    
</div> <!-- /contenu -->

Dernière modification par MacOramix (15-05-2007 17:44:20)

Job · 15-05-2007 19:20:16

Bonjour

En utilisant les critères {par date} {inverse} cf http://www.spip.net/fr_article900.html#par---- , tu auras l'ordre souhaité

A+
Job

FredoMkb · 16-05-2007 05:21:43

Bonjour MacOramix et Job smile

MacOramix a écrit:
Voici le code de ma page "breves.html" et le lien pour la visionner :
http://www.creationsnumeriques.com/spip.php?page=breves

Oui, c'est pas mal, mais où est passé le reste de ton site ? blink

L'astuce consiste à dupliquer un des fichiers originaux du squelette, comme "plan.html", ou "sommaire.html", puis, tout en conservant l'en-tête, les menus de navigation, etc., il suffit de remplacer le contenu de la colonne principale par le code que tu souhaites...

Bon, pour que ce soit plus parlant, je viens de le faire, vite fait (il y a peut-être des ajustements à faire), à télécharger par ici (zip 4 Ko), et je me suis basé sur ta page sommaire.

Tiens-moi au courant Stp smile

MacOramix · 16-05-2007 19:01:43

Bonjour à tous,

Je n'aurais qu'une chose à dire : MERCI, en effet merci beaucoup grâce a toi ça ressemble a quelques choses smile . Il est vrai que je n'avais pas suivi tes indications a la lettre ce qui pourrais expliqué mes erreurs. Allez mea culpa c'est la dernière fois que je modifie du code la nuit.

Je profite de ce post pour donner un petit lien pour les personnes qui veulent mettre en place un site collaboratif et qui ne veulent pas forcement repete 100 fois comment on utilise Spip, j'ai cré un petit tuto qui j'espère pourra servir.

http://www.creationsnumeriques.com/Utilisation_Spip.pdf

Dernière modification par MacOramix (16-05-2007 19:08:09)

FredoMkb · 17-05-2007 02:13:52

Bonjour smile

MacOramix a écrit:
... j'ai cré un petit tuto qui j'espère pourra servir.

http://www.creationsnumeriques.com/Utilisation_Spip.pdf

C'est une bonne initiative en effet, et le tuto est plutôt bien fait... il manquerait juste peut-être de donner quelques exemples de base du formatage du texte avec les raccourcis typographiques de Spip (intertites, gras, italique, liens, listes, notes de bas de page, etc.)... sinon l'idée est très bonne ! top

à+ smile

MacOramix · 17-05-2007 02:19:14

Salut Fred,

Je prends note de tes remarques et modifierai le fichier en consequences sous peu (après avoir reçu d'autres commentaires).

A bientot

Ps : je t'avertirai des modifications.

Dernière modification par MacOramix (17-05-2007 02:19:32)

MiniGriSpip

Annonce

#1 15-05-2007 07:22:13

Créer une page personnalisée...

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

#2 15-05-2007 07:32:54

Re: Créer une page personnalisée...

#3 15-05-2007 07:40:04

Re: Créer une page personnalisée...

MacOramix a écrit:

MacOramix a écrit:

Code:

#4 15-05-2007 17:29:51

Re: Créer une page personnalisée...

Code:

#5 15-05-2007 19:20:16

Re: Créer une page personnalisée...

#6 16-05-2007 05:21:43

Re: Créer une page personnalisée...

MacOramix a écrit:

#7 16-05-2007 19:01:43

Re: Créer une page personnalisée...

#8 17-05-2007 02:13:52

Re: Créer une page personnalisée...

MacOramix a écrit:

#9 17-05-2007 02:19:14

Re: Créer une page personnalisée...

Pied de page des forums