Hobix Tutoriel 2

Liste des tutoriels

Introduction

Dans le dernier tutoriel, nous avons vu comment installer Hobix, et comment le configurer de façon à publier un blog (en utilisant les valeurs de configuration par défaut). Aujourd’hui, nous allons nous concentrer plus avant sur les fichier de configuration et l’architecture d’Hobix, afin de mieux comprendre ce qu’il se passe en coulisse.

Fichier de configuration général

Afin de connaitre la liste de tous les blogs dont il doit s’occuper, Hobix utilise un fichier de configuration général par utilisateur. Il est situé par défaut dans votre répertoire HOME, et appelé .hobixrc (notez le point au début du nom) :
misc> cat /home/sleeper/.hobixrc
--- 
weblogs: 
  dev-null: /home/sleeper/weblog/dev-null/hobix.yaml
  dev-null-test: /home/sleeper/weblog/dev-null-test/hobix.yaml
  bloggie: /home/sleeper/weblogs/bloggie/hobix.yaml
post upgen: true
username: sleeper
personal: 
  name: Frederick Ros
  url: http://sl33p3r.free.fr/blog/
  email: sl33p3r@free.fr
use editor: true
misc> 

Comme vous pouvez le voir, il associe tous les blogs dont il a la charge à un fichier de configuration (généralement nommé hobix.yaml). Il stocke aussi des informations supplémentaires comme votre nom d’utilisateur, votre nom réel, et toutes les choses que vous avez répondu aux questions qu’il vous a posé lors de l’installation.

Architecture d’un blog

Regardons maintenant en détail l’architecture d’un des blogs :
ls -l weblogs/bloggie/
total 4
drwxr-xr-x  5 sleeper users 152 jan 20 01:02 entries
-rw-r--r--  1 sleeper users 551 jan 20 00:23 hobix.yaml
drwxr-xr-x  7 sleeper users 320 jan 20 01:03 htdocs
drwxr-xr-x  2 sleeper users 368 jan 20 00:21 skel

On peut voir que dans le répertoire correspondant au blog que nous avons créé (bloggie) se trouvent trois répertoires et un fichier hobix.yaml.

Comme dit précédemment hobix.yaml est le fichier de configuration de ce blog, et il sera revu plus en détail dans la prochaine section.

les répertoires présent sont :

En plus de ces trois répertoires vous pouvez aussi avoir un répertoire nommé lib, où tous les plugins écrit par d’autres (ou par vous) iront.

Regardons le répertoire entries :
misc> ls -l weblogs/bloggie/entries/
total 4
drwxr-xr-x  2 sleeper users  72 jan 20 00:30 about
drwxr-xr-x  2 sleeper users 176 jan 20 00:30 blog
-rw-r--r--  1 sleeper users 276 jan 20 01:03 index.hobix
drwxr-xr-x  2 sleeper users  80 jan 20 01:03 misc
misc>
Vous pouvez votre que bloggie a actuellement trois sections :

et si nous regardons dans le répertoire misc, par exemple :

misc> ls -l weblogs/bloggie/entries/misc/
total 4
-rw-r--r--  1 sleeper users 198 jan 20 01:03 GoodMorning.yaml
misc> 

... nous y trouvons l’article que nous avons écrit dans le dernier tutoriel.

Nous avons donc appris que :

Fichier de configuration d’un blog

Le fichier le plus intéressant (en tant que créateur d’un blog) est hobix.yaml. C’est le coeur de la configuration et de la personnalisation de notre blog. Regardons-le :

misc> cat weblogs/bloggie/hobix.yaml 
--- !hobix.com,2004/weblog 
title: A test weblog
link: http://bloggie
tagline: To test .. for ever
period: 00:60:00
authors: 
  sleeper: 
    name: Frederick Ros
    url: http://bloggie
    email: jdoe@nowhere.org
linklist: !hobix.com,2004/linklist 
  links: !omap 
    - 
      hobix: http://hobix.com/
    - 
      del.icio.us: http://del.icio.us/
