Noviny est un thème de type "magazine" (noviny veut dire journal/quotidien en tchèque), crée par Olivier Meunier. Ce thème a fait son apparition avec la sortie de la version 2.1.1 de Dotclear, et il offre une structuration de la présentation des données très poussée, se basant sur les catégories de Dotclear.


Le blog d'Olivier Meunier, papa de noviny et de Dotclear, permet de voir le thème en action, en particulier l'organisation des catégories.

noviny.jpg

Il est ainsi possible d'afficher un résumé des derniers billets de chaque catégorie sur la page d'accueil, et donc de grandement améliorer la présentation du site et de son contenu. Le moteur de recherche intégré au thème est un réel atout, et laisse peu de chance au classique widget "Recherche" de rester sur un blog utilisant noviny.

En résumé, noviny est un thème de grande qualité qui risque d'être choisie par de nombreux utilisateurs de Dotclear pour rendre ce CMS définitivement incontournable !


Voici un regroupement de quelques généralités et astuces intéressantes à savoir concernant ce thème pour DotClear.

Sommaire :

Ce billet ne comporte que des astuces dédiées au thème noviny. Pour des informations concernant les modifications plus globales de Dotclear, je vous invite à lire ces billets :


Généralités

Une liste des principaux éléments à savoir concernant le thème noviny :

  • Noviny utilise les catégories pour classer les billets présentés en page d'accueil.
    • Le billet en Une est le dernier billet publié de la catégorie en tête de liste.
    • Ensuite ce sont les derniers billets publiés dans chaque catégorie suivante, dans l'ordre de la liste.
  • Par défaut l'image qui accompagne le billet en Une fait 240 pixels de large (correspond à la taille "s" des miniatures générées par Dotclear). La hauteur s'adapte à ces 240 pixels en fonction de l'image. Attention au image beaucoup plus haute que large, elle déforme l'affichage de la Une.
  • L'image d'entête fait 940 x 180 pixels, par défaut il s'agit de themes/noviny/img/top-bg.jpg.
  • Le widget "Moteur de recherche" vient souvent se mettre n'importe ou. Il suffit de le supprimer, noviny incorpore une fonction de recherche par défaut.
  • Par défaut le thème affiche en extrait soit le chapeau du billet, soit les 500 premiers caractères pour la Une, ou les 250 premiers pour les autres billets.
  • "Dernières nouvelles" sur la droite liste les trois derniers billets sans catégorie.

Modifier "Dernières nouvelles"

  • "Dernières nouvelles" sur la droite recense les trois derniers billets sans catégories. Pour modifier ce comportement, éditez le fichier inc_meta.html,et modifiez la ligne <tpl:Entries no_category="1" lastn="3">.

Voici deux exemples :

<!-- # Affiche les 5 derniers billets sans categories -->
<tpl:Entries no_category="1" lastn="5">
<!-- #  Affiche les deux derniers billets sauf ceux de la categorie "linux"-->
<tpl:Entries category="linux ?not" lastn="2">
  • Pour changer le texte "Dernières nouvelles" en l'intitulé de votre choix, il faut allez modifier le fichier /themes/noviny/locales/fr/public.po :
msgid "Breaking news"
msgstr "Dernières nouvelles"

Modifiez "Dernières nouvelles" pour un blog uniquement en français, mais gardez les guillemets !

  • Si cette partie "Dernières nouvelles" ne vous convient pas et que vous voulez le supprimer, il faut éditer le fichier "inc_meta.html" et retirer ou commenter les lignes suivantes :
<tpl:Entries no_category="1" lastn="2">
  <tpl:EntriesHeader><div class="news"><h2>{{tpl:lang Breaking news}}</h2></tpl:EntriesHeader>
  <h3><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h3>
  <p>{{tpl:EntryContent encode_html="1" remove_html="1" cut_string="120"}}...
    <tpl:EntryIf operator="or" show_comments="1" show_pings="1">
    <span class="comment-count"><span> | {{tpl:lang Comments:}}</span>
      <a href="{{tpl:EntryURL}}#comments" title="{{tpl:EntryCommentCount count_all="1"}}">{{tpl:EntryCommentCount count_all="1" none="%s" one="%s" more="%s"}}</a></span>
    </tpl:EntryIf>
  </p>
  <tpl:EntriesFooter></div></tpl:EntriesFooter>
