{A:D}

Du code, des astuces et des pixels.

2 - Structure générale

Dans l’article précédant nous avions vu comment initialiser octopress.Nous allons maintenant créer notre thème minimaliste (car j’aime le minimalisme). Nous allons donc créer dans c:\octopress_tuto\.themes\ un dossier minimal dans l’explorateur windows.

Structure de notre thème 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/minimal/
|
+---sass
|   |   screen.scss
|   |   
|   +---base
|   |       _layout.scss
|   |       _solarized.scss
|   |       _theme.scss
|   |       _typography.scss
|   |       _utilities.scss
|   |       
|   +---custom
|   |       
|   +---partials
|           _footer-nav.scss
|           _footer.scss
|           _head.scss
|           _nav.scss
|           
+---source
    |   index.html
    |   
    +---images
    +---js
    +---_includes
    |       footer-nav.html
    |       footer.html
    |       head.html
    |       nav.html
    |       
    +---_layouts
            home.html

sass/ contiendra nos fichiers sass pour créer les feuilles de styles et source contiendra nos fichiers templates

Attardons nous sur sass/

sass/ est divisé en 3 dossiers et un fichier screen.scss qui appelera les autres:

  • base/ : contient la base du theme (mediaqueries, typographie, couleurs,etc…)
    • _layout.scss : contient la structure du thème et les media queries
    • _solarized.scss : contient la coloration syntaxique
    • _themes.scss : contient les couleurs et les bases du thème
    • _typography.scss : contient tout ce qui concerne la typographie
    • _utilities.scss : contient quelques @mixins utiles
  • custom/ : contient les paramètres que vous souhaitez changer du thème sans toucher au thème lui-même
  • partials/ : contient le code spécifique aux zones de nos templates (header, footer, article, blog ,etc…) nous verrons son contenu plus tard.

Passons maintenant sur source

qui est le coeur de notre thème. Il contient :

  • _includes/ : contient des éléments reccurents qui seront appelés à différents endroits de notre thème (date, auteur,etc…)
  • _layouts/ : contient les modèles qui seront utilisés lors de la création de vos articles et/ou pages (Nous verrons ça plus en détails)
  • images/ : contient les images de notre thème.
  • js/ : contient le javascript de notre thème.
  • favicon.png : notre favicon
  • index.html : la racine de notre site

Notre thème sera un thème minimaliste présentant sur la page d’accueil une liste de tous les articles avec un sommaire.

Exemple de disposition de home 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|       Logo        | Sous-titre                                                        Accueil     A propos        |
|                                                                                                                   |
+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|                                                   jj mm aaaa                                                      |
|                                               Titre de l'article                                                  |
|                                                                                                                   |
|       Sommaire de l'article sur plusieurs lignes                                                                  |
|                                                                                                                   |
|   -----------------------------------------------------------------------------------------------------------     |
|                                                                                                                   |
|                                                   jj mm aaaa                                                      |
|                                               Titre de l'article                                                  |
|                                                                                                                   |
|       Sommaire de l'article sur plusieurs lignes                                                                  |
|                                                                                                                   |
+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|       2012 Votre nom                                                                  Twitter      GitHub         |
|                                                                                                                   |
|+------------------------------------------------------------------------------------------------------------------+

Puis lorsque l’on clique sur le titre de l’article, on passe sur l’article lui-même :

Exemple de disposition d’article 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|       Logo        | Sous-titre                                                        Accueil     A propos        |
|                                                                                                                   |
+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|                                                   jj mm aaaa                                                      |
|                                               Titre de l'article                                                  |
|                                                                                                                   |
|       Article                                                                                                     |
|                                                                                                                   |
|                                                                                                                   |
|                                                                                                                   |
|                                                                                                                   |
|                                                                                                                   |
|                                                                                                                   |
+-------------------------------------------------------------------------------------------------------------------+
|                                                         |                                                         |
|       <  Article précédant                              |                             Article suivant >           |
|                                                         |                                                         |
+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|       Commentaires disqus                                                                                         |
|                                                                                                                   |
+-------------------------------------------------------------------------------------------------------------------+
|                                                                                                                   |
|       2012 Votre nom                                                                  Twitter      GitHub         |
|                                                                                                                   |
|+------------------------------------------------------------------------------------------------------------------+

Bien entendu tout cela sera responsive. ^^

Index.html

C’est le premier fichier que nous allons créer. Pour l’instant nous le remplissons juste de :

Entête 
1
2
3

---
layout: home
---

