"Sofresh : analyse de category_homepage.php (gabarit de page d'accueil)"

1. Intro :

Le gabarit de page d'accueil s'affiche à l'ouverture de votre site et lorsque l'on clique sur un lien pointant vers la catégorie "page d'accueil".
Capture d'écran de la page d'accueil :

Nous allons voir dans cette deuxième partie comment le contenu dynamique est géré bloc par bloc. Nous ne reviendrons pas sur les règles CSS de positionnement déjà vu dans la première partie de cette étude, à savoir : Sofresh : analyse générale de la mise en pages
Les règles CSS évoquées ici font partie de "style.css" présent dans votre dossier .../xmedia/theme/sofresh.
Pour vous aider, il est conseillé de visualiser les fichiers category_homepage.php et style.css avec votre éditeur favori...

2. Le bloc #top :

 <div id="top">
    <h1><a href="<?php pxInfo('url'); ?>"><?php pxInfo('name'); ?></a></h1>
  </div>

S'affiche ici le nom de votre site sous forme de lien formaté par une h1
fonction : phpInfo('url') = adresse relative de votre site Web = fonction informative
fonction : phpInfo('name') = nom de votre site = fonction informative

Les règles CSS qui s'appliquent ici :

#top{
	color: #09F;                                    /* déjà analysée */
	background: #FFF url(img/top.jpg) no-repeat;
}

#top h1{
	margin: 0;             /*  pas de marges internes */
	line-height: 100px;    /*  interlignage de 100 pixels  */ 
	padding-left: 30px;    /*  marge interne à gauche de 30 px (?)  */ 
}

#top h1 a{
	text-decoration: none;     /* pas de déco pour les liens = pas de soulignement dans IE ...   */
	color: #09F;               /* couleur de police pour le lien  */
	background: transparent;   /* couleur de fond transparente   */
}

3. Le bloc #prelude :

<p id="prelude"><a href="#main">Go to content</a> | <a href="#sidebar">Go to menu</a> | <a href="#search">Go to search</a></p>

Voici un petit bloc de trois liens (ancres) pointant vers les blocs #main, #sidebar, #search.
Personnellement, je trouve que ces liens ne servent strictement à rien ...pas grandes choses à dire !..

Les règles CSS de style.css qui s'appliquent :

#prelude{
	color: #DDD;               /* couleur de police */
	background: transparent;   /* couleur de fond transparente */
	text-align: right;         /* texte aligné à droite */
	padding-right: 30px;       /* marge interne à droite de 30 px (pour espacer un peu) */
}

#prelude a{
	color: #DDD;                /* même couleur de police  */
	background: transparent;    /* couleur de fond transparente */
	text-decoration: none;      /* pas de déco pour les liens */
}

#prelude a:hover{
	color: #999;                /* couleur de police au survol des liens */
	background: transparent;    /* couleur de fond transparente  */
}

4. Le bloc #content : (bloc de positionnement et enfant du bloc #main)

<div id="content">
      
	  <?php while (!$last->EOF()): ?>
      
	  <div class="resource">
        <h2 id="p1" class="resource-title"><a href="<?php pxLastResPath(); ?>"><?php pxLastResTitle('%s', 'no_numbers'); ?></a></h2>
        <p class="resource-info">The <?php pxLastResDateModification('%Y-%m-%d at %H:%M'); ?>,
		by <?php pxLastResAuthor(); ?> <a href="<?php pxLastResPath(); ?>">#</a></p>
        <div class="resource-content">
			<?php pxLastResDescription(); ?>
        </div>
      </div>
      
	  <?php
	  	$last->moveNext();
		endwhile;
	  ?>
	  
    </div>

Ce bloc contient la boucle $last qui doit être initialisée en début d'instruction par la fonction pxGetLastResources (plusieurs paramètres sont utilisables voyez ici : fonction de boucles). Comme vous pouvez le constater, la fonction est bien initialisée au début de category_homepage.php :

<?php
// cache the page
if ($cache->processCache()):
pxTemplateInit('remove_numbers');
pxGetLastResources();
?>

Les règles CSS propres au bloc #content dans style.css :

#content{
	line-height: 1.6em;  /* hauteur entre les lignes (interlignage) */
}
#content ul li{                           
	list-style-image: url(img/li.png);  /* on utilise l'image li.png pour les puces */
}

#content h2{
	padding-left: 18px;   /* marge pour incruster l'image h2.png en background */
	color: #09F;          /* couleur de police pour les h2 */
	background: transparent url(img/h2.png) no-repeat left center;  /* plaquage en background de h2.png au centre gauche pour tous les h2 de content */ 
	margin-bottom: 0;
}

#content h2 a{              /* style pour les liens formatés en h2 = les titres des dernières ressources  */
	color: #09F;
	background: transparent;
	text-decoration: none;
}