</tpl:Entries>

Mais en faisant cela, le thème continu d'afficher un espace blanc à la place du "Dernières nouvelles" disparu... Il est possible de remplir cette espace par un autre élément, par exemple une image, en insérant le code suivant à la place des lignes supprimées précédemment :

<!-- # Exemple pour afficher une image à la place du blanc -->
<div align="center">
<a href="http://www.april.org/adherer?referent=pastoutafait.org">
<img src="http://www.april.org/files/association/documents/bannieres/banniereadm4.php" alt="Promouvoir et soutenir le logiciel libre"/>
</a>
</div>

C'est déjà plus présentable qu'un simple espace vide.


Les miniatures en page d'accueil

Les miniatures qui accompagnent ou pas les billets de la page d'accueil sont tirées en premier lieu des images présentes dans les billets. La première image apparait alors en miniature à coté du résumé.

image-categorie.png

Si le billet ne contient pas d'image, il est possible de définir une image par défaut pour chaque catégorie. Il faut pour cela l'ajouter dans la description de la catégorie en passant obligatoirement par le "Sélecteur de média".

image-categorie-choisir.png

Dans l'ordre, si le billet ne contient pas d'image et que la catégorie n'a pas d'image définie, alors aucune miniature n'apparait.

Il est possible de forcer une image autre que la première présente dans un billet, en utilisant le code suivant dans le billet, en syntaxe wiki :

///html
<!-- <img src="http://chemin-vers-icone" /> -->
/// 

Le thème va chercher la première image qu'il trouve dans le billet, et même l'adresse d'une image en commentaire est prise en compte. Il faut donc mettre ce code avant le première image du billet ! Idéalement en premier dans la partie "Contenu" de l'interface d'édition des billets.


Permettre les sous catégories en Une

Par défaut, seul le dernier billet de la catégorie en tête de la liste des catégories peut apparaitre en Une. Si une sous catégorie de la première catégorie contient un billet plus récent, celui-ci ne sera pas placé en Une.

Pour modifier ce comportement, il suffit d'éditer le fichier "home.html" et de modifier la ligne <tpl:Categories level="1"> en retirant level="1" :

<!-- # Ne cherche pas dans les sous categories -->
<tpl:Categories level="1">
<!-- # Cherche dans les sous categories -->
<tpl:Categories>

Modifier la longueur des extraits

L'extrait est par défaut le chapeau du billet. Si le billet n'en a pas, il affiche les 500 premiers caractères pour la Une, et les 250 premiers pour les autres billets. Il est possible de modifier ces nombres.

Pour cela, il faut éditer le fichier "home.html", puis chercher les lignes :

  • Sous # lead : First category last post :
<div class="b post-content"><p>tpl:EntryContent encode_html="1" remove_html="1" cut_string="500"</p></div>

Modifiez ce "cut_string="500"" pour y indiquer à la place de 500 le nombre de caractères souhaité.

  • Sous # All other categories :
<div class="b post-content"><p>tpl:EntryContent encode_html="1" remove_html="1" cut_string="250"</p></div>

Modifiez ce "cut_string="500"" pour y indiquer à la place de 250 le nombre de caractères souhaité.


Afficher les x derniers billets des catégories

Par défaut noviny affiche le dernier billet de chaque catégorie en page d'accueil. Le bloc de la catégorie "en Une" est prévu pour accueillir un seul billet, et il n'est pas possible d'afficher plus d'un billet ici sans avoir à faire une grosse refonte du thème.

