Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Sommaire.html ; bannière ; favicon

Sommaire.html ; bannière ; favicon



FTP : installation et usage

 Modifier le sommaire du site (page d’accueil)

Je voulais :

a) davantage d’articles en première page
b) pas de date pour ces articles, ni de nom d’auteur
c) modifier les indications du menu « navigation »
d) mettre les titres sur fond texturé (background)
e) supprimer les traits entourant les extraits d’articles du sommaire
f) faire un effet de bannière
g) Mettre un bandeau-titre
h) mettre des images sur la page d’accueil
i) mettre une photo dans la partie « navigation »
j) faire un favicon
k) des articles toujours au sommaire
l) Des logos non cliquables
m) Un article entier

Davantage d’articles en page d’accueil
Voilà une façon de faire. (Attention, sans garantie !)

1) Dans le « site distant » et dans le dossier « dist » (ou dans le dossier « squelettes ») trouver le fichier « sommaire.html »

2) Cliquer dessus, puis sur Télécharger. Alors le fichier « sommaire.html » arrive sur le site local.

3) Avec un logiciel comme PSPad (gratuit) ouvrir le fichier « sommaire.html »

4) Vers le bas, on trouve ceci :

{{<---Une : derniers articles publiés--->}}

        <h1 class="structure"><:derniers_articles:></h1>
       
        <BOUCLE_article_un(ARTICLES) {par date} {inverse} {0,2}>

puis

[<div class="detail">
                [(#DATE|nom_jour)] [(#DATE|affdate)]
                <B_auteurs_un><:par_auteur:> <BOUCLE_auteurs_un(AUTEURS) {id_article} {","}>#NOM</BOUCLE_auteurs_un>
                </div>]

etc
        </BOUCLE_article_un>

5) Pour augmenter le nombre d’articles-réponse,

a) modifier <BOUCLE_article_un(ARTICLES) {par date} {inverse} {0,5}>

Comme cela il y aura 5 articles qui auront une présentation au sommaire.

b) modifier aussi, plus loin :

<BOUCLE_articles_recents(ARTICLES) {par date} {inverse} {5,20}>  

Comme cela, il y aura jusqu’à 20 articles présentés au sommaire

 

6) Pour supprimer date et auteur, supprimer ceci :

(#DATE (#DATE et ceci :

<B_auteurs_articles><:par_auteur:> <BOUCLE_auteurs_articles(AUTEURS) {id_article} {","}> #NOM</BOUCLE_auteurs_articles>

 

7) Enregistrer sous « sommaire1.html »

8) Par FTP, charger ce sommaire1.html sur le site distant, dans le dossier « squelettes »

9) renommer le « sommaire.html » existant (l’appeler par exemple sommaireORI.html, ORI pour ORIginal), sur le site distant, dans le dossier squelettes

10) Renommer : « sommaire1.html » en « sommaire.html »

 

 Modifier le menu « navigation »

Le mode d’emploi est ici

On peut, de façon analogue, modifier le fichier .... article.html

 

 Mettre le titre sur fond de texture (background)

Je voulais un fond de couleur, mais pas uni.
J’ai donc fabriqué une texture (en scannant le tissu d’une robe !)
J’ai mis le titre sur cette texture
et enregistré le tout comme image.jpg

J’ai alors enregistré le document, comme pour les autres photos, sur Spip.

Et j’ai mis comme titre quelque chose du genre <emb1358|left>

 

 Faire un effet de bannière

J’ai fabriqué un rectangle de couleur, de dimension 650 x 140 px
J’ai inscris dessus ce que je voulais
et j’ai expédié cette bannière sur le site, comme une image. bannière.jpg

J’ai alors entré l’image <emb1425|left> à la place du titre de l’article que je veux mettre tout en haut.

Au bout de <emb1425|left> j’ai mis <br /><br /> dans le titre ! pour que celui-ci, sur la page d’accueil, soit bien séparé du texte qui est en dessous.

Mais alors cela fait une balise bizarre du genre .... </no p>....<no p> C’est bizarre mais ... cela n’a pas l’air de faire des ennuis !

En fait </no p>....<no p> est incorrect, il n’est peut-être pas lu par tous les navigateurs. Le système est donc à éviter. Dommage car il est simple

 

 Mettre un bandeau-titre (bannière)

