Prévisualiser un billet avec le thème

Le problème

DotClear ne permet pas de prévisualiser un billet avec le thème ; il ne vous donne que le résultat avec un thème interne. Si vous ne vous préocuppez que de sémantique, ça va. Mais si vous vous souciez aussi de mise en forme, c’est déjà plus gênant.

Personnellement, j’utilise un squelette hors-ligne formatté comme mon thème pour avoir un aperçu de ce que ça va donner. Grâce à l’excellente prévisualisation à la volée de BBEdit, je peux voir tout de suite ce que ça donne.

Néanmoins, une vraie prévisualisation avec le thème, ce serait mieux (à ce propos, WordPress le fait, avec une iframe). Ne serait-ce que pour prévisualiser des textes en attente sur votre blog (parce que copier, ouvrir son éditeur puis son modèle, copier, visualiser, ça va un moment).

La solution

Jérôme s’est attelé à la chose (je me suis limité à la CSS) et voici le résultat.

Vous allez devoir opérer sur deux fichiers :

Attention : pour les thèmes ne contenant que des fichier CSS (pas de fichier PHP), il faut soit modifier les fichiers PHP du thème default, soit copier ces fichiers dans le répertoire de votre thème.

  • le fichier postcon.php du thème utilisé (/themes/votre_theme/postcon.php). Il servira à permettre la visualisation du billet malgré sa condition hors ligne.
  • le template.php de votre thème (/themes/votre_theme/template.php), pour ajouter la mention prévisualisation

Copiez le code suivant et collez-le dans le fichier postcon.php du thème utilisé (si celui-ci n’existe pas, créez-le).

<?php # Code by Jérôme Lauriol for use with DotClear 1.x # see “Code sans garantie : visualisation d’un billet hors-ligne” # <http://jerome.steaknco.com/index.php?2006/05/19/75> # for explanations in French. # # Click on “View entry” to see the entry. # # Beware: this code is theme-dependant: if you change your theme, you’ll have # to move this code to the new theme. /* 	preview a online or offline post in theme context 	JL 2005-11 - http://jerome.steaknco.com */ if ($mode == 'post') { 	if (array_key_exists('HTTP_REFERER',$_SERVER)) { 	if ($_SERVER['HTTP_REFERER'] == 'http://'.$_SERVER['HTTP_HOST'].dc_app_url.'/'.DC_ECRIRE.'/poster.php?post_id='.$_GET['p']) { 	$blog->setPubMode(NULL);      }   } } ?>

Comme le signale le texte en commentaire, vous devez copier ce fichier dans chaque thème pour lequel vous voulez utiliser la prévisualisation.

Vous devez maintenant modifier template.php. Il faut inclure la mention prévisualisation dans le cas où on l’on affiche un billet Hors ligne, tout en limitant cet affichage aux seuls pages appelées avec le REFERER adéquat (cas des billets hors lignes pouvant être appelés via related).

Fichier template du thème, juste après la ligne <link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/style.css" />.

En-dessous de <link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/style.css" />, ajoutez le code suivant :

 <?php if ($mode == 'post') { if (array_key_exists('HTTP_REFERER',$_SERVER)) { if ($_SERVER['HTTP_REFERER'] == 'http://'.$_SERVER['HTTP_HOST'].dc_app_url.'/'.DC_ECRIRE.'/poster.php?post_id='.$_GET['p']) { if (!$GLOBALS['news']->f('post_pub')){ echo '>style type="text/css">'." "; echo '.post:before{color:gray;content:"prévisualisation";display:marker; font-size:3em;opacity:.5;left:50%;position:fixed;top:20%;z-index:10}'; echo '>/style>'." "; } } } } ?<

Avertir avec un filigrane

La fin de postcon.php décrit une CSS pour obtenir une sorte de filigrane pour préciser que l’on est bien en mode aperçu et que le billet n’est pas en ligne (car c’est traitre !).

  • Si votre blog n’est pas en UTF-8, vous pourriez avec des surprises avec le é de prévisualisation. Dans ce cas, remplacez le é par un e.
  • z-index n’est pas nécessaire, c’est juste au cas où le thème de la personne utiliserai déjà du z-index.
  • Enfin, si vous ne voulez pas de filigrane, il vous suffit de remplacer content:"prévisualisation"; par content:""; (ce n’est pas très élégant, mais ça marche)

Avantages

  • Le texte est semi-transparent et fixe pour gêner au minimum (s’il y a quelque chose qui gêne, on n’a qu’à faire coulisser l’ascenseur)
  • De plus, c’est de l’autogénéré, donc pas besoin de modifier la structure
  • Si le texte ne plaît pas, il suffit de changer la valeur de content
  • Le code distingue entre prévisualisation d’un billet hors-ligne et prévisualisation d’un billet déjà en ligne — dans ce dernier cas, il ne mentionne pas prévisualisation il semble que j’ai fait une erreur de code, sur ce point).

Moins

  • Sous Firefox, le texte n’est pas fixe et se positionne où il veut. Je ne sais pas pourquoi, mais vu comme il est placé, ça convient.
  • J’aurais bien vu un texte en diagonale (comme les filigranes), mais je ne sais pas faire en CSS. Et puis, ce serait peut-être trop intrusif.

Autres

  • Je n’ai pas vérifié avec Internet Emmerdeur
Apparence sous Firefox 2α2
Apparence sous Firefox 2α2
Apparence sous Opera 9
Apparence sous Opera 9
Apparence sous Safari 2.0.3
Apparence sous Safari 2.0.3

flattr this!

  • Bonjour, Argh ! J’ai eu du mal ! C’est exprès que tu as inversé deux “<” en “>” pour voir si on suit ? (ou empêcher les copier/coller des copieurs de trucs et astuces peut être ?)

    Et pour moi la prévisualisation, c’est ce qui s’affiche dans la première partie dans le mode billet… avant que je comprenne qu’il fallait que je clique sur “voir le billet”, pfffffffffff ! N’empêche, je sens que ton truc va beaucoup plaire. Merci.