#content h3, #content h4, #content h5, #content h6{  /* couleur de police pour les autres titres (h3 ....) */ 
	color: #666;
}

Les contenus dynamiques générés par cette boucle vont s'afficher à l'écran dans le bloc div class=resource :
(plusieurs blocs vont s'afficher suivant les paramètres de pxGetLastResources => traitement de la boucle $last)
Ce bloc est stylé dans style.css par :

.resource{
	margin-bottom: 4em; /* marge extérieure en bas */
}

S'affichent dans l'ordre :

h2 class="resource-title" :

s'affiche ici le titre de la dernière ressource créée sous forme de lien formaté en titre h2 [Stylé par #content h2 a dans style.css / vous pouvez aussi créer la class .resource-title qui n'existe pas dans style.css]
fonction pxLastResPath = fonction de boucle
fonction pxLastResTitle = fonction de boucle
Remarque : supprimer id="p1" aprés la balise h2, car cet ID est toujours le même pour chaque traitement de ressource dans la boucle $last => ça empêche votre page d'accueil d'être valide xhtml 1.0 strict (comme de doctype du gabarit l'indique !)

p class="resource-info" :

s'affiche ici un paragraphe regroupant les informations sur la ressource : date et heure de la dernière modification (pxLastResDateModification), nom de l'auteur/rédacteur (pxLastResAuthor), lien permanent vers la ressource : # (pxLastResPath)
Ce paragraphe est stylé dans style.css par :

.resource-info{
	padding-left: 18px; /* marge extérieure gauche de 18 pixel */
	color: #999; /* couleur de police */
	margin-top: 0;
}

.resource-info span{
	display: none; /*affichage invisible pour les span ??? */
}

.resource-info a{ /* mise en forme du lien # = lien permanent */
	color: #666;
	background: transparent;
	border-left: 1px solid #CCC;
	padding-left: 0.5ex;
	text-decoration: none;
}

Vous pouvez mettre en français ces informations (modifiez directement dans le code source avec votre éditeur), par exemple :

 <p class="resource-info">Le <?php pxLastResDateModification('%d-%m-%y à %H:%M'); ?>,
		par <?php pxLastResAuthor(); ?> <a href="<?php pxLastResPath(); ?>">permalien</a></p>

div class="resource-content" :

s'affiche ici la description de la ressource grâce à la fonction pxLastResDescription
Ce bloc est stylé dans style.css par :

.resource-content p{
	text-align: justify; /* texte justifié :permet d'aligner le contenu d'un élément de type bloc */
}

.resource-content img{
	max-width: 510px; /* largeur maxi pour les images, pas reconnu par IE6 */
}

5. Le bloc #sidebar : (bloc de positionnement et enfant du bloc #page)

Nous avons vu précédemment les règles de positionnement de ce bloc. Les autres règles dans style.css qui stylent le sidebar sont :

#sidebar div{
	color: #666; /* couleur de police pour tous les bloc div du sidebar */
	background: transparent; /* fond transparent */
}


#sidebar h2{ /* tous les titres h2 du sidebar => welcome, In short, Categories, Links, Syndication  */
	margin: 0;
	padding: 5px;
	color: #666;
	background: transparent url(img/sidebarh2.png);
	font-weight: normal;
	text-transform: uppercase;
	font-size: 1em;
}

#sidebar h3{
	padding-left: 16px;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 1em;
	background: transparent url(img/linkscat.png) no-repeat left center;
}

#sidebar a{
	color: #666;
	background: transparent;
	text-decoration: none;
}

#sidebar a:hover{
	color: #333;
	background: transparent;
}

#sidebar ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar ul li{
	padding: 5px 0;
	border-bottom: 1px solid #EEE;
}

#sidebar ul li a{
	display: block;
}

Analyse des blocs du #sidebar :

div id="description" :

<div id="description">
      <h2>Welcome</h2>
      <p>
        <?php pxInfo('description'); ?>
      </p>
    </div>

S'affichent ici : "Welcome" en h2 (à mettre en Français) et la description de votre site (pxInfo('description'))
Bloc stylé par : #sidebar div, #sidebar h2
Vous pouvez lui attribuer des règles css spécifiques : #description ....

div id="in-short" :

<div id="in-short">
      <h2>In short</h2>
      <ul>
        <?php while (!$res->EOF()): ?>
        <li><a href="<?php pxResPath(); ?>"><?php pxResTitle(); ?></a></li>
        <?php
			$res->moveNext();
			endwhile;
		?>
      </ul>
    </div>

S'affiche ici "In short" en h2 (mettre en Français: "A retenir", "En bref"). Nous avons ensuite une boucle $res qui génére des liens sous forme de liste non ordonnée. Ces liens sont les titres des ressources de la catégorie en cours (pxResPath + pxResTitle) = les ressources de la catégorie "page d'accueil" dans ce cas !