Par contre, les autres catégories affichées en dessous de "la Une", sur trois colonnes, permettent avec une petite modification d'afficher le nombre de billet désiré pour chacune des catégories. Si votre blog ne contient que quatre catégories, comprenant celle "en Une", afficher les deux ou trois derniers billets pour les trois autres catégories peut être très intéressant pour rendre la page d'accueil plus complète. Pour réaliser cela, il faut aller modifier le fichier home.html du thème noviny, et plus particulièrement cette partie :

      <!-- # All other categories -->
      <div id="overview" class="grid-l">
        <tpl:Categories level="1"><tpl:LoopPosition start="2"><div class="block">
          <div>
          <tpl:Entries category="#self ?sub" lastn="1" no_context="1">

Voici une explication de ces lignes :

<tpl:Categories level="1">

Début de la boucle sur les catégories de premier niveau, excluant donc les sous catégories éventuelles.

<tpl:LoopPosition start="2">

La boucle débute avec la deuxième catégorie (start="2"), juste après celle "en Une" donc.

<tpl:Entries category="#self ?sub" lastn="1" no_context="1">

Dans le contexte du "tpl:LoopPosition", sélection du dernier billet (lastn="1") de l'ensemble formé par la catégorie courante (#self) et l'ensemble de ses sous catégorie (?sub). Ainsi, pour afficher non pas uniquement le dernier billet mais le nombre de votre choix, il suffit de modifier ce lastn="1" en indiquant le nombre de billets voulu à la place de 1. Par exemple "lastn="3" pour afficher les trois derniers billets de chaque catégorie.


Espacer les éléments du footer

Si comme sur ce site vous avez plusieurs éléments dans le "footer", ceux ci sont très proches les uns des autres par défauts. Quand il s'agit d'images avec des liens, c'est assez difficile de s'y retrouver.

Pour donner de l'air à ces éléments, il faut ajouter dans le style.css la ligne "#footer p {margin:8px 0;}". Ce "8px" est le nombre de pixels entre les paragraphes. Pour plus de clarté, ajoutez cette ligne en dessous de celles déjà présentes concernant le footer :

#footer {
	padding: 10px 0 20px;
	text-align: center;
	background: #998F76;
	color: #fff;
}
#footer a {
	color: #463017;
}

#footer p {
	margin: 8px 0;
}

Afficher les vignettes de catégories sur les pages catégories et tags

Les pages listant les billets présents dans chaque catégorie ou contenant un tag sont par défaut un peu fade. Une façon simple de les rendre plus attractive consiste à simplement ajouter la vignette de la catégorie ou du billet, de la même manière que sur la page d'accueil. Pour le faire, il suffit d'ajouter la ligne suivante :

{{tpl:EntryFirstImage size="sq" class="category"}}

Dans les fichiers category.html et tag.html. Voilà la partie concernée, identique pour les deux fichiers, après l'ajout :

<tpl:Entries>
  <div id="p{{tpl:EntryID}}" class="post {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" lang="{{tpl:EntryLang}}" xml:lang="{{tpl:EntryLang}}">
  {{tpl:EntryFirstImage size="sq" class="category"}}
  <h2 class="post-title"><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a>

Ensuite, dans le fichier style.css, il faut encore ajouter un bloc, dans la partie du CSS traitant de la page catégorie pour plus de clarté, pour définir la position des vignettes sur la page :

img.category {
	float: left;
	display: block;
	margin: 3px 5px 3px 5px;
}

Vous pouvez jouer sur le float pour mettre les vignettes sur la droite, comme ceci float: right;, et sur le margin pour positionner les vignettes finement. Les valeurs sont dans l'ordre l'espace à laisser vide, en pixels, en haut, à droite, en bas et à gauche.

Cette astuce est également utilisable sur les pages de recherche et d'archives par mois. Il faut réaliser les modifications sur les fichiers search.html et archive_month.html, de la même façon que pour category.html et tag.html.


Utiliser le plugin "relatedPosts"

Il faut être sur de télécharger la dernière version du plugin, en la récupérant directement sur le site de l'auteur. La version présente sur DotAddict n'est malheureusement pas à jour...

