Le CMS dédié aux blogs DotClear est aujourd'hui l'un des plus courant sur le web français, et c'est celui que j'ai choisi, associé au thème noviny depuis peu, pour faire tourner ce site.

Cette page regroupe les quelques modifications réalisées pour rendre la présentation du site plus agréable, et s'enrichira lentement au fil du temps. Le mise en place d'une URL plus présentable que celle par défaut fait l'objet d'un billet dédié. Les trucs et astuces spécifiques au thème noviny sont eux aussi sur un autre billet dédié.

Je fais surtout cette page en guise d'aide mémoire en cas de re-départ à zéro dans le future avec DotClear, pour ne plus perdre autant de temps à bidouiller en cherchant la bonne configuration...

Sommaire :

  1. Cacher le formulaire de commentaire
  2. Espacer ou mettre une image entre les billets
  3. Un lien mailto dans le wiki
  4. Créer un thème
  5. Séparer les fichiers et le moteur de DotClear
  6. Accélérer le chargement des textes
  7. Réinitialiser le mot de passe
  8. Jouer avec le chapeau
  9. Afficher l'heure de la dernière mise à jour des billets
  10. Les plugins utiles

Cacher le formulaire de commentaire

Une manipulation très simple permet de cacher le formulaire de commentaire et de déplier celui ci lors d'un clic, révélant ainsi les champs à remplir.

commentaire-avant.png

Pour obtenir ce résultat, il faut ajoutez ce code dans le "_head.html" de votre thème.

<script type="text/javascript">
//<![CDATA[
$(function() {
	if ($('body.dc-post, body.dc-page').length == 0) { return; }
	if ($('#pr').length > 0) { return; }
	
	var link = $('<a href="#">' + $('#comment-form h3:first').text() + '</a>').click(function() {
		$('#comment-form fieldset').show(200);
		$('#c_name').focus();
		$(this).parent().html($(this).text());
		return false;
	});
	$('#comment-form h3:first').empty().append(link);
	$('#comment-form fieldset').hide();
});
//]]>
</script>

commentaire-apres.png


Espacer ou mettre une image entre les billets

Il est facilement possible d'espacer les billets dans la page d'index du blog, pour plus de clarté. Les modifications pour réaliser cela se passent dans le fichier style.css :

.post {
	margin: 0 0 3em 0;
}

Les valeurs de margin sont dans l'ordre :

  • L'espace en haut.
  • L'espace à droite.
  • L'espace en bas.
  • L'espace à gauche.

Ici il faut donc modifier ce 3em pour augmenter l'espace entre la fin et le début des billets. Pour comprendre la signification de ce em, je vous invite à lire cette excellent article sur ce sujet.

Il est également possible de mettre une image entre les billets, avec le code suivant, toujours dans le style.css :

.post {
  background: url(/chemin/vers/image.png) no-repeat scroll bottom center;
}

Cette astuce permet de séparer très joliment les billets, une fois la bonne image trouvée. ;-)


Un lien mailto dans le wiki

La syntaxe est proche de celle en html :

[mon mail|mailto:mon@mail.tld]

Pour avoir une infobulle :

[mon mail|mailto:mon@mail.tld|langue|titre]

Le contenu de "titre" sera afficher dans une bulle.


Créer un thème

J'ai eu besoin de créer un thème pour ne pas être ennuyé à chaque mise à jour. J'utilise en effet BlowUp, le thème par défaut de DotClear2, et il me fallait faire attention de ne pas écraser les fichiers modifié sous peine de perdre les changements dans les fichiers .tpl et la feuille de style css.

Voici la procédure à suivre :

  • Créer un répertoire dans le dossier "themes", en le nommant avec le nom du futur thème pour plus de clarté.
  • Y créer un fichier "_define.php". Il set également possible de simplement copier le "_define.php" de BlowUp et de la modifier comme suit :
<?php
# -- BEGIN LICENSE BLOCK ----------------------------------
#
# This file is part of Dotclear 2.
#
# Copyright (c) 2003-2008 Olivier Meunier and contributors
# Licensed under the GPL version 2.0 license.
# See LICENSE file or
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
#
# -- END LICENSE BLOCK ------------------------------------
if (!defined('DC_RC_PATH')) { return; }
 
$this->registerModule(
	/* Name */			"Nom du thème",
	/* Description*/		"Description du thème",
	/* Author */			"Auteur du thème",
	/* Version */			'Version du thème'
);
?>