Peu à peu la lumière s’est faite dans mon esprit et j’ai trouvé autre chose, assez simple et qui ne fait pas d’erreurs. Mode opératoire :

  • -1) expédier le bandeau
  • -2) faire de la place pour mettre le bandeau
  • -3) prévoir un habillage pour le bandeau
  • -4) modifier le fichier sommaire.html

1) Expédier le bandeau :

J’ai fabriqué un rectangle de couleur, de dimension 650 x 140 px
J’ai inscris dessus ce que je voulais
et j’ai expédié cette bannière bandeau650x140.jpg par FTP sur le site distant, à la racine. Je vérifie que j’ai bien une image : http://www.journal-la-mee.fr/bandeau650x140.jpg

2) Faire de la place pour le bandeau :

Le bandeau faisant 140px de hauteur, il faut bien laisser 160px de « vide ». J’ai transféré habillage.css, qui se trouve dans le site distant, vers mon ordinateur, pour pouvoir le modifier. J’ai ouvert avec PSPad et j’ai trouvé ceci, plutôt vers la fin :

/* * Disposition a l'ecran: colonnes, encarts, cartouches */
       
#principal {
        position: absolute;
        left: 2%;
        /*left: 18em;*/
        top: 0px;
        width: 70%;
        margin: 0px;
        padding: 2px;
        /*margin-right: 2em;*/
        margin-right: 32%;
        margin-top: 0em;
        background-color: "#Fff1C9"

A la place de top : 0px ;
j’ai mis top : 160px ;

3) Prévoir un habillage pour le bandeau :

Toujours dans le fichier habillage.css
j’ai ajouté des indications pour le bandeau.
Cela me donne alors ceci :

/* * Disposition a l'ecran: colonnes, encarts, cartouches */

#bandeau {
        position: absolute;
        left: 2%;
        /*left: 18em;*/
        top: 4px;
        width: 70%;
        margin: 0px;
        padding: 2px;
        /*margin-right: 2em;*/
        margin-right: 32%;
        margin-top: 0em;
        background-color: ""}
       
#principal {
        position: absolute;
        left: 2%;
        /*left: 18em;*/
        top: 160px;
        width: 70%;
        margin: 0px;
        padding: 2px;
        /*margin-right: 2em;*/
        margin-right: 32%;
        margin-top: 0em;
        background-color: "#Fff1C9"

Renvoyer le fichier habillage.css sur le site distant, par FTP.

4) Modifier le fichier sommaire.html

Par FTP, j’ai transféré le fichier
sommaire.html
vers mon ordinateur, et je l’ai ouvert avec PSPad

j’ai ajouté ceci :

<div id="bandeau" class="contenu">
<img src="http://www.journal-la-mee.fr/bandeau650x140.jpg" alt="" />
</div>


juste avant la ligne :

<code>
<div id="principal" class="contenu">

Enregistrer et renvoyer le fichier sommaire.html sur le site distant, par FTP.

Et voilà ! normalement tout fonctionne.
Si on veut changer de bannière, il suffit, à chaque fois, d’expédier la nouvelle à la racine du site et de la renommer bandeau650x140.jpg.

 

 Supprimer les traits entourant les extraits d’articles au sommaire

Il faut ouvrir typographie.css.
A un endroit (un seul endroit) on trouve : border groove 2 px
il faut mettre : border groove 0 px

 

 Mettre des images sur la page d’accueil

  • -je dispose de trois images que je nomme : dessin-1, dessin-2, dessin-3
  • -je les envoie de la façon habituelle sur mon site
  • -je fais un clic  -droit sur chacune, puis « propriétés » et je note, en haut, l’emplacement de ces images qui est du genre
    http://.....dessin-1.jpg
  • - avec le FTP, je vais chercher le fichier sommaire.html qui se trouve dans le dossier « dist » ou dans le dossier « squelettes » à la racine du site
  • -je télécharge sommaire.html vers mon ordinateur
  • -j’ouvre sommaire.html avedc PSPad,

et là je cherche : <!-- Menu de navigation general -->

et je copie la phrase

<img src="http://......dessin-1.jpg" :

aux endroits que je veux, par exemple :

<!-- Menu de navigation general -->