En utilisant les widgets venant avec le plugin, qui sont très simple à configurer et mettre en place, il faut néanmoins modifier le fichier "plugins/relatedPosts/_public.php" sous peine de trouver une erreur dans l'URL de chaque lien sous "Billets précédents".

Voici la partie du fichier contenant la ligne à modifier, et la ligne à supprimer et celle à ajouter à la place :

/******* WIDGETS ************/

public static function previousPostsWidget(&$w)

{
global $core,$_ctx;
if($core->url->type != "post"){ 
return;
}

$settings = new dcSettings($core,$core->blog->id); 
$settings->setNamespace('relatedposts'); 
$params['limit'] = abs((integer)$w->limit);	
$params['post_type'] = 'post';	
$params['blog_id'] = $core->blog->id;
$params['post_statut'] = 1;
$sSqlCat = '';
if($settings->get('relatedposts_previousCat') == 'categorie'){
$params['cat_id'] = $_ctx->posts->cat_id;
}		

$params['sql'] = ' AND post_dt < TIMESTAMP \''.$_ctx->posts->post_dt.'\'';
$rs = $core->blog->getPosts($params);
if ($rs->isEmpty()) {
return;
}

$res = '<div class="previousPostsWidget">'.
($w->title ? '<h2>'.html::escapeHTML($w->title).'</h2>' : '').
'<ul>';
while ($rs->fetch()) {

/* * * * La ligne ci dessous est à supprimer * * * */
$res .= ' <li><a href="'.$core->blog->url.'post/'.$rs->getURL().'">'.html::escapeHTML($rs->post_title).'</a></li> ';
/* * * * Pour la remplacer par celle ci dessous * * * */
$res .= ' <li><a href="'.$rs->getURL().'">'.html::escapeHTML($rs->post_title).'</a></li> ';
} 

$res .= '</ul>
</div>';
return $res;
}

Utiliser le plugin "Multitoc"

Multitoc permet de lister par catégories, tags ou ordre alphabétique les billets, en affichant les titres, dates, nombre de commentaire ou de retroliens de chaque billet.

En l'état, l'affichage de la page de Multitoc n'est pas du tout correct avec le thème noviny, et il faut réaliser une grosse adaptation sur le fichier "plugins/multiToc/default-templates/multitoc.html" pour obtenir une page présentable...
Sous peine d'obtenir ce résultat :

multitoc-bad.png

Pour obtenir une composition de page correct, j'utilise un fichier multitoc.html adapté de la façon suivante :

<body class="dc-multitoc">
<div id="page">
{{tpl:include src="_top.html"}}

<div id="wrapper">

<div id="main">
<div id="content">
<div class="grid">
<!-- # lead -->
<div id="lead" class="grid-l">

</div>
<!-- # meta -->
<div id="meta" class="grid-s">
{{tpl:include src="inc_meta.html"}}

<!-- # extra -->
<div id="extra" class="grid-s widgets">
{{tpl:include src="inc_extra.html"}}
{{tpl:Widgets type="nav"}}
</div>
</div>
<div id="content-info">
<h2>{{tpl:lang Table of content}}</h2>
<p class="note">{{tpl:lang Click on each group name to display or hide entries list}}.<br />
Par <a href="http://pastoutafait.org/multitoc/cat">catégories</a> ou par <a href="http://pastoutafait.org/multitoc/tag">tags</a>.
</p></div>

<div class="content-inner">
<dl id="multitoc">
<tpl:MultiTocGroup>
<dt>{{tpl:MultiTocGroupTitle}} {{tpl:MultiTocGroupCount}}</dt>
<dd>
<p class="toc-group-desc">{{tpl:MultiTocGroupDesc}}</p>
<ul>
<tpl:MultiTocItem>
<li>
<a href="{{tpl:MultiTocItemUrl}}">{{tpl:MultiTocItemTitle}}</a>
{{tpl:MultiTocItemDate}}
{{tpl:MultiTocItemAuthor}}
{{tpl:MultiTocItemNbComments}}
{{tpl:MultiTocItemNbTrackbacks}}
</li>
</tpl:MultiTocItem>
</ul>
</dd>
</tpl:MultiTocGroup>
</dl>
</div>
</div>
</div> <!-- End #main -->

