Le Blog

Le blog laboratoire de F.L.D. Studio
0

Le module blog de Processwire

Adaptation du module blog de Processwire, style, localisation et optimisation.

Configuration

Modification de la configuration des options possibles avec TinyMCE pour le champ body.

On peut étendre la configuration par défaut qui par exemple n'accepte pas les balises <iframe></iframe>.

Contenu de la configuration par défaut :

@[id|class],a[href|target|name],strong/b,e
/i,br,img[src|id|class|width|height|alt],ul,
ol,li,p[class],h2,h3,h4,h5,blockquote,-p,
-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],
-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],
tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
#th[colspan|rowspan|width|height|align|valign|scope],
code,pre

Pour cela se rendre dans :

  • Setup
  • Field
  • Body
  • Onglet : Input
  • Region : TinyMCE Advanced Configuration Option
  • Champs : valid_elements, ajouter iframe[src|frameborder|style|scrolling|class|width|height|name|align]

Dans le  même esprit si on souhaite tout autoriser modifier la valeur par : *[*]

Dans ce cas tout est autorisé donc attention...

Le CSS

Concernant le style du code source. A l'origine rien n'est prévu dans le module pour afficher du code source. Celui-ci est donc affiché comme du texte normal, ce qui ne convenait pas pour ce type de blog. C'est donc la feuille de style /template/style/ theme.css que j'ai surchargée en ajoutant les instructions suivantes 

pre
{
 background-color: #eee !important;
 font: 12px "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
 padding: 8px;
 color: #001B4C;
 border-color: #ffb450 #ffb450 #ffb450 #ff8c00;
 border-style: solid;
 border-width: 1px 1px 1px thick;
 margin-bottom: 20px;
 word-wrap: break-word;
 white-space: pre-wrap;
}

Les deux dernières lignes autorisent le retour à la ligne et la coupure se fait sur les espaces.

Seconde adaptation pour l'affichage "reponsive" des images, en ajoutant la simple régle

    img { max-width: 100%; height: auto; }

Pour IE8 on fait un hack pour la même régle placée dans la feuille /template/style/ ie.css  

    img { width:auto; }

avec un test conditionnel dans /template/main.inc

    <!--[if IE 8 ]> <link rel='stylesheet' type='text/css' href='/site/templates/styles/ie.css'> <![endif]-->

pour terminer, rajout d'un lien sur mon site dans le pied de la page

<small id='footer_note'><a href="http://www.flds.fr"><?php echo $homepage->note; ?></a></small>

Le JavaScript

Tout d'abord, il est déplacé à la fin (juste avant la fermeture du </body>) dans /site/template/main.inc

<?php foreach($config->scripts as $file) echo "<script src='$file'></script>"; ?>

Pour optimiser le temps de chargement des script JS j'utilise la méthode du "HTML5 Way", c'est à dire sans scripts type pré-loader comme LAB.js (Load and Block)  ou la méthode Google pour son script analytic. (Voir ici une description assez complette pour comprendre que rien n'est vraiment résolu avec ce type de méthode)

tableau comparatif

Sur ce shéma on voit les différentes façon de traiter un script pendant le chargement d'une page.

  • Sans instruction  le script est chargé, puis executé, le parse de la page est intérrompu.
  • Avec defer le script est chargé sans intérrompre le parse et il est executé une fois celui-ci terminé (Comportement le plus courant avec les instructions OnDOMReady dans le script)
  • Avec async il est chargé sans intérrompre le parse et exécuté dès le chargement terminé, le parse est intérompu et reprend après l'exécution du script.

Attention async n'est pas encore reconnu par tous les navigateurs (surtout IE). Les explications sur les différences entre defer et async peuvent être trouvées sur le site de Microsoft. Il précaunise d'utiliser les deux, dans se cas le navigateur donnera la préférence à async, ce n'est pas forcement un comportement souhaitable car la plupart des scripts doivent attendre le chargement complet du Dom avec la fameuse séquence jQuery

(function($){
 // faire quelque chose quand JQuery est prêt
})(jQuery); 

Résultats avec le site : http://caniuse.com/#feat=script-async

CanIUse

C'est pourquoi j'utilise plutôt defer http://caniuse.com/#feat=script-defer

caniuse async

Premier test de temps de chargement avec http://www.webpagetest.org (Localisation Paris)

Légende

legende

Sans instruction defer

Comme on le voit les fichiers .js sont chargés séquentiellements.

Avec instruction defer

<?php foreach($config->scripts as $file) echo "<script defer src='$file'></script>"; ?>

Les fichiers .js sont chargés en parallele.

Localisation

Dans l'administration du site

Pour franciser les pages il faut intervenir en plusieurs endroits et modifier les scripts .php. Dans la partie administration du site il est possible de modifier le libéllé des rubriques (en jaune sur la recopie d'écran)

Rubriques admin à modifier

Pour le champs : Date

Modifier le format d'affichage du champ Date (Setup - Fields - Date - Onglet Détails)

Format du champ date

Les scripts  à modifier :

\wire\modules\Markup\MarkupPagerNav\PagerNav.php et MarkupPagerNav.module

\site\templates\search.php

Modification des scripts

Ressource Processwire :

Catégories: Processwire, Développement WEB

Tags: CSS

Commentaires: Pas de commentaires

Envoyer un commentaire