sections: 
  about: 
    ignore: true
    sort_by: id
requires: 
  - hobix/storage/filesys
  - hobix/out/quick
  - hobix/out/erb
  - hobix/out/rss
  - hobix/out/okaynews
  - hobix/out/atom
misc>
Parmi tous les champs, nous pouvons en voir certians simples à comprendre : Quelques autres champs sont moins faciles à comprendre :

Astuces

Hobix utilise des valeurs par défaut pour localiser les fichiers d’entrée (entries), de sortie (htdocs), de templates (skel) et les plugins (lib). Vous pouvez choisir d’autres valeurs pour ces répertoires, en utilisant les champs suivant dans hobix.yaml :

Notez que le chemin des répertoires peut-être relatif (dans ce cas il est relatif au répertoire abritant le fichier hobix.yaml), ou absolu.

Templates

Hobix vous permet de controller l’aspect de votre blog grâce à plusieurs système de templates. Comme vous pouvez le voir il propose des valeurs par défaut pour les templates (celles que nous utilisons actuellement) , mais autorise l’utilisateur à choisir le système qui lui convient le mieux. Toutes les templates utilisées se trouveront dans le répertoire skel.

Le répertoire skel

Comme expliqué précédemment, ce répertoire contient les templates qui vont vous aider à modifier l’apparence de votre blog. Regardons son contenu par défaut :

misc> ls -l weblogs/bloggie/skel/
total 0
-rw-r--r--  1 sleeper users 0 jan 20 00:21 entry.html.quick
-rw-r--r--  1 sleeper users 0 jan 20 00:21 index.atom.atom
-rw-r--r--  1 sleeper users 0 jan 20 00:21 index.html.quick-summary
-rw-r--r--  1 sleeper users 0 jan 20 00:21 index.xml.rss
-rw-r--r--  1 sleeper users 0 jan 20 00:21 index.yaml.okaynews
-rw-r--r--  1 sleeper users 0 jan 20 00:21 monthly.html.quick-archive
-rw-r--r--  1 sleeper users 0 jan 20 00:21 section.html.quick-archive
-rw-r--r--  1 sleeper users 0 jan 20 00:21 yearly.html.quick-archive
misc> 

Tout d’abord un commentaire sur la taille. Comme vous l’avez peut-être noté, tous les fichiers listés sont vides (leur taille est nulle).

Cela est du au fait que ces fichiers agissent à la fois comme un indice de ce qu’Hobix doit générer, et éventuellement de la façon dont il doit le générer.

Dans notre cas (taille nulle), ces fichiers servent juste d’indice, et les templates par défaut sont utilisées.

Comme vous pouvez le voir, tous ces fichiers suivent le même schéma : file-extension1-extension2. La partie file indique ce qui doit être généré :

La première extension (extension1) indique quelle extension utiliser pour le fichier généré.

La seconde extension (extension2) indique le nom du plugin qui va gérer le fichier. Ce peut être :

et d’autres étant donné que vous pouvez ajouter vos propres plugins…

ERb

ERb veut dire “Embedded Ruby” (Ruby embarqué). Les templates sont donc des fichiers HTML avec des portions de code en Ruby. Ces portions de code sont principalement introduites grâce aux balises <% ... %> et <%= ... %>. Le code entre <% et %> sera exécuté lorsque la page est évaluée, et la valeur des variables placées entre <%= et %> remplacera ces balises. En plus de cela, chaque template a accès à trois variables quand elle est évaluée. Ces 3 variables peuvent alors être utilisées dans les portions de code Ruby :

Par exemple, si vous mettez ceci dans un fichier nommé index.html.erb dans le répertoire skel :

  <% entries.each do |e| %>
    <div class="titleBar">
      <div class="entryTitle"><%= e.title %></div>
      <div class="entryDate"><%= e.created.strftime( "%m %d %Y" ) %></div>
    </div>
    <div class="entryBody">
      <%= e.content.to_html %>
    </div>
  <% end %>