</div> <!-- End #wrapper -->

{{tpl:include src="_footer.html"}}
</div> <!-- End #page -->
</body>

Notez que l'exemple ci-dessus ne montre que le code entre les balises "body". Il ne semble pas nécessaire de faire des modifications ailleurs dans le fichier, donc je n'affiche ici que la partie modifiée. Notez de plus que ce code est issue de bidouillage, et qu'il n'est probablement pas très propre... Mais en tout cas le résultat sur la page Table me convient bien. :-)

Il est possible de mettre les liens vers les différents classements (par tags, catégories, etc) dans la partie droite du site en ajoutant le code suivant dans le fichier inc_extra.html :

<!-- # On table page -->
<tpl:SysIf current_tpl="multitoc.html">
  <div class="multitoc">
    <h2>Table des matières</h2>
    <ul>
      <li>
        <a href="?multitoc/cat">Table par rubriques</a>
      </li>
      <li>
        <a href="?multitoc/tag">Table par mots-clé</a>
      </li>
    </ul>
  </div>
</tpl:SysIf>

Merci à jmh2o du forum Dotclear pour cette astuce.


Ce billet grandira peut-être encore un peu, en fonction de mes besoins et découvertes sur ce superbe thème !

Merci aux auteurs des liens suivants, très utiles pour découvrir Noviny :

Commentaires

1. Le 28 août 2009, 16:48 par pascal

Bojour, voici ma version modifiée, celle-ci se base sur la version 1.3 de multitoc, et ne touche pas au code, en tout cas ne rajoute pas de liens persos à l'intérieur.
a+
Pascal
ps : désolé pour l'affichage du code dans les commentaires, peu pas mieux faire...
-

<body class="dc-multitoc">

<div id="page">

tpl:include src="_top.html"

<div id="wrapper">
<div id="main">

<div id="content">

<div class="grid"><!-- BEGIN GRID -->

<!-- AJOUT DE LA BOITE "meta" -->
<!-- # meta -->
<div id="meta" class="grid-s">
<tpl:Entries lastn="1">
<div class="last-update">{{tpl:lang Last update:}} <strong>{{tpl:EntryDate}}
</strong>
</div>
</tpl:Entries>
{{tpl:include src="inc_meta.html"}}
</div><!-- # END : meta -->

<!-- AJOUT DE LA CLASS "grid 1" -->

<div id="content-info" class="grid-l">

<tpl:MultiTocIf type="cat">

<h2>tpl:lang Table of content by category</h2>

</tpl:MultiTocIf>

<tpl:MultiTocIf type="alpha">

<h2>tpl:lang Table of content by alpha list</h2>

</tpl:MultiTocIf>

<tpl:MultiTocIf type="tag">

<h2>tpl:lang Table of content by tag</h2>

</tpl:MultiTocIf>

<p class="note">tpl:lang Click on each group name to display or hide entries list
</p>

</div>

<!-- AJOUT DE LA CLASS "grid-l" -->

<div class="content-inner grid-l" >

<dl id="multitoc">

<tpl:MultiTocGroup>

<dt>tpl:MultiTocGroupTitle tpl:MultiTocGroupCount</dt>

<dd>

<p class="toc-group-desc">tpl:MultiTocGroupDesc</p>

<ul>

<tpl:MultiTocItem>

<li>

tpl:MultiTocItemDate

<a href="tpl:MultiTocItemUrl">tpl:MultiTocItemTitle</a>

tpl:MultiTocItemAuthor

tpl:MultiTocItemCategory

tpl:MultiTocItemNbComments

tpl:MultiTocItemNbTrackbacks

