2014-11-24 22:52:53 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Redesign du blog, etc< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "author" content = "wxcafé" >
< link rel = "icon" type = "image/png" href = "//wxcafe.net/theme/img/favicon.ico" >
<!-- Le styles -->
2015-09-03 19:58:32 +02:00
< link rel = "stylesheet" href = "//wxcafe.net/theme/css/extra.css" type = "text/css" / >
2014-11-24 22:52:53 +01:00
< link rel = "stylesheet" href = "//wxcafe.net/theme/css/bootstrap.css" type = "text/css" / >
2015-09-03 19:58:32 +02:00
< link href = 'http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel = 'stylesheet' type = 'text/css' >
2014-11-24 22:52:53 +01:00
< script type = "text/javascript" >
/* < ![CDATA[ */
(function() {
var s = document.createElement('script');
var t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = '//api.flattr.com/js/0.6/load.js?'+
'mode=auto&uid=wxcafe&button=compact&popout=0';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
< / script > <!-- flattr button loader -->
< style type = "text/css" >
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.tag-1 {
font-size: 13pt;
}
.tag-2 {
font-size: 10pt;
}
.tag-2 {
font-size: 8pt;
}
.tag-4 {
font-size: 6pt;
}
< / style >
< link href = "//wxcafe.net/theme/css/bootstrap-responsive.css" rel = "stylesheet" >
< link href = "//wxcafe.net/theme/css/font-awesome.css" rel = "stylesheet" >
< link href = "//wxcafe.net/theme/css/pygments.css" rel = "stylesheet" >
<!-- Le fav and touch icons -->
< link rel = "shortcut icon" href = "//wxcafe.net/theme/images/favicon.ico" >
< link href = "//wxcafe.net/feeds/feed.rss.xml" type = "application/atom+xml" rel = "alternate" title = "Wxcafé RSS Feed" / >
< / head >
< body >
< div class = "navbar navbar-fixed-top" >
< div class = "navbar-inner" >
< div class = "container-fluid" >
< a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
2015-09-03 19:58:32 +02:00
< span class = "icon-bar" > < / span >
2014-11-24 22:52:53 +01:00
< / a >
< a class = "brand" href = "//wxcafe.net/index.html" > Wxcafé < / a >
< div class = "nav-collapse" >
< ul class = "nav" >
< li > < a href = "//wxcafe.net/archives.html" > < i class = "icon-th-list" > < / i > Archives< / a > < / li >
< li > < a href = "//wxcafe.net/pages/about/" > A propos< / a > < / li >
< li class = "divider-vertical" > < / li >
< ul class = "nav pull-right" >
< / ul >
< / ul >
< / div > <!-- /.nav - collapse -->
< / div >
< / div >
< / div >
< div class = "container-fluid" >
< div class = "row" >
< div class = "span9" id = "content" >
< section id = "content" >
< article >
< header >
< h1 >
< a href = ""
rel="bookmark"
title="Permalink to Redesign du blog, etc">Redesign du blog, etc< / a >
< / h1 >
< / header >
< div class = "entry-content" >
< div class = "well" >
< footer class = "post-info" >
< span class = "label" > Date< / span >
< span class = "published" title = "2013-06-12T19:14:00+02:00" >
< i class = "icon-calendar" > < / i > Wed 12 June 2013
< / span >
< br / >
< span class = "label" > By< / span >
< a href = "//wxcafe.net/author/wxcafe.html" > < i class = "icon-user" > < / i > wxcafe< / a >
< br / >
< span class = "label" > Category< / span >
2015-09-03 19:58:32 +02:00
< a href = "//wxcafe.net/category/note/" > < i class = "icon-folder-open" > < / i > Note< / a >
2014-11-24 22:52:53 +01:00
< br / >
< / footer > <!-- /.post - info --> < / div >
2015-09-03 19:58:32 +02:00
< p > Comme vous avez pu le remarquer, ce blog a “ un peu” changé récemment.< / p >
< p > Du coup, expliquons. J’ ai récemment monté < a href = "http://serverporn.fr" > serverporn< / a > , et ai par la même
occasion découvert < a href = "http://getpelican.com" > pelican< / a > . J’ ai tout de suite accroché a ce générateur de
site statique en python, du fait de son efficacité, de sa facilité d’ utilisation
2014-11-24 22:52:53 +01:00
et de sa grande customisation. En gros, pelican est un logiciel qui prend des
2015-09-03 19:58:32 +02:00
fichiers markdown ou reStructuredText, les passe a la moulinette d’ un “ thème”
constitué de templates pour les fichiers html et l’ organisation du projet et
d’ une partie “ statique” contenant le css, et les autres fichiers nécessaires au
2014-11-24 22:52:53 +01:00
projet, et en fait des pages html. < / p >
< p > Globalement, un thème est constitué ainsi :< / p >
2015-09-03 19:58:32 +02:00
< div class = "codehilite" style = "background: #272822" > < pre style = "line-height: 125%" > < span style = "color: #f8f8f2" > th< / span > < span style = "color: #960050; background-color: #1e0010" > è< / span > < span style = "color: #f8f8f2" > me< / span >
< span style = "color: #960050; background-color: #1e0010" > ├──< / span > < span style = "color: #66d9ef" > static< / span >
< span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > ├─< / span > < span style = "color: #f8f8f2" > css< / span >
< span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > └─< / span > < span style = "color: #f8f8f2" > [css< / span > < span style = "color: #f8f8f2" > files]< / span >
< span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > ├─< / span > < span style = "color: #f8f8f2" > img< / span >
< span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > └─< / span > < span style = "color: #f8f8f2" > [image< / span > < span style = "color: #f8f8f2" > files]< / span >
< span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > └─< / span > < span style = "color: #f8f8f2" > js< / span >
< span style = "color: #960050; background-color: #1e0010" > │< / span > < span style = "color: #960050; background-color: #1e0010" > └─< / span > < span style = "color: #f8f8f2" > [javascript< / span > < span style = "color: #f8f8f2" > files]< / span >
< span style = "color: #960050; background-color: #1e0010" > └──< / span > < span style = "color: #f8f8f2" > template< / span >
< span style = "color: #960050; background-color: #1e0010" > ├─< / span > < span style = "color: #f8f8f2" > base.html< / span >
< span style = "color: #960050; background-color: #1e0010" > ├─< / span > < span style = "color: #f8f8f2" > index.html< / span >
< span style = "color: #960050; background-color: #1e0010" > ├─< / span > < span style = "color: #f8f8f2" > page.html< / span >
< span style = "color: #960050; background-color: #1e0010" > ├─< / span > < span style = "color: #f8f8f2" > [...]< / span >
< span style = "color: #960050; background-color: #1e0010" > └─< / span > < span style = "color: #f8f8f2" > article.html< / span >
2014-11-24 22:52:53 +01:00
< / pre > < / div >
< p > Sachant que les fichiers .html sont en réalité des fichiers suivant la syntaxe
django, et utilisent des variables particulières telles < code > {{ article.content }}< / code > ,
par exemple. La syntaxe complète est très bien documentée dans la < a href = "http://docs.getpelican.com/en/3.2/themes.html#templates-and-variables" > doc< / a > de
pelican.< / p >
2015-09-03 19:58:32 +02:00
< p > L’ un des grands avantages de pelican est aussi la facilité qu’ il offre quand a
2014-11-24 22:52:53 +01:00
la mise a jour du blog.< br / >
En effet, il offre un système de Makefiles permettant, grâce a de nombreuses
cibles de compilation, de régénérer le site entier, de ne générer que les
fichiers modifiés depuis la dernière génération, de générer uniquement les
2015-09-03 19:58:32 +02:00
fichiers n’ existant pas la dernière fois, etc…
2014-11-24 22:52:53 +01:00
La gestion du projet en devient donc très simple, puisque après avoir écrit un
article, il suffit de faire un < code > make html< / code > pour mettre a jour le blog.< / p >
< p > De plus, le système de wordpress commençait a ne plus me convenir, du fait du
manque de customisation, du fait que ça soit du PHP (beurk), etc. La, avec
2015-09-03 19:58:32 +02:00
pelican, je contrôle bien plus ce qui est mis sur le serveur (puisque c’ est moi
qui ait modifié les templates et le css), c’ est lisible (puisque c’ est du
python, par opposition au PHP… ), et c’ est plus “ efficace” . Le markdown est
2014-11-24 22:52:53 +01:00
très pratique, je peux utiliser mon éditeur de texte de prédilection pour faire
2015-09-03 19:58:32 +02:00
les articles, je n’ ai pas besoin d’ un accès continu au net, bref, c’ est plus
2014-11-24 22:52:53 +01:00
efficace.< / p >
< p > En ce qui concerne les points négatifs : < / p >
< ul >
< li >
< p > Perte des commentaires:
2015-09-03 19:58:32 +02:00
Je vous propose de vous référer a l’ article de Gordontesos < a href = "http://gordon.re/hacktivisme/la-necessite-des-commentaires.html" > ici< / a > quand a
2014-11-24 22:52:53 +01:00
mon avis sur ce sujet.< / p >
< / li >
< li >
< p > Perte du bouton flattr:
2015-09-03 19:58:32 +02:00
Il va bientôt être remis, c’ est juste un manque de temps de ma part, mais vu
que toutes les pages passent par les mêmes templates, c’ est assez facile a
2014-11-24 22:52:53 +01:00
faire.< / p >
< / li >
< li >
< p > Perte du spam:
2015-09-03 19:58:32 +02:00
Pourquoi c’ est dans les points négatifs, ca?< / p >
2014-11-24 22:52:53 +01:00
< / li >
< li >
2015-09-03 19:58:32 +02:00
< p > Temps d’ adaptation et d’ appréhension du système:
2014-11-24 22:52:53 +01:00
Oui, pendant encore un certain temps, il y aura des glitchs plus ou moins
2015-09-03 19:58:32 +02:00
réguliers sur le blog, c’ est parce que j’ apprend a me servir de ce système
et que j’ apprend du css et du html. Ca arrive, ca passera, mais dans tous
les cas ca me permet d’ apprendre plein de choses, donc je mets plutôt ca
2014-11-24 22:52:53 +01:00
dans la catëgorie positive.< / p >
< / li >
< / ul >
2015-09-03 19:58:32 +02:00
< p > Voila, c’ est mon retour d’ expérience sur pelican. A plus. < / p >
2014-11-24 22:52:53 +01:00
< / div > <!-- /.entry - content -->
< / article >
< / section >
< / div > <!-- /span -->
< div class = "span3 well sidebar-nav" id = "sidebar" >
< ul class = "nav nav-list" >
<!-- Categories links -->
< li class = "nav-header" > < h4 > < i class = "icon-folder-close icon-large" > < / i > Categories< / h4 > < / li >
< li >
< a href = "//wxcafe.net/category/hacking/" >
< i class = "icon-folder-open icon-large" > < / i > Hacking
< / a >
< / li >
< li >
2015-09-03 19:58:32 +02:00
< a href = "//wxcafe.net/category/note/" >
< i class = "icon-folder-open icon-large" > < / i > Note
2014-11-24 22:52:53 +01:00
< / a >
< / li >
< li >
< a href = "//wxcafe.net/category/oses/" >
< i class = "icon-folder-open icon-large" > < / i > OSes
< / a >
< / li >
< li >
< a href = "//wxcafe.net/category/ranting/" >
< i class = "icon-folder-open icon-large" > < / i > Ranting
< / a >
< / li >
< li >
2015-09-03 19:58:32 +02:00
< a href = "//wxcafe.net/category/tutoriel/" >
< i class = "icon-folder-open icon-large" > < / i > Tutoriel
2014-11-24 22:52:53 +01:00
< / a >
< / li >
< li >
2015-09-03 19:58:32 +02:00
< a href = "//wxcafe.net/category/vidya-games/" >
< i class = "icon-folder-open icon-large" > < / i > Vidya Games
2014-11-24 22:52:53 +01:00
< / a >
< / li >
< hr >
<!-- Social links -->
< li class = "nav-header" > < h4 > < i class = "icon-exchange" > < / i > social< / h4 > < / li >
< a class = "FlattrButton" style = "display:none;"
title="//wxcafe.net"
style="padding-top: 10px;"
rel="flattr;
url://wxcafe.net;
title://wxcafe.net;
button:compact;
popout:0;
uid:wxcafe;
category:blog;"
href="//wxcafe.net">flattr< / a >
< li > < a href = "https://twitter.com/wxcafe" > < i class = "icon-twitter icon-large" > < / i > Twitter< / a > < / li >
< li > < a href = "https://github.com/wxcafe" > < i class = "icon-github icon-large" > < / i > Github< / a > < / li >
< li > < a href = "mailto://wxcafe@wxcafe.net" > < i class = "icon-envelope icon-large" > < / i > Email< / a > < / li >
2015-09-03 19:58:32 +02:00
< li > < a href = "https://pub.wxcafe.net/wxcafe.asc" > < i class = "icon-key icon-large" > < / i > Gpg< / a > < / li >
< li > < a href = "https://www.openstreetmap.org/relation/105146" > < i class = "icon-map-marker icon-large" > < / i > IRL< / a > < / li >
2014-11-24 22:52:53 +01:00
< hr >
<!-- Links -->
< li class = "nav-header" > < h4 > < i class = "icon-external-link" > < / i > Links< / h4 > < / li >
< li > < a href = "https://github.com/wxcafe/blog-source" > < i class = "icon-code icon-large " > < / i > Source!< / a > < / li >
< li > < a href = "http://git.wxcafe.net" > < i class = "icon-github-sign icon-large " > < / i > Public Git< / a > < / li >
< hr >
<!-- - RSS feed -->
< li class = "nav-header" > < h4 > < i class = "icon-rss" > < / i > feeds< / h4 > < / li >
< li > < a href = "//wxcafe.net/feeds/feed.rss.xml" rel = "alternate" > < i class = "icon-bookmark-empty icon-large" > < / i > RSS< / a > < / li >
< li > < a href = "//wxcafe.net/feeds/feed.atom.xml" rel = "alternate" > < i class = "icon-bookmark-empty icon-large" > < / i > Atom< / a > < / li >
< / ul > < / div > <!-- /.well -->
< / div > <!-- /row -->
< hr >
< footer >
< address id = "about" >
Proudly powered by < a href = "http://pelican.notmyidea.org/" > Pelican< / a > ,
which takes great advantage of < a href = "http://python.org" > Python< / a > .< br / >
Powered by < a href = "https://github.com/getpelican/pelican-themes/tree/master/bootstrap2" > bootstrap2< / a > theme, thanks!
< / address >
< / footer >
< / div > <!-- /.fluid - container -->
< / body >
< / html >