Vous génèrerez quelque chose comme :

    <div class="titleBar">
      <div class="entryTitle"> Entry tile </div>
      <div class="entryDate">01 25 2005</div>
    </div>
    <div class="entryBody">
      My dear blog, ....
    </div>

pour chacune des entrées présentes dans la variable entries.

Redrum

Comme expliqué précédemment, Redrum est ” simplement ” ERb + RedCloth. Les mêmes règles que pour ERb s’appliquent, excepté que vous pouvez utiliser Textile au lieu de HTML.

Templates Quick

Les templates “Quick” sont une des choses les plus intelligentes et simples qui existent dans le monde des templates ;) De façon plus technique, ce sont des templates ERb, séparées en section YAML… Ca sonne un peu compliqué ? Ca ne l’est pas.

L’énorme avantage de cette solution est que l’on peut ainsi exprimer une forme d’héritage (au sens de l’orientation objet), et redéfinir seulement les parties voulues, pour tout le blog ou seulement pour certaines pages.

C’est ce système que nous utiliserons pour personnaliser notre blog.

Regardons la template Quick utilisée par défaut :

   --- %YAML:1.0
   # Format pour toute la page
   page: |
     <+ doctype +>
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
     <head>
     <meta http-equiv="Content-Type" 
           content="text/html; charset=utf-8" />
     <title><+ title +></title>
     <+ head_tags +>
     <style type="text/css">
     <+ css +>
     </style>
     </head>
     <body>

     <div id="page">

     <+ banner +>

     <div id="content">
     <+ sidebar +>

     <+ blog +>

     </div>
     </div>

     </body>
     </html>

   # En-tête et titre
   doctype: |
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                           "DTD/xhtml1-transitional.dtd">
   head_tags:
   css: |
     @import "/site.css";
   title: <%= weblog.title %>
   banner: |
     <div id="banner">
       <h1 class="title">
         <a href="<%= weblog.link %>"><%= weblog.title %></a></h1>
       <div class="tagline"><%= weblog.tagline %></div>
     </div>

   # Composants pour la barre latérale
   sidebar: |
     <div id="sidebar">
       <+ sidebar_list +>
     </div>
   sidebar_list: ['sidebar_archive', 'sidebar_links',
                  'sidebar_syndicate', 'sidebar_hobix']
   sidebar_archive: |
     <div class="sidebarBox">
       <h2 class="sidebarTitle">Archive</h2>
       <ul>
       <% months = weblog.storage.get_months( weblog.storage.find ) %>
       <% months.each do |month_start, month_end, month_id| %>
           <li><a href="<%= month_id %>"><%=
               month_start.strftime( "%B %Y" ) %></a></li>
       <% end %>
       </ul>
     </div>
   sidebar_links: |
     <div class="sidebarBox">
       <h2 class="sidebarTitle">Links</h2>
       <%= weblog.linklist.content.to_html %>
     </div>
   sidebar_syndicate: |
     <div class="sidebarBox">
       <h2 class="sidebarTitle">Syndicate</h2>
       <ul>
         <li><a href="/index.xml">RSS 2.0</a></li>
       </ul>
     </div>
   sidebar_hobix: |
     <div class="sidebarBox">
       <p>Built upon <a href="http://hobix.com">Hobix</a></p>
     </div>

   # Contenu du blog
   blog: |
     <div id="blog">
       <+ entries +>
     </div>
   entries: |
     <% entries.each_day do |day, day_entries| %>
        <+ day_header +>
        <% day_entries.each do |entry| %>
           <+ entry +>
        <% end %>
     <% end %>
   day_header: |
     <h2 class="dayHeader"><%= day.strftime( "%A, %B %d, %Y" ) %></h2>

   # Apparence d'un article
   entry: |
     <div class="entry">
       <+ entry_title +>
       <+ entry_content +>
     </div>
     <div class="entryFooter"><+ entry_footer +></div>
   entry_title: |
     <h3 class="entryTitle"><%= entry.title %></h3>
     <% if entry.tagline %><div class="entryTagline"><%=
           entry.tagline %></div><% end %>
   entry_content: |
     <div class="entryContent"><%= entry.content.to_html %></div>
   entry_footer: |
     posted by <%= weblog.authors[entry.author]['name'] %> |
     <a href="<%= entry.link %>"><%=
        entry.created.strftime( "%I:%M %p" ) %></a>