<tpl:MultiTocMetaData>

<tpl:MetaDataHeader> - <ul class="post-tags"></tpl:MetaDataHeader>

<li><a href="tpl:MetaURL">tpl:MetaID</a></li>

<tpl:MetaDataFooter></ul></tpl:MetaDataFooter>

</tpl:MultiTocMetaData>

</li>

</tpl:MultiTocItem>

</ul>

</dd>

</tpl:MultiTocGroup>

</dl>

</div>
<!-- AJOUT DE LA BOITE "extra" -->
<!-- # extra -->
<div id="extra" class="grid-s widgets">
{{tpl:include src="inc_extra.html"}}
{{tpl:Widgets type="nav"}}
</div><!-- # END extra -->
</div><!-- END : GRID -->

</div>

</div><!-- End # main -->

</div><!-- End #wrapper -->
tpl:include src="_footer.html"

</div><!-- End #page -->

</body>
2. Le 28 août 2009, 18:07 par pascal

Ah oui, un petit réglage CSS dans la feuille de style de ce thème, pour éviter l'affichage tronqué des dates :

meta span.post-date span.date-y {top: 34px;}
comments span.comment-date span.date-y {top: 34px;}
meta span.post-date span.date-h {top: 34px;}
comments span.comment-date span.date-h {top: 34px;}
3. Le 28 août 2009, 19:05 par pascal

et enfin pour Joomulus et les tags avec accent français, cherchez dans le fichier "_public.php" du plugin la ligne :

‘blog->url.$core->url->getBase(’tag’).’/’.rawurlencode($rs->meta_id).’\’ ‘.

puis remplacez :

($rs->meta_id)

par :

(utf8_encode($rs->meta_id))

et hop !

4. Le 31 août 2009, 16:24 par Matthieu Patout

Merci bien Pascal pour ces améliorations.
Pas encore eu le temps de tester, mais ça semble "au poil". :-)

Encore merci !

5. Le 31 août 2009, 16:57 par pascal

De rien ! ;-)

Et merci pour la re-mise en page du code

6. Le 6 octobre 2009, 12:24 par fgriot

j'utilise aussi ce thème, superbe.
je suis sous dotclear 2.1.1
savez-vous si le passage sous 2.1.6 se passe sans pb avec ce thème ?

merci d'avance
f

7. Le 6 octobre 2009, 12:35 par Matthieu Patout

@fgriot : Curieux hasard, j'ai réalisé la mise à jour ce matin (2.1.5 → 2.1.6). :-)

Rien à signaler pour le moment, tout semble fonctionner normalement (j'ai juste jeté un rapide coup d'œil sur l'affichage et les plugins).

8. Le 6 octobre 2009, 12:43 par fgriot

merci !

9. Le 6 octobre 2009, 13:04 par fgriot

effectivement ici aussi tout s'est passé parfaitement (affichage et plugins ok)
juste quelques fichiers ie7 en js, qui avaient été transférés en ftp ASCII au lieu de binaire, que j'ai remis, pour permettre la MAJ automatique

10. Le 8 juillet 2010, 20:36 par stefdecuines

Bonjour,
Je ne sais pas si 9 mois après ça ce fait de relance le post , mais ...

Voilà, comment faire lorsque l'on affiche 2 billets dans les catégories sur la home, de supprimer la répétition du titre de la catégorie au dessus du 2éme billet .

Merci, Stef .

11. Le 8 juillet 2010, 22:56 par Matthieu Patout

@stefdecuines : Salut,

Je n'ai pas le souvenir d'une telle astuce...

Je ne sais pas si c'est possible, mais tu trouvera peut-être une réponse plus précise que la mienne sur les forums de dotclear.

12. Le 9 juillet 2010, 11:17 par stefdecuines

J'ais bien fait pas mal de recherche mais rien trouver ...

Encore merci pour ta reponse rapide et clair .

Stef

13. Le 13 août 2010, 10:40 par Matthieu Patout

@stefdecuines : La solution est . :-)