Enregistrer le fichier avec le codage de caractères UTF-8.

  • Copier le sous dossier "img" du thème BlowUp dans le dossier de votre nouveau thème.
  • Créer un fichier style.css dans le dossier de votre thème. Là aussi, il est possible de copier le fichier par défaut de BlowUp, puis de le modifier selon votre bon plaisir.
  • Et enfin, se rendre dans la partie "Apparence du blog", et cliquer sur "Utiliser ce thème" pour le rendre actif.

Il ne reste plus ensuite qu'a modifier l'ensemble du thème à votre convenance, la partie la plus simple ! ;)


Séparer les fichiers et le moteur de DotClear

Une très bonne page de la documentation de DotClear explique comment mettre les thèmes, plugins et fichiers publics utilisés dans un répertoire différent de celui du moteur du blog. L'installation et les mises à jour sont bien plus clair et propre une fois cette modification en place.

Voici le résumé pour un blog simple :

  • Au même niveau que le répertoire dotclear, créez un nouveau répertoire blog (le nom blog n'a rien de primordial, mais si vous le changez, adaptez la suite de cette exemple).
  • Dans ce répertoire blog, créez trois nouveaux répertoires :
    • plugins
    • public
    • themes

Le répertoire themes doit impérativement contenir une copie du thème par défaut de DotClear.

  • Modifiez dans about:config (à gauche dans votre tableau de bord) les champs suivants, comme indiqué :
    • public_path : ../blog/public
    • public_url : /blog/public
    • themes_path : ../blog/themes
    • themes_url : /blog/themes

Pensez à adapter blog si vous avez choisi un nom différent.

  • Éditez le fichier dotclear/inc/config.php pour remplacer les lignes :
//Plugins root
define('DC_PLUGINS_ROOT',dirname(__FILE__).'/../plugins');

Par les lignes :

// Plugins root - les plugins de base restent en place
// Les nouveaux vont dans /blog/plugins
define('DC_PLUGINS_ROOT',dirname(__FILE__).'/../plugins'.
PATH_SEPARATOR.dirname(__FILE__).'/../../blog/plugins');
  • Ensuite il reste encore à adapter le chemin vers prepend.php qui figure dans votre fichier index.php. Cette étape dépend de l'endroit ou répond la page d'accueil de votre blog, avec une url du type "http://www.domaine.tld" ou une url du type "http://www.domaine.tld/blog".
<?php
   /**
   placer le blog a la racine :
   l'identifiant du blog est "default" 
   les fichiers de dotclear sont dans /dotclear
   */
   define('DC_BLOG_ID','default'); # identifiant du blog
   # Chemin vers prepend.php.
   # Decommentez la ligne qui correspond a votre type d'url 
   # Adresse de type http://www.domaine.tld
   #require dirname(__FILE__).'/dotclear/inc/public/prepend.php';
   # Adresse de type http://www.domaine.tld/blog
   #require dirname(__FILE__).'/../dotclear/inc/public/prepend.php';
?>
  • Et enfin cliquez sur "Paramètres du blog" dans votre tableau de bord, et modifiez le champ "URL du blog" en fonction de vos choix :
    • Pour un site d'url "http://www.domaine.org" :
      • En query_string, "URL du blog" doit être :
        http://www.mondomaine.tld/index.php?
      • En path_info, "URL du blog" doit être :
        http://www.mondomaine.tld/index.php/
    • Pour un site d'url "http://www.domaine.tld/blog/blog" :
      • En query_string, "URL du blog" doit être :
        http://www.mondomaine.tld/blog/index.php?
      • En path_info, "URL du blog" doit être :
        http://www.mondomaine.tld/blog/index.php/

Et voilà !


Accélérer le chargement des textes

Il est possible d'améliorer la vitesse d'affichage d'un site sous DotClear2 en utilisant la compression des textes. Cette technique propose de compresser avec GZip les textes du site si le navigateur utilisé par le visiteur le permet. Si ça n'est pas le cas, la compression est ignorée et le site est chargé normalement, il n'y a donc pas de conséquence négative.

Pour mesurer l'impact de cette technique, vous pouvez utiliser Web Site Optimisation ou l'excellent FireBug par exemple.

Pour activer la compression GZip il suffit d'ajouter une petite ligne à votre fichier index.php, typiquement situé à la racine de votre site. La ligne à ajouter est la suivante :

ob_start('ob_gzhandler');

Cette ligne peut être ajoutée juste à la suite du "<?php" en tout début de fichier :

<?php
ob_start('ob_gzhandler');
# -- BEGIN LICENSE BLOCK ----------------------------------
#
# This file is part of Dotclear 2.
#
# Copyright (c) 2003-2008 Olivier Meunier and contributors
# Licensed under the GPL version 2.0 license.
# See LICENSE file or
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
#
# -- END LICENSE BLOCK ------------------------------------

if (isset($_SERVER['DC_BLOG_ID'])) {

Il faut tout de même noter que cette méthode demande plus de ressources de calcul au serveur hébergeant le site, pensez donc à épargner votre hébergeur de ces calculs si besoin. Il est également possible d'activer la compression directement dans la configuration d'Apache (c'est aussi possible avec d'autres serveurs http), mais cette méthode via le fichier index.php a l'avantage d'être utilisable sur un environnement mutualisé.


Réinitialiser le mot de passe

Pas vraiment une amélioration, mais une astuce qui peut-être utile en cas de perte du mot de passe, et d'impossibilité de le récupérer si l'hébergeur du site ne gère pas les mails ou si l'adresse mail indiquée dans DotClear2 n'est pas valide. Le principe est d'utiliser un petit script php pour remettre à zéro le mot de passe :

  • Télécharger le script.
  • Éditez le fichier et remplacez 1.2.3.4 par votre adresse IP[1].
# Ceci est l'adresse IP autorisée à réinitialiser le mot de passe
define('ALLOWIP','1.2.3.4');
  • Renommez le fichier "passwd" en "passwd.php".
  • Copiez le dans le dossier admin/ de votre installation de DotClear2.
  • Rendez-vous à cette adresse : http://votre.domaine.tld/chemin/vers/admin/passwd.php
  • Laissez vous guider. :-)

Tout les détails (ainsi qu'un lien pour télécharger le script avec votre IP directement configurée) sur le blog de l'auteur de ce script, merci à lui !


Afficher l'heure de la dernière mise à jour des billets

Il faut pour cela ajouter le code suivant dans le fichier ''_public.php__ du thème en cours d'utilisation :

<?php
$core->tpl->addValue('UpdateTime', array('tplMyThemeAdditions', 'UpdateTime'));

class tplMyThemeAdditions {
        public static function UpdateTime($attr)
        {
                $format = $GLOBALS['core']->blog->settings->date_format;
                if (!empty($attr['format'])) {
                        $format = addslashes($attr['format']);
                }
                
                $f = $GLOBALS['core']->tpl->getFilters($attr);
                $p = '<?php if ($_ctx->posts->post_upddt > $_ctx->posts->post_creadt) {'.
                        'echo "<li>Modifi&eacute; le : "; '.
                        'echo '.sprintf($f,"dt::dt2str('".$format."',\$_ctx->posts->post_upddt)").'; ';
                
                $format = '';
                $format = $GLOBALS['core']->blog->settings->time_format;
                if (!empty($attr['format'])) {
                        $format = addslashes($attr['format']);
                }
                $p .= 'echo " &agrave; "; '.
                        'echo '.sprintf($f,"dt::dt2str('".$format."',\$_ctx->posts->post_upddt)").'; '.
                                'echo "</li>"; } ?>';
                
                return $p;
        }
}
?>

Ce code permet de mettre en place une fonction nommée "UpdateTime" qui sera à appeler dans le fichier post.html du thème avec la ligne suivante :

tpl:UpdateTime

Dotclear conserve trois dates et heures par billet :

  • Celle de création, qui correspond au premier enregistrement du billet, dans un champ post_creadt.
  • Celle de mise en ligne, qui correspond à la mise en ligne du billet, dans une champ post_dt.
  • Celle de modification, qui correspond au dernier enregistrement du billet, dans un champ post_upddt.

Jouer avec le chapeau

Le chapeau c'est cette partie de texte dans le champ nommé "Extrait" sur la page d'édition des billets.

Le contenu de ce champ s'affichera dans les pages présentant les listes de billets telles que la page d'accueil ou le tri sur une catégorie, suivi d'un lien « Lire la suite ». Il figurera également au début du billet dans le contexte de l'affichage du billet seul. Si vous ne remplissez pas ce champ, le champ "Contenu" sera intégralement affiché dès la page d'accueil.

Il est possible de faire en sorte de ne pas afficher le chapeau dans un billet après avoir cliquer sur « Lire la suite », et ainsi de limiter l'usage du chapeau à une présentation du billet uniquement lisible sur la page d'accueil ou celle des catégories. Pour cela il faut retirer la ligne suivante du fichier post.html du thème utilisé :

tpl:EntryExcerpt

Les plugins utiles

Le plugin Carnaval

Ce plugin permet de mettre en valeur les commentaires de certains utilisateurs en affectant des couleurs aux textes ou aux fonds des commentaires. Sur un fil de commentaires importants, c'est un réel atout pour améliorer la clarté de la page. Voici comment l'utiliser, avec pour exemple un utilisateur nommé "visiteur" :

  • Télécharger et installer le plugin, avec DaInstaller par exemple.
  • Une fois en place, il faut l'activer dans la page du plugin sous "Extensions".

carnaval-activer.jpg

  • Ensuite définir un utilisateur dans "Ajouter une classe CSS" :
    • Nom : Le nom qui apparaitra dans la page Carnaval.
    • Classe CSS : Le nom de la Classe CSS sur le site. Typiquement le nom du visiteur qui laisse le commentaire suivi de "Comment", par exemple visiteurComment.
    • Adresse Email : L'email indiqué par le visiteur.
    • Site : Le site web indiqué par le visiteur.

carnaval-ajouter.png

  • Puis il faut ajouter ceci dans le style.css pour chaque visiteur enregistré dans le plugin :
#comments dt.visiteurComment{background-color:yellow;color:grey}
#comments dd.visiteurComment{background-color:#F5FF36;color:#555555}
  • Et enfin modifier backgroud-color et color à votre convenance.

plugin-dc2-carnaval_5.png

Notez que pour mettre en valeur vos propres commentaires, il existe une classe CSS "me" par défaut dans DotClear, qui ne nécessite pas la présence du plugin Carnaval pour être utilisé. Elle s'active en ajoutant le code suivant dans votre fichier style.css :

#comments dd.me {
border-left-color: #grey;
background: #F5FF36;
}

Pensez bien à remplir les champs du commentaire avec exactement les mêmes valeurs que celles enregistrées sur la page "Système/Utilisateurs" de l'interface d'administration de Dotclear, sinon ça ne marchera pas. :-)


