les bidouillages de kyungjin

05 avril 2008

Une page d'accueil indépendante

Etiquettes: accueil, avancé

Mode: avancé

Vous souhaitez avoir un seul et même message en page d'accueil de votre blog, une "vraie" page d'accueil quoi, qui présente le site et son contenu, et qui contient éventuellement les liens vers les catégories ou les articles.
En mode normal, on peut créer un message, paramétrer en option d'affichage un seul message en page d'accueil et:
- soit on classe les messages du plus ancien au plus récent et on donne la date la plus ancienne au message d'accueil.
- soit on classe les messages du plus récent au plus ancien et on édite le message d'accueil à chaque nouvelle note pour lui donne la date et l'heure les plus récentes.
L'inconvénient est que seront toujours affichés la date du message, le pied de message et le lien "page suivante". De plus, dans certains agrégateurs de flux RSS (notamment dans IE7), seul 1 message sera affiché lors de l'abonnement.

En mode avancé, on va pouvoir supprimer les éléments qu'on ne souhaite pas en supprimant les blocs correspondants. Mais le lien "page suivante" sera toujours présent, car il est généré en php (merci Alerion pour la précision), et on n'y a pas accès.

Si on ne veut pas de ce lien, on a 3 solutions.
Pour donner un accès au blog normal, il faudra alors mettre un lien vers la page http://nomdublog.canalblog.com/archives/p0-1.html

1/ Ecrire le texte de la page d'accueil directement dans son code XHTML
C'est ma préférée car on s'affranchit totalement du fonctionnement de Canalblog, si la génération du lien "page suivante" change, ou si le code de ce lien change, cela ne nous affectera pas. Et on pourra sans problème augmenter le nombre de messages affichés en page d'accueil, ce qui jouera sur le nombre de messages affichés dans le flux RSS.
On va supprimer les blocs et balises spécifiques à Canalblog. Plus précisément, on va chercher les balises <blogger></blogger> et les enlever ainsi que tout ce qu'il y a entre:

<Blogger>
	<BlogDateHeader>
	<h2><$BlogDateHeaderDate$></h2> 
	</BlogDateHeader>
	<a name="<$BlogItemNumber$>"></a>
	<BlogItemTitle> 
	<h3><$BlogItemTitle$></h3>
	</BlogItemTitle>
	<BlogItemCategories>
	<h4>catégorie <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a></h4>
	</BlogItemCategories>
<$BlogItemBody$>
<div class="itemfooter">
gribouillé par <$BlogItemAuthorNickname$> à pas d'heure - 
<BlogItemCategories>dans <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories>
<BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message"><$BlogItemCommentsCount$> commentaire(s)</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks>
 - <a href="<$BlogItemURL$>" title="Lien permanent vers ce message">lien permanent</a></div>
</Blogger>

Et donc à la place de tout ça, on va y écrire directement notre message d'accueil
Si vous n'êtes pas suffisamment familier avec le XHTML, vous pouvez bien sûr écrire votre message comme une note classique en l'enregistrant en brouillon et récupérer le code par le bouton <> pour le copier / coller.

Voilà par exemple pour la page d'accueil de ce blog le code placé à la place de celui ci-dessus (à l'heure où j'écris cet article, comme c'est un blog de test la page d'accueil est amené à changer, mais bon, c'est pour le principe):

<div class="cadre">
<p>Bonjour,<br/>
Ceci est mon blog de tests en tous genres en présentation web en général et sur Canalblog en particulier.<br/>
S'il a l'air moche, c'est normal, ce sont des tests ;P</p>
<p>J'y posterai de temps en temps quelques tutos pour débutants (voire grands débutants) sur ce que j'aurais fait.<br/>
Ces tutos correspondront uniquement à ma façon de faire et je ne prétend en aucun cas avoir la méthode idéale.<br/>
Je ne suis qu'un amateur que la création web amuse et intéresse.<br/>
D'ailleurs si vous avez des remarques ou conseils je suis preneur ;)<br/>
Il est possible que certaines choses que je dirai ici aient déjà été dites ailleurs, je ne lis pas tous les sites d'aide ;)</p>
</div>
    
<h3>Pour s'y retouver dans mon bazard</h3>
<p><u><strong><a href="http://webbricolo.canalblog.com/archives/tutos_canalbog/index.html">Tutos ou articles relatifs à Canalblog</a>:</strong></u></p>