Un petit peu long, mais, bon c’est quand même la template de votre blog !!

Chaque section YAML possède un nom (par exemple entry_title), et peut-être utilisée au moyen de la construction <+ name +> (dans notre exemple <+ entry_title +>).

Si vous regardez les fichiers du répertoire skel, vous verrez que nous utilisons index.html.quick-summary. Il utilise exactement la template que nous avons vu, à l’exception prêt que le sommaire (summary) de l’article est affiché (s’il existe) au lieu du contenu de l’article. Dans notre cas nous ne verrons pas de différence si nous utilisons index.html.quick-summary ou index.html.quick.

Aussi vous pouvez effacer index.html.quick-summary sans remord, et créer un fichier index.html.quick vide.
misc> touch weblogs/bloggie/skel/index.html.quick
misc> rm weblogs/bloggie/skel/index.html.quick-summary 

OK. Maintenant supposons que nous ne sommes pas content quant à de la façon dont est affiché le jour de publication de chaque article sur la page d’index.

Cet en-tête est défini dans la template par défaut, en tant que :

   day_header: |
     <h2 class="dayHeader"><%= day.strftime( "%A, %B %d, %Y" ) %></h2>

qui affichera quelque chose comme :

<h2 class="dayHeader">Tuesday, February 08, 2005</h2>

Supposons que nous voulions être plus direct, et afficher le jour du publication sous la forme :

Le 2005/01/25 :

Pour cela, éditons index.html.quick pour changer day_header en :

   day_header: |
     <h2 class="dayHeader">Le <%= day.strftime( "%Y/%m/%d" ) %>:</h2>

Supposons aussi que nous ne voulions pas que le sous-titre (tag line) soit affichée à la suite du titre de notre blog, et que le titre, lui, soit affiché entièrement en majuscule. En changeant la section banner de :

   banner: |
     <div id="banner">
       <h1 class="title">
         <a href="<%= weblog.link %>"><%= weblog.title %></a></h1>
       <div class="tagline"><%= weblog.tagline %></div>
     </div>

à :

   banner: |
     <div id="banner">
       <h1 class="title">
         <a href="<%= weblog.link %>"><%= weblog.title.upcase %></a></h1>
     </div>

dans index.html.quick, nous devrions y arriver :

Regénérons bloggie :

Remarquez que si vous regardez un article donné (par exemple GoodMorning), vous pouvez voir que les changements que nous avons fait n’ont pas été pris en compte (ce qui est normal puisque la page GoodMorning.html est générée grâce à la template entry.html.quick).

Comment faire pour définir un style pour toutes vos pages ?? C’est simple : vous devez redéfinir la template Quick par défaut, à un endroit qui ne dépend pas de la page à générer… dans hobix.yaml !!

Donc, si on veut que notre titre soit en majuscule sur toute nos page, nous changeons la ligne :
  - hobix/out/quick

dans hobix.yaml afin de configurer le plugin quick :

    - hobix/out/quick: 
       banner: |
         <div id="banner">
           <h1 class="title">
             <a href="<%= weblog.link %>"><%= weblog.title.upcase %></a></h1>
         </div>

et on enlève cette définition de index.html.quick (qui est maintenant vide). On regénère maintenant bloggie et on vérifie que tout est bon (à la fois index.html et GoodMorning.html) :

et

Super-simple non ?

Maintenant jouez avec cela pour définir votre propre style… Dans le prochain tutoriel nous essaierons d’aller encore plus loin…

Liste des tutoriels


Version: $Id: hobix-tut-2-fr.yaml,v 1.3 2005/02/25 21:11:33 sleeper Exp $
On: $Date: 2005/02/25 21:11:33 $