Le plugin CompreSS

Si votre fichier style.css devient trop gros, il peut ralentir le chargement de votre site. Une méthode toute simple consiste à le compresser pour réduire sa taille. Ce plugin propose de très simplement réaliser cette tâche, via une page "CompreSS" disponible sous "Extensions" dans le panel d'administration de votre DotClear2.

Notez que la "compression" n'en est pas vraiment une. Le fichier CSS est simplement retailler pour supprimer tout les espaces et lignes vides qu'il peut contenir. Le résultat final permet de réduire la taille du fichier, mais en contrepartie celui-ci devient plus difficile à éditer. Rassurez vous, CompreSS réalise automatiquement une sauvegarde du CSS original, il est donc facile d'éditer cette sauvegarde puis de la recompresser.


Le plugin daInstaller

Ce plugin offre de suivre les mises à jour de tous les plugins installés sur votre DotClear2, et de les mettre à jour automatiquement.

Il ajoute une entrée dans le menu "Système", dénommée "Installeur DotAddict.org", qui permet de mettre à jour ou installer très simplement extensions et/ou thèmes, via une liste ou même une recherche.

daInstaller.png


Le plugin Javatar

Un petit plugin très simple qui se charge d'aller récupérer le Javatar (l'image associée à un compte Jabber) des visiteurs qui laissent un commentaire en prenant soin d'indiquer leur adresse Jabber. Si l'adresse Jabber est absente, il se tourne alors vers le Gravatar de l'adresse mail du visiteur.

