Créez des thèmes pour Typo partie 1 sur 3 : les thèmes standards

Le 23 novembre 2008 à 19h10 | Publié sous | 2 commentaires

Typo, le principal outil de publication en Ruby on Rails dispose d’un système de template poussé extrêmement souple, et probablement un des plus avancés qui soit. Il permet de créer aussi bien des thèmes rapides utilisant le balisage par défaut de l’application que des thèmes extrêmement complexes totalement personnalisés.
La majorité des thèmes disponibles sur Typogarden ayant été développés après l’introduction de ce second mode, ses possibilités – et sa simplicité – sont assez peu connues, laissant penser, à tort, que Typo ne dispose pas d’un système de templates avancé.

Vite fait, bien fait, la méthode pour les feignants

Un template Typo se compose à minima de trois fichiers :

  • Un squelette, appelé layout.
  • Une feuille de style CSS.
  • Un fichier à propos au format markdown.
  • Éventuellement des images, et une capture d’écran.

L’arborescence minimum est donc :

themes 
      \_ mon thème
                  \_ about.markdown
                  \_ images
                  \_ layouts
                            \_ default.html.erb
                  \_ preview.png
                  \_ stylesheets
                                \_ style.css

Le principal fichier est le fichier default.html.erb, qui va servir de squelette à votre thème. Il s’agit d’un simple fichier en HTML dans lequel nous allons placer quelques directives Ruby permettant d’afficher les informations venues de l’application.

En-tête du fichier

L’en-tête du fichier va contenir les informations standards pour un document HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head profile="http://gmpg.org/xfn/11">
  <title><%= h(page_title) %></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="fr" />

  <%= stylesheet_link_tag "/stylesheets/theme/style", :media => 'all' %>
  <%= page_header %>
</head>

Les directives importantes sont :

  • h(page_title), qui va contenir le titre du document en cours. Ce titre est généré automatiquement par Typo, et la traduction est assurée dans les langues supportées.
  • stylesheet_link_tag contiendra le nom de votre feuille de style, amputé (ou non) du suffixe .css.
  • page_header va afficher l’en-tête de page généré par Typo. Il contient les informations et directives suivantes :

    <ul>
  <li>Le tag ICBM pour la localisation géographique de votre blog Typo.</li>
  <li>Le champ <code>meta description</code> du document.</li>
  <li>Le champ <code>meta keyword</code> du document.</li>
  <li>Le champ RSD du site.</li>
  <li>Les URL des flux RSS et Atom pour le document en cours, pour la découverte automatique.</li>
  <li>Les feuilles de style utilisées par les plugins inclus dans Typo.</li>
  <li>Les fichiers Javascript nécessaires à votre blog Typo.</li>
  <li>L'appel à Google Analytics si vous avec renseigné ce champ dans l'administration.</li>
</ul>

Corps du fichier

Toutes les div incluses dans le corps de ce fichier ne sont pas indispensables, seuls les appels aux méthodes Ruby ont leur importance.

<body>
<div id="header">
  <h1><a href="<%= this_blog.base_url %>"><%= this_blog.blog_name %></a></h1>
  <h2><%= this_blog.blog_subtitle %></h2>
</div>

<div id="page">
  <div id="content">
    <%= @content_for_layout %>
  </div>

  <div id="sidebar">
    <%= render :partial => 'shared/search' %>
    <%= render_sidebars %>
  </div>
</div>

</body>
</html>

Ici, les directives importantes sont :

  • this_blog.base_url : l’URL de votre site, renseignée dans les settings.
  • this_blog.name : le titre du site, indiqué dans la configuration.
  • this_blog.blog_subtitle : la tagline de votre site, renseignée dans les settings.
  • content_for_layout est l’appel le plus important, puisque c’est lui qui va afficher le contenu de la page en fonction du contrôleur invoqué : liste de billets, liste de tags, billet seul…
  • render_sidebars permet d’afficher le contenu des plugins que vous aurez auparavant choisis dans l’administration.

Et voilà, vous savez faire un thème Typo standard. Dans la seconde partie de cet article vous apprendrez comment faire un thème avancé en utilisant toutes les ressources offertes par Typo.

  1. Harry Seldon 12 days plus tard :

    Merci pour cet article. Je suis justement en train de m’intéresser au design web et au design de mon blog Typo en particulier.

    Grâce à cet article j’ai pu changer le design de mon blog (même s’il n’est pas encore complètement finalisé). N’hésite pas à me donner ton avis sur ce design ! J’ai fait un court article sur le design web et la création de thème Typo ici

  2. Harry Seldon 12 days plus tard :

    Et PS J’attends avec impatience les parties 2 et 3 !

Merci de vous exprimer dans un français correct. Les commentaires déplacés, injurieux et le spam seront supprimés.

Les trackbacks sont fermés pour cause de spam.