Cela signifie qu’on lui dit de prendre comme modèle le fichier home.html contenu dans le dossier _layout. On aurait pu l’appeler accueil ou site. C’est vous qui choisisser le nom de vos modèles. Par contre le dossier _layout et layout: sont inchangeables. J’ai donc décidé de l’appeler home, ainsi je sais que c’est ma page d’accueil.

Que contient mon home.html ?

home.html

Contenu de home.html 
1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  {%include head.html %}
  <body>
    <div class="wrapper">
      {% include nav.html %}
      {{ content }}
      {% include footer.html %}
    </div>
  </body>
</html>

Vous remarquez donc un doctype HTML5 et une structure de site standard avec des include. Ces include signifient qu’il faut inclure des fichiers HTML se situant dans le dossier _includes. Rien de bien compliqué ! Je lui demande donc de récupérer :

  • head.html
  • nav.html
  • footer.html

et de les inclure à mon home.html comme on le fait sous wordpress avec get_header(), get_footer() par exemple.

mais c’est quoi ce “content” avec les doubles accolades ?

et bien c’est justement le contenu que l’on placera dans index.html sous le bloc de code :

1
2
3

---
layout: home
---

Vous saisissez le principe ?

head.html

Basiquement, head.html contient tout ce qui se trouve entre les balises 

1

<head></head>

d’un document html standard

Contenu de head 
1
2
3
4
5
6
7
8
9
10
11
12
13
14


<head>
  <meta charset="utf-8">
  <title> {% if page.title %} {{ page.title }} | {% endif %}Anthony DURAND</title>
  <meta name="description" content="">
  <meta name="author" content="{% if site.author %} {{ site.author }} {% endif %}", "{% if site.twitter_user %} {{ site.twitter_user }} | {% endif %}">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="twitter:account_id" content="" />
  <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
  <link rel="stylesheet" href="screen.css" />
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

On y trouve diverses informations standard. Vous savez de quoi il en retourne. Il y a juste ces codes entre 

1

{% %} et {{}}

avec des if! Qu’est-ce que c’est ?

Exemple d’accolades 
1
2
3

<title> {% if page.title %} {{ page.title }} | {% endif %}Anthony DURAND</title>
../..
<meta name="author" content="{% if site.author %} {{ site.author }} {% endif %}", "{% if site.twitter_user %} {{ site.twitter_user }} | {% endif %}">

Et bien en fait il s’agit de variable contenues soit dans un fichier de configuration de votre octopress nommé _config.yml ou alors dans l’entete de votre fichier où se situait rapellez-vous : 

1
2
3

---
layout: home
---

Et bien on peut mettre des paramètres dedans ! Comme par exemple le titre, un sous-titre, un sommaire, une date, des catégories, des tags, etc…

Pour le premier exemple; il dit en fait que si dans l’entete de votre fichier d’appel (ici c’était index.html il trouve le contenu “title”, il l’affichera sous la forme “Titre de la page | Anthony DURAND”. C’est aussi simple que ça. Nous verrons un peu plus loin le détail de ces variables.

nav.html

Ce fichier contient tout simplement le logo, le sous-titre et la navigation du site qui se limite ici à “Accueil” et “A propos”. Cette template étant en fait un blog le plus épuré possible dans le style de short.retinart.com, daneden.me et davegamache.com (dont je me suis plus qu’inspiré pour ce tuto, j’en ai même un peu honte.) Mais bon, il représente le genre de thème dont j’ai envie ET en plus tourne sous Jekyll, qui est le fondement d’Octopress. C’est la base parfaite pour vous faire comprendre les bases.

nav.html 
1
2
3
4
5
6
7
8
9
10
11
12

<nav>
  <a id="logo" href="/">
    <hgroup>
        <h1><\></h1>
        <h2>{{ site.subtitle }}</h2>
    </hgroup>
  </a>
  <ul class="navigation">
    <li><a href="/">Accueil</a></li>
    <li><a href="/">A propos</a></li>
  </ul>
</nav>

footer.html

Ce fichier contendra tout simplement le footer de notre site.

footer.html 
1
2
3
4
5
6
7
8

<footer class="footer">
  <span class="author">2012 - {% if site.author %} {{ site.author }} {% endif %}</span>
  <aside class="offsite-links">
    <a class="twitter-link" href="http://www.twitter.com/_">Twitter</a> /
    <a class="github-link" href="https://github.com/_">GitHub</a> /
    <a class="rss-link" href="/feed">RSS</a>
  </aside>
</footer>

Vous pouvez récupérer le contenu de cet octopress_tuto dans la branche etape-1 du dépot GitHub spécialement créé à l’occasion de ce tuto.

Comments