Un plugin uniquement esthétique donc, mais que je trouve bien sympathique. :-)


Le plugin LightBox

Superbe petit plugin permettant d'afficher les images du site dans une boite s'ouvrant par dessus. Il faut penser à l'activer dans la page "Paramètres du blog". A noter qu'il ne fonctionne qu'avec les images ajoutées "En tant que lien vers l'image originale". Pas comme celle ci dessous donc !

lightbox.png

La version 1.2 du plugin apporte quelques modifications et en particulier la possibilité d'afficher sur la gauche ou la droite de l'image l'icône "zoom" de son choix lors du survol de l'image par la souris.


Le plugin MyMeta

Un plugin énorme qui permet de définir des méta-données pour ses billets. Son utilisation ne semble pas particulièrement délicate, mais je n'ai jamais eu le temps de me pencher dessus. Actuellement disponible en version 0.3, voici un excellent lien pour apprivoiser la version 0.2.


Le plugin StaticCache

Comme son nom l'indique, ce plugin permet d'améliorer le cache de Dotclear. L'amélioration peut être assez incroyable, en particulier chez les hébergeurs mutualisés.

Il est nécessaire d'ajouter quelques lignes dans le fichier inc/config.ini de votre DotClear :

# Static Cache
# Activer le plugin
define('DC_SC_CACHE_ENABLE',true);
# Definir le chemin du repertoire de cache
define('DC_SC_CACHE_DIR',DC_TPL_CACHE.'/dcstaticcache');
# Permet les appels au cache avant ceux a la base de donnees
require(dirname(__FILE__).'/../plugins/staticCache/_post_config.php');