Attention, ne s'afficheront dans "in-short" que les ressources que vous avez créées et/ou enregistrées dans la catégorie "page d'accueil" = catégorie parente de toutes les autres ! (côté administration dans le manager lors de la création de vos ressources).
Pour enlever une ressource du "in-short", il suffit de supprimer son enregistrement dans la "page d'accueil". D'où l'intérêt d'avoir enregistré au préalable la ressource dans une autre catégorie (principale et/ou secondaire).

Bloc stylé par : #sidebar div, #sidebar h2, #sidebar a, #sidebar a hover, #sidebar ul, #sidebar ul li, #sidebar ul li a (voir plus haut !)
Vous pouvez lui attribuer des règles css spécifiques : #in-short ....

div id="search" :

<div id="search">
      <form action="<?php pxInfo('url'); ?>search.php" method="get">
        <h2>
          <label for="q">Search</label>
        </h2>
        <p class="field">
          <input name="q" id="q" size="10" value="" accesskey="4" type="text">
          <input class="submit" value="ok" type="submit">
        </p>
      </form>
    </div>

S'afffiche ici le formulaire de saisie pour effectuer une recherche. Remplacez dans le titre h2 "Search" par "Recherche". Ce blos est stylé dans style.css par #sidebar div, #sidebar h2 et :

#search #q{
	border: 1px solid #CCC; /* bordure solide d'épaisseur 1 pixel */

	background: #FFF url(img/search.png) no-repeat 2px; /* image de la loupe dans la balise input */
	padding-left: 14px; /* marge interne gauche pour placer l'image search.png */
}

Attention : pour que votre page soit valide xhtml1.0 strict, il faut fermer les balises input comme ceci :

<input name="q" id="q" size="10" value="" accesskey="4" type="text" />
<input class="submit" value="ok" type="submit" />

div id="categories" :

<div id="categories">
      <h2>Categories</h2>
      <?php pxPrimaryCategories('<ul id="top-categories">%s</ul>'); ?>
    </div>

S'affiche ici "Categories" en h2 (mettre en français !). Nous avons ensuite la fonction pxPrimaryCategories qui affiche une liste HTML non ordonnée de liens pointant vers les catégories primaires (principales), c.a.d celles ayant la catégorie racine "/" (= page d'accueil) comme parente.
Ce bloc est stylé par : #sidebar div, #sidebar h2, #sidebar a, #sidebar a hover, #sidebar ul, #sidebar ul li, #sidebar ul li a (voir plus haut !)
Vous pouvez créer une nouvelle règle : #top-categories

div id="links" :

<div id="links">
      <h2>Links</h2>
      <ul>
        <li><a href="http://www.plume-cms.net/">PLUME CMS</a></li>
        <li><a href="http://www.fsf.org/">FSF</a></li>
        <li><a href="#">Your link 1</a></li>
        <li><a href="#">Your link 2</a></li>
      </ul>
    </div>

S'affiche ici "Links" en h2 (mettre en français: Liens). Nous avons ensuite une liste non ordonnée de liens qu'il faut créer directement dans le code source (et dans tous les autres gabarits !) sauf si vous avez installé l'excellent plugin pour Plume: Plug-in Link téléchargeable sur le Wiki.
Ce bloc est stylé par : #sidebar div, #sidebar h2, #sidebar a, #sidebar a hover, #sidebar ul, #sidebar ul li, #sidebar ul li a (voir plus haut !)

div id="syndicate" :

<div id="syndicate">
      <h2>Syndication</h2>
      <ul>
        <li><a href="<?php pxInfo('url'); ?>rss.php">rss 1.0</a></li>
      </ul>
    </div>

S'affiche ici "syndication" en h2. Puis le lien vers rss.php (se trouvant à la racine de votre install de Plume) sous forme de liste non ordonnée. Si vous ne savez pas ce que veut dire "syndication", visitez ce lien1 et ce lien2.
Ce bloc est stylé par : #sidebar div, #sidebar h2, #sidebar a, #sidebar a hover, #sidebar ul, #sidebar ul li, #sidebar ul li a (voir plus haut !)

6. Le footer :

p id="footer" :

Le pied de page n'est pas englobé dans une balise div, il s'agit juste d'un paragraphe. Il est positionné par #footer dans layout.css (cf première page de l'article).
Il est stylé dans stule .css par #footer et #footer a :

#footer{
	background: #FFF url(img/footer.jpg) no-repeat; /* cf page 1 de l'article */
	color: #999;
	text-align: center;
}

#footer a{
	color: #999;
	background: transparent;
	text-decoration: none;
}

Préconclusion:

Le gros du travail est fait. Nous allons analyser les autres fichiers du templates dans les pages suivantes de cet article. Je ne reviendrai pas sur les css et fonctions déjà vues dans category_homepage.php. L'accent sera mis sur les fonctions php propres à chaque gabarit....