<ul>
<li><a href="http://webbricolo.canalblog.com/archives/2008/04/02/8577312.html">Le mode avancé de Canalblog</a></li>
<li><a href="http://webbricolo.canalblog.com/archives/2008/04/03/8587059.html">Les feuilles de styles</a></li>
<li><a href="http://webbricolo.canalblog.com/archives/2008/03/31/8566947.html">Personnaliser le favicon</a></li>
<li><a href="http://webbricolo.canalblog.com/archives/2008/04/02/8579820.html">Personnaliser le pied de message</a></li>
<li><a href="http://webbricolo.canalblog.com/archives/2008/04/05/8620330.html">Une page d'accueil indépendante</a></li>
</ul>
<p><u><strong><a href="http://webbricolo.canalblog.com/archives/general/index.html">Tutos ou articles généraux</a>:</strong></u></p>
<ul>
<li><a href="http://webbricolo.canalblog.com/archives/2008/04/01/8571752.html">De l'intérêt des standards</a></li>
</ul>

h3 est une balise de titre de niveau 3. Sémantiquement parlant, il n'est pas logique qu'elle se trouve ici, on devrait avoir un h1 vu que c'est le premier titre sur cette page. Mais c'est pour qu'il ait le même style que les titres de message.

Bien sûr, rien ne vous empêche de mettre un titre h1 (c'est même plutôt mieux) et de lui donner un style particulier, ou de donner un style particulier à toute votre page d'accueil, en définissant ça soit dans la feuille de style général, soit dans une feuille de style interne puisque ça ne s'appliquerait qu'à la page d'accueil.

Après, c'est juste une question de connaissance du langage.

2/ En ajoutant une feuille de style
Trouvée grâce à ce sujet sur le forum de canalblog.
On peut se contenter d'empêcher l'affichage du lien page suivante grâce au CSS
Si on observe le code source de la page d'accueil on peut repérer ceci:

<div id="content">
	<div class="blogbody">   
	<h2>31 mars 2008</h2> 
	<a name="8577312"></a>  
	<h3>article exemple</h3> 
 
	<p>exemple d'article</p>
	<p>blabla<br />
	blabla bla bla bla bla</p>

	<div class="itemfooter">
	gribouillé par kyungjin à pas d'heure dans la rubrique
	<a href="http://webbricolo.canalblog.com/archives/tutos_canalbog/index.html" title="Autres messages dans cette catégorie">tutos Canalbog</a> 
 - <a href="http://webbricolo.canalblog.com/archives/2008/03/31/8577312.html#comments" title="Commentez ce message">0 ce que j'en dit</a> 
 - <a href="http://webbricolo.canalblog.com/archives/2008/03/31/8577312.html" title="Lien permanent vers ce message">pour retrouver ce message</a>
	</div>
	<div> 
	<a href="http://webbricolo.canalblog.com/archives/p10-10.html">Page suivante »</a> 
	</div> 
        </div>
</div>

<div id="rightbar">

En gras, les éléments qui vont nous intéresser.
L'ensemble du message est contenu dans un div de class blogbody (fermé par le dernier </div> en gras).
On va se contenter de rendre invisible le lien "page suivante" en ajoutant une feuille de style interne:

<style type="text/css">  
.blogbody div {  
	visibility: hidden;  
	}  
</style>

Cela a pour effet de rendre invisible tous les conteneur div inclus dans celui de class blogbody.
Du coup, on remarque que le pied de page commençant par

<div class="itemfooter">

sera également invisible.
Si on veut le laisser visible il va falloir le préciser, en ajoutant une propriété CSS à la classe itemfooter. La feuille de style interne va être modifiée comme ceci:

<style type="text/css">  
.blogbody div {  
	visibility: hidden;  
	}
.blogbody .itemfooter{  
	visibility: visible;  
	} 
</style>

Voilà, je crois que ça se comprend de soi-même ;)
Mais si le code de ce lien est un jour modifié par Canalblog, il faudra modifier l'astuce.
Et il faut penser que tout div inclus dans le message d'accueil sera invisible à moins de lui donner une classe avec attribut visibility:visible. Attention donc si vous avez des widgets par exemple inclus dans un div.

3/Agir en début et fin de la boucle blogger
Astuce donnée par Alerion sur le forum Canalblog.

Ici on ne touche pas à la feuille de style, on se contente d'ajouter ce qui est en gras ci-dessous dans le code de la page d'accueil:

<div>
   <blogger>
</div>
...
<div style="display:none;">
   </blogger>
</div> 

L'avantage est que tous les autres div entre les balises ne seront pas affectés. Par contre le pied de message apparaîtra forcément, il faudra le traiter à part si on veut le faire disparaître, en ajoutant par exemple en feuille de style interne:

.blogbody .itemfooter{  
	visibility: hidden;
	} 

Commentaires

Poster un commentaire

Votre petit nom :

Adresse email :

Votre site à vous :

Titre du commentaire :

Ce que vous avez à dire :
Exprimez-vous!

Enregistrer mes infos ou afficher mes infos enregistrées

Rétroliens

URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=445046&pid=8620330

Liens vers des weblogs qui référencent ce message :