<img src="http://...dessin-1.jpg" />

       <div class="menu">
       <ul class="general">
        <li class="menu-titre">
        [<a href="(#URL_SITE_SPIP)"                              
        title="<:accueil_site:>"><b>#NOM_SITE_SPIP</b></a>]
        </li>
        <li class="menu-item">
        <a href="plan.php"><:plan_site:></a>
        </li>
        <li class="menu-item">
        <a href="article.php?id_article=1/"   title="<:articles_populaires:>">Accueil</a>
        </li>
        <li class="menu-item">
        <a href="article.php?id_article=2/">Nous Ecrire </a>
        </li>
        <li class="menu-item">
        <a href="rubrique.php?id_rubrique=14/">Accueil</a>
        </li>
       </ul>
        </div>

<img src="http://.... dessin-2.jpg" />

<!-- Formulaire de recherche -->
       [(#FORMULAIRE_RECHERCHE)]
       </div>

<img src="http://.... dessin-3.jpg" />

et cela me fait :

  • - le dessin 1 en haut de page
  • - le dessin 2 au dessus de « rechercher »
  • - le dessin 3 au dessous de « rechercher »
  • - on peut mettre un dessin 4 à la fin de la colonne de navigation, c’est à dire juste avant la phrase :
    <div id="principal" class="contenu">

– Enregistrer sous .... sommaire2. html

– Il n’y a plus qu’à renvoyer ...sommaire2.html.... vers le dossier « squelettes », à éliminer le sommaire.html existant (ou plutôt à le renommer pour pouvoir le retrouver si nécessaire) et à renommer ... sommaire2.html ... sous le nom ... sommaire.html

(précaution : sauvegarder le sommaire.html existant, au cas où ! . Moi je le renomme tout simplement ... ##sommaire.html pour pouvoir le retrouver facilement si fausse manœuvre)

On peut changer les dessins à condition de remplacer le dessin-1 par un autre ... tout en lui laissant le nom de « dessin-1 ». Ou alors il faut rechanger le sommaire.html.

C’est un peu embêtant mais ça marche.
Si quelqu’un trouve autre chose, je suis preneur .[ Ecrivez-moi b.poiraud@wanadoo.fr]

On peut aussi faire défiler des photos en mettant ceci, toujours dans la page sommaire.html :

<marquee direction="down">
<img src="http://www.journal-la-mee.fr/IMG/jpg/dessin-1.jpg" />

<img src="http://www.journal-la-mee.fr/IMG/jpg/dessin-3.jpg" />
</marquee>

C’est la balise marquee.... /marquee qui fait cet effet là

Si nécessaire, aller chercher des explications sur internet, en tapant marquee dans un moteur de recherche. Mais attention la balise marquee est une balse propriétaire, elle ne fonctionne pas avec tous les navgaeurs et, de plus, elle n’est ps accessible aux persones handicapées.

 

Encore des photos en page d’accueil

Je voulais mettre une petite photo dans mon bloc « navigation », sans mettre cette photo dans une rubrique.

J’ai donc ouvert, avec PSPad, sommaire.html et je suis allée voir à l’emplacement suivant :

<!-- Menu de navigation general -->


<div class="menu">
<ul class="general">
        <li class="menu-titre">
        [<a href="(#URL_SITE_SPIP)" title="<:accueil_site:>"><b>#NOM_SITE_SPIP</b></a>]
        </li>

        <li class="menu-item">
        <a href=""article.php?id_article=1/">Alphabetique</a>
        </li>

J’ai supprimé tout ce qui correspond à menu-titre et j’ai ajouté une autre indication avec menu-item. Cela me donne désormais ceci :

<!-- Menu de navigation general -->


<div class="menu">
<ul class="general">
       
<li class="menu-item">
        <a href="article.php?id_article=2/">Jean &nbsp;&nbsp;<img src="http://www.journal-la-mee.fr/jean.jpg" /></a>
        </li>

        <li class="menu-item">
        <a href="article.php?id_article=1/">Alphabetique</a>
        </li>

Cela me permet d’avoir la photo de « Jean » dans le bloc de navigation en renvoyant à l’article 2 où l’on parle de lui.

J’ai mis   entre « jean » et la photo de Jean", sinon le texte était collé à la photo

Il reste à enregistrer sous sommaire3.html, et à expédier sur le site distant, dans le dossier squelettes, puis à renommer en sommaire.html.

Ca marche.
Attention cependant à bien ajuster la taille de la photo.

 

Toujours des photos en page d’accueil

Cette fois je voulais mettre une petite photo à côté des articles de la première page. C’est facile : il suffit d’utiliser « logo de l’article » qui se trouve en haut à gauche.

J’ai essayé de mettre <docXXX|right> dans le titre de l’article. Ca marche mais cela fait des erreurs quand on vérifie avec le validateur W3C

Pour des images aléatoires, lire un peu plus loin

 

 Sommaire automatique : très pratique !

Avertissement : tout ceci a bien fonctionné avant que je connaisse le plugin « couteau suisse ». Ce n’est donc plus utile maintenant.

Le problème :
Quand les pages sont très longues, il s’agit de mettre, en haut de page, un lien vers tous les titres entourés par {{{ }}} . C’est très pratique. Merci à : noplay@altern.org

Voici le procédé :

  • -1) Mettre un filtre dans "mes_fonctions.php
  • -2) Modifier le fichier article.html

Comment faire ?

  • 1-a - A la racine du site distant, trouver le fichier mes_fonctions.php . S’il n’y en a pas, en créer un
  • 1-b - Télécharger ce fichier vers votre ordinateur et l’ouvrir avec un bloc-notes (par exemple PSPad)
  • 1-c - Copier, dans ce fichier, :
    /*
    *   +----------------------------------+
    *    Nom du Filtre : Sommaire de l'article  
    *   +----------------------------------+
    *    Date : dimanche 9 février 2003
    *    Auteur :  Noplay (noplay@altern.org)                                      
    *   +-------------------------------------+
    *    Fonctions de ce filtre :
    *      Cette modification permet d'afficher le sommaire de son article
    *      généré dynamiquement à partir du texte de l'article. Vous pouvez naviguer
    *      dans l'article en cliquant sur les titres du sommaires.
    *
    *   +-------------------------------------+
    *  
    * Pour toute suggestion, remarque, proposition d'ajout
    * reportez-vous au forum de l'article :
    * http://www.uzine.net/spip_contrib/article.php?id_article=76
    */
    function sommaire_article($texte)
    {
           
            preg_match_all("|\{\{\{(.*)\}\}\}|U", $texte, $regs);
           
            $texte="";
           
            $nb=1;
           
            for($j=0;$j<count($regs[1]);$j++)
            {
               $texte=$texte."<a href=\"#sommaire_".$nb."\">".$regs[1][$j]."</a><br>";
                    $nb++;
       }
            return $texte;
    }

    function sommaire_ancre($texte)
    {
            $texte = preg_replace("|\{\{\{(.*)\}\}\}|U","<a name=\"sommaire_#NB_TITRE_DE_MON_ARTICLE#\">$0</a>", $texte);
           
            $array = explode("#NB_TITRE_DE_MON_ARTICLE#" , $texte);
            $res =count($array);
            $i =1;
            $texte=$array[0];
            while($i<$res)
            {
                    $texte=$texte.$i.$array[$i];
                    $i++;
            }
           
            return $texte;
    }
    //Fin filtre sommaire de l'article

    /*
  • 1-d - Renvoyer le fichier complété vers la racine du site distant
    • 2-a - Dans le dossier squelettes, trouver le fichier article.html
    • 2-b - Télécharger ce fichier vers votre ordinateur et l’ouvrir avec un bloc-notes (par exemple PSPad)
    • 2-c - Dans la boucle_articles, repérer ceci :
      [<div class="chapo">#DEBUT_SURLIGNE(#CHAPO)#FIN_SURLIGNE</div>]
      [<div class="texte">#DEBUT_SURLIGNE(#TEXTE|couleur)#FIN_SURLIGNE</div>]
      [<div class="ps">#DEBUT_SURLIGNE(#PS)#FIN_SURLIGNE</div>]
      [<div class="notes">#DEBUT_SURLIGNE(#NOTES)#FIN_SURLIGNE</div>]
    • 2-d - Remplacer la ligne
      [<div class="texte">#DEBUT_SURLIGNE(#TEXTE|couleur)#FIN_SURLIGNE</div>]


      par ceci :

      [<div class="texte">(#TEXTE*|sommaire_article|propre)</div>]
      [<div class="texte">(#TEXTE*|sommaire_ancre|propre)</div>]

Finalement on a ceci :

[<div class="chapo">#DEBUT_SURLIGNE(#CHAPO)#FIN_SURLIGNE</div>]
[<div class="texte">(#TEXTE*|sommaire_article|propre)</div>]
[<div class="texte">(#TEXTE*|sommaire_ancre|propre)</div>]
[<div class="ps">#DEBUT_SURLIGNE(#PS)#FIN_SURLIGNE</div>]
[<div class="notes">#DEBUT_SURLIGNE(#NOTES)#FIN_SURLIGNE</div>]
    • 2-e - Envoyer le fichier article.html vers le site distant.

Il ne reste plus qu’à vider le cache et actualiser, et ça fonctionne.

Note : à partir de la version 1.9 de Spip, le plugin « couteau suisse » crée un système de « pages » ou bien d’onglets, très beau

 

 Une favicon

Je souhaitais avoir une favicon, c’est-à-dire la toute petite image qui apparaît à gauche de la barre d’adresse dans le navigateur. [Favicon est fabriqué à partir de FAVori et ICONe]

Voir des explications ici :
http://www.atoute.org/favicon/favicon.htm

]Le Plus simple pour avoir une Favicon : un petit logiciel ad-hoc :
http://www.htmlkit.com/services/favicon/

En suivant les instructions on arrive à fabriquer une image que l’on nomme : favicon.ico

Il reste à modifier le site

Voilà comment faire :

1) avec FTP envoyer favicon.ico à la racine du site. Et vérifier son adresse. Pour moi c’est http://www.journal-la-mee.fr/favicon.ico

Bien noter cette adresse car elle va servir tout-à-l’heure

Pour d’autres ce sera : http://www.site-pour-moi.fr/favicon.ico

2) Ouvrir les fichiers que l’on veut modifier : pour moi c’est sommaire.html, article.html

et mettre, juste avant </head> ceci :

<link rel="shortcut icon" href="http://www.journal-la-mee.fr/favicon.ico" />

ou, en général, ceci :
<link rel="shortcut icon" href="adresse-de-favicon.ico" />

Renvoyer sommaire.html, article.html dans le site distant et en principe c’est bon.

Attention : si le site figurait dans vos « favoris », il reste avec l’ancienne icône. Il faut donc supprimer le site de vos favoris, et le remettre, alors il apparaîtra avec la nouvelle icône.

On peut aussi, à partir d’une image existante, créer une petite image de format 16x16 ou 32x32 que l’on peut appeler comme on veut, par exemple : arc-en-ciel.gif.

Pour modifier le site, comme précédemment, on peut mettre juste avant </head> :

<link href='http://www.adresse/arc-en-ciel.gif' rel='icon' type='image/gif'/>

 

 Un gif animé - une favicon animée

Merci à Bergson pour son idée !
http://berni-tutorial.blogspot.com/2008/07/faire-un-gif-anim.html

Concrètement :

1) télécharger Microsoft-gif-animator, ici :
http://www.freewarefrance.com/show_subcategory_0_2_8.html

2) Des explications en français ici :
http://www.magusine.net/formation/article.php?id_article=788

3) J’ai fabriqué petites images carrées, de 32x32 où j’ai mis les couleurs de l’arc en ciel : rouge, orangé, jaune, vert, bleu, indigo, violet. Je les ai enregistrées : rouge.gif, orage.gif etc (tous en .gif, pas en jpeg)

gif

4) J’ai ouvert Microsoft-gif-editor et j’ai cliqué sur la 2e icône, celle qui correspond à « open ». et j’ai choisi le fichier rouge.gif précédent. Par la suite il faut cliquer sur la 4e icône (qui correspond à « insérer ») pour entrer successivement : orange.gif, jaune.gif, etc.

5) Enregistrer avec la 5e icône (qui correspond à « save as ») et choisir un nom, par exemple : arc-en-ciel.gif.

Finir comme ci-dessus avec une favicon simple.

 

 Structure de la page d’accueil

Structure de la page d’accueil : http://www.lorand.org/article.php?id_article=73

 

 Mettre des images aléatoires

J’avais un double objectif :

– 1. faire en sorte que la barre de navigation (à droite pour moi) soit quasiment de même hauteur que la colonne centrale qui comporte les derniers articles publiés
– 2. faire un rappel d’articles du site, à l’aide de leurs photos

Je me suis servie de la contribution suivante : http://www.spip-contrib.net/Une-image-aleatoire-en-page-d avec une difficulté : le code fourni est incomplet car il manque .... alt=«  » .... ce qui génère une erreur .

Voici le bon code, fourni par Serge :

 

Images aléatoires :

#CACHE{0}
<div>
<BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,20}>
<BOUCLE_lien(ARTICLES){id_document}>
      [<a href="#URL_ARTICLE">(#_docuImg:FICHIER|image_reduire{180}|inserer_attribut{alt,#FICHIER|replace{jpg/|png/|gif/,''}|replace{.jpg|.png|.gif,''}}|inserer_attribut{title,#FICHIER|replace{jpg/|png/|gif/,''}|replace{.jpg|.png|.gif,''}})</a>]
      </BOUCLE_lien>
      <!-- affiche le nom du fichier de la photo sous la photo nettoyé des caractères indésirables chiffres, tirets, soulignements, répertoires, extensions de fichiers -->
      <div><small>[(#FICHIER|replace{IMG/jpg/|IMG/png/|IMG/gif/,''}|replace{.jpg|.png|.gif,''}|replace{\d*,''}|replace{-,' '}|replace{_,' '})]</small></div>
</BOUCLE_docuImg>
</div>

<!--fin d'images aléatoires-->

Façon de procéder

1) j’ai envoyé, par FTP, le fichier « sommaire.html » vers mon ordinateur

2) j’ai placé, à l’endroit où je le voulais, le code ci-dessus :

3) j’ai renvoyé le nouveau fichier sommaire.html vers le site distant, en prenant des précautions (a).

4) Pour les précautions, voir note (a)

5) quelques détails :

– j’ai choisi (0,20) car je voulais 20 images aléatoires
– j’ai mis (#FICHIER|image_reduire180)] car, lorsque je mettais 150, il m’arrivait d’avoir deux images côte à côte.

Merci à Serge pour ce code : serge-barthelemy-at-sfr.fr et pour le bon travail qu’il fait !

 

 Lire la suite

Je voulais, sous chacun des articles, dans la page sommaire, mettre « lire la suite » et renvoyer directement à l’article.

J’ai ouvert sommaire.html (qui se trouve dans « squelettes ») à l’aide du logiciel PSpad
J’ai trouvé ceci vers la ligne 210

<tr>
           <td>[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{200,200})]</td>
           <td>[<div class="#EDIT{intro} texte"><div style="font-size:15px; padding-left:20px; ">(#INTRODUCTION)</div></div>]</td>
        </tr>

J’ai ajouté ceci juste après (#INTRODUCTION) :

<a href="#URL_ARTICLE" title="Lire la suite de l'article #TITRE"><span style="color:#DE6A4C;"><div style="text-align: right;">(lire la suite)</div></span></a>

Cela me donne donc ceci :

<tr>
           <td>[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{200,200})]</td>
           <td>[<div class="#EDIT{intro} texte"><div style="font-size:15px; padding-left:20px; ">(#INTRODUCTION)<a href="#URL_ARTICLE" title="Lire la suite de l'article #TITRE"><span style="color:#DE6A4C;"><div style="text-align: right;">(lire la suite)</div></span></a></div></div>]</td>
        </tr>

J’ai enregistré sommaire.html et je l’ai renvoyé dans « squelettes » (en faisant attention de ne pas effacer le précédent, au cas où ...)

et ça fonctionne !

 

 Des articles toujours au sommaire

Problème : je voulais que les articles de la rubrique 1 figurent toujours au sommaire. Il faut donc modifier le fichier sommaire.html

Il faut pour cela :
– a) aller chercher la boucle « articles récents »
– b) la transformer en deux boucles

  • la première contenant l’indication {id_secteur=1} pour appeler uniquement les articles de la rubrique 1
  • la seconde contenant l’indication id_secteur !=1pour appeler les articles ... sauf ceux de la rubrique 1

(attention : on écrit « secteur » et pas « rubrique »)

Voici la boucle articles récents :

<B_articles_recents>

                <div class="menu articles">
                        [(#ANCRE_PAGINATION)]
                        <h2><:derniers_articles:></h2>
                        <ul>
                                <BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {pagination 5}>
                                <li class="hentry">
                                        [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
                                        <h3 class="entry-title">
                                       <a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                                         [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION) </div>]
                                </li>
                                </BOUCLE_articles_recents>
                        </ul>
                        [<p class="pagination">(#PAGINATION)</p>]
                </div>
                </B_articles_recents>

et voici les deux boucles proposées

<B_articles_recents>

                <div class="menu articles">
                        [(#ANCRE_PAGINATION)]
                        <h2><:derniers_articles:></h2>
                        <ul>
                                <BOUCLE_articles_recents(ARTICLES){id_secteur=1} {par date}{inverse} {pagination 5}>
                                <li class="hentry">
                                        [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
                                        <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
                                </li>
                                </BOUCLE_articles_recents>
                        </ul>
                        [<p class="pagination">(#PAGINATION)</p>]
                </div>
                </B_articles_recents>


<B_articles_recents>

                <div class="menu articles">
                        [(#ANCRE_PAGINATION)]
                        <h2><:derniers_articles:></h2>
                        <ul>
                                <BOUCLE_articles_recents(ARTICLES){id_secteur!=1} {par date}{inverse} {pagination 5}>
                                <li class="hentry">
                                        [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
                                        <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
                                </li>
                                </BOUCLE_articles_recents>
                        </ul>
                        [<p class="pagination">(#PAGINATION)</p>]
                </div>
                </B_articles_recents>

 

 Des logos non cliquables

Pour éviter que les logos des articles soient cliquables, et en faire seulement des photos de décoration, on peut modifier la boucle « articles récents ».

Au lieu de mettre [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]

il suffit de mettre : [(#LOGO_ARTICLE)]


  Un article entier en page d’accueil

Je voulais un article entier en page d’accueil, dans la colonne de gauche, pour présenter les horaires d’ouverture d’une association.

  • 1) j’ai créé une rubrique, ici la rubrique 22
  • 2) J’ai créé un article, un seul, dans cette rubrique
  • 3) j’ai modifié sommaire.html en mettant ceci dans la partie navigation :
    <div class="cadre_G">
     <BOUCLE_horaires(ARTICLES){id_rubrique=22}{par num titre}{!par date}{lang}{doublons}>
    <h3>[(#TITRE)]</h3>
     [<div>(#TEXTE)]</div>
    </BOUCLE_horaires>
    </div>

    et ça fonctionne : si je change l’article de la rubrique 22, cela change aussi en page d’accueil

J’ai, bien entendu, adapté mon cadre_G en mettant ceci dans menus.css
. Chacun doit adapter à sa configuration

.cadre_G {
   border: 2px solid #F9BA00;
   margin: 3px;
   padding: 10px  0  3px 10px;
   text-align:left;
   font-size: 12px;
   width: auto;
}

Je voulais ensuite un petit article, bref, en page d’accueil toujours, mais en colonne centrale.

  • 1) j’ai créé une rubrique, ici la rubrique 23 à la racine
  • 2) J’ai créé un article, calendrier, dans cette rubrique
  • 3) j’ai modifié sommaire.html en mettant ceci dans la partie centrale :
<div class="tableau_gauche">
<BOUCLE_calendrier_central(ARTICLES){id_secteur=23}{par date}{inverse}>
<h3 style="titre"> <a href="/spip.php?rubrique23">Calendrier</a></h3>
<div>#TEXTE</div>
</BOUCLE_calendrier_central>
</div>

et j’ai adapté mes styles en fonction de ma configuration.


NOTES:

(1) PSPad est un logiciel gratuit ... et très performant !

(a) Sans danger

On peut pratiquement faire tous les essais que l’on veut, sans danger, à condition de sauvegarder les fichiers que l’on modifie, pour pouvoir les réinstaller si nécessaire.

Une idée : si on touche le fichier sommaire.html :

-* 1. renommer ce fichier : sommaireORI.html (ORI pour original)
-* 2. tous les fichiers d’essai peuvent ensuite être appelés « sommaire1.html, sommaire2.html, sommaire3.html, etc »
et conservés dans le dossier « squelettes » : il n’y a que le dossier sommaire.html qui sera actif.