Pensez à adapter le chemin de la ligne contenant require vers l'emplacement des fichiers du plugin.


Le plugin TagFlash

Il permet comme son nom l'indique d'afficher les tags du site sous forme d'un nuage en Flash, une présentation bien plus esthétique que celle par défaut en ligne de tags.

Un petite astuce pour supprimer le lien "Tous les tags" sous le nuage. Il faut ajouter la ligne suivante dans le "style.css"

#extra .tagFlash p { display: none;}

Il semble également y avoir un problème spécifique à IE7, qui n'affiche pas le nuage. Une solution pour le résoudre, ajouter ce qui suit dans "/plugins/tagflash/default-templates/tagFlash-widget.html", au niveau de l'url qui appelle le .swf :

&t=" +new Date().getTime()

Pour obtenir une ligne comme ça :

var so = new SWFObject("index.php?pf=tagflash/tagcloud.swf&t=" +new Date().getTime(), "tagcloud"

Cette modification permet d'interdire la mise en cache, ce qui pose problème avec IE7.

De plus, sur ce site le pulgin ne fonctionnait que sur la page d'accueil. Suite à l'installation du plugin Log Erreur 404 j'ai remarqué que l'absence d'affichage du plugin était du à une erreur 404 (élément non trouvé). j'ai alors indiqué le chemin complet vers le fichier .js dans le fichier plugins/tagflash/default-templates/tagFlash-widget.html , et depuis tout marche correctement. Voici le fichier après modifications :

<div class="tagFlash">
<h2>{{tpl:WidgetParam param="title"}}</h2>

<script type="text/javascript" src="http://pastoutafait.org/index.php?pf=tagflash/swfobject.js"></script>

<!-- <div id="tagFlashContent">This will be shown to users with no Flash or Javascript.</div> -->
<div id="tagFlashContent">Pour une raison qui m'échappe, le plugin ne fonctionne pas sur toutes les pages...</div>

<script type="text/javascript">
<!--

var so = new SWFObject("http://pastoutafait.org/index.php?pf=tagflash/tagcloud.swf&t=" +new Date().getTime(), "tagcloud", "{{tpl:tagFlashWidth}}", "{{tpl:tagFlashHeight}}", "7", "{{tpl:tagFlashBackgroundColor}}");
<tpl:tagFlashIfTransparent>
so.addParam("wmode", "transparent"); 
</tpl:tagFlashIfTransparent>

so.addVariable("tcolor", "{{tpl:tagFlashTagColor}}");
so.addVariable("tspeed", "{{tpl:tagFlashSpeed}}");
so.addVariable("tagcloud", "{{tpl:tagFlashTags}}");
so.write("tagFlashContent");

// -->
</script>
<p><strong><a href="{{tpl:MetaAllURL}}">{{tpl:lang All tags}}</a></strong></p>
</div>

Les lignes à modifier sont :

<script type="text/javascript" src="http://pastoutafait.org/index.php?pf=tagflash/swfobject.js"></script>
var so = new SWFObject("http://pastoutafait.org/index.php?pf=tagflash/tagcloud.swf&t=" +new Date() ...

Le plugin Anti-Aspirateur

Ou comment protéger son site des robots et aspirateurs malveillants. Un plugin tout simple totalement indispensable.

Notes

[1] Pour trouver votre IP, suivez ce lien.

Commentaires

1. Le 8 avril 2009, 07:57 par Wiki

c'est bien ton blog toujours aussi intéressant! :)

2. Le 10 septembre 2009, 18:28 par Osku

Ravi que tu trouves deux de mes plugins utiles, ça fait plaisir.

Bonne continuation