diff --git a/source/mvc/layout.rst b/source/mvc/layout.rst index 91a6522..0f955a6 100644 --- a/source/mvc/layout.rst +++ b/source/mvc/layout.rst @@ -7,25 +7,139 @@ Pour que nos pages soient un peu plus *eye-candy* que ce qu'on a présenté ci-d .. code-block:: html - Blah + {% load staticfiles %} + + + + + + + + + + + + + + Gwift + + + + + +
+ +
+ + + +
+
+
+ {% block content %}{% endblock %} +
+
+
+ + + + + + + + +Quelques remarques: + + * La première ligne du fichier inclut le *tag* ``{% load staticfiles %}``. On y reviendra par la suite, mais en gros, cela permet de faciliter la gestion des fichiers statiques, notamment en les appelent grâce à la commande ``{% static 'img/header.png' %}`` ou ``{% static 'css/app_style.css' %}``. + * La balise ```` est bourée d'appel vers des ressources stockées sur des :abbr:`CDN (Content Delivery Networks)`. + * Les balises ``{% block content %} {% endblock %}`` permettent de faire hériter du contenu depuis une autre page. + * Pour l'entête et le bas de page, on fait appel aux balises ``{% include 'nom_du_fichier.html' %}``: ces fichiers sont des fichiers physiques, placés sur le filesystem, juste à côté du fichier ``base.html``. De façon bête et méchante, cela inclut juste du contenu HTML. Le contenu des fichiers ``_menu_items.html`` et ``_footer.html`` est copié ci-dessous. + +.. code-block:: html + + + + + +.. code-block:: html + + +
+ Copylefted '16 +
En fonction de vos affinités, vous pourriez également passer par `PluCSS `_, `Pure `_, `Knacss `_, `Cascade `_, `Semantic `_ ou `Skeleton `_. Pour notre plus grand bonheur, les frameworks de ce type pullulent. Reste à choisir le bon. -*A priori*, si vous relancez le serveur de développement maintenant, vous devriez déjà voir les modifications... Mais pas les images, ni fichiers statiques. +*A priori*, si vous relancez le serveur de développement maintenant, vous devriez déjà voir les modifications... Mais pas les images, ni tout autre fichier statique. Fichiers statiques ================== -Si vous vous rendez sur la page ``localhost:8000/static/img/favicon.ico``, vous ne verrez rien qu'une page d'erreur. En fait, par défaut, les fichiers statiques sont récupérés grâce à deux handlers: ``django.contrib.staticfiles.finders.FileSystemFinder`` et ``django.contrib.staticfiles.finders.AppDirectoriesFinder``. En fait, Django va considérer un répertoire ``static`` à l'intérieur de chaque application. Si deux fichiers portent le même nom, le premier trouvé sera pris. Pour plus de facilité, il est possible de définir des valeurs supplémentaires dans votre fichier de configuration, en ajoutant `des valeurs à la variable `_ ``STATICFILES_DIR``: +Si vous ouvrez la page et que vous lancez la console de développement (F12, sur la majorité des navigateurs), vous vous rendrez compte que certains fichiers ne sont pas disponibles. Il s'agit des fichiers suivants: + + * ``/static/css/style.css`` + * ``/static/img/favicon.ico`` + * ``/static/img/gwift-20x20.png``. + +En fait, par défaut, les fichiers statiques sont récupérés grâce à deux handlers: ``django.contrib.staticfiles.finders.FileSystemFinder`` et ``django.contrib.staticfiles.finders.AppDirectoriesFinder``. En fait, Django va considérer un répertoire ``static`` à l'intérieur de chaque application. Si deux fichiers portent le même nom, le premier trouvé sera pris. Par facilité, et pour notre développement, nous placerons les fichiers statiques dans le répertoire ``gwift/static``. On y trouve donc: + +.. code-block:: shell + + [inclure un tree du répertoire gwift/static] + +Pour indiquer à Django que vous souhaitez aller y chercher vos fichiers, il faut initialiser la `variable `_ ``STATICFILES_DIRS`` dans le fichier ``settings/base.py``. Vérifiez également que la variable ``STATIC_URL`` est correctement définie. .. code-block:: python - # gwift/settings.py + # gwift/settings/base.py + + STATIC_URL = '/static/' + +.. code-block:: python + + # gwift/settings/dev.py STATICFILES_DIRS = [ - "/home/special.polls.com/polls/static", + os.path.join(BASE_DIR, "static"), ] -Vérifiez également que la variable ``STATIC_URL`` est correctement définie. Vous pourrez maintenant accéder aux fichiers statiques en chargeant le templatetags *built-in* dans votre squelette, via la commande ``{% load staticfiles %}``. Cette étape à un intérêt énorme lorsque vous passerez votre application en production: ici, nous parlons d'un serveur de développement. Il suffit que vos fichiers soient servis par Nginx, que l'URL change, et vous serez bon pour modifier toutes vos pages, ce qui est impensable. \ No newline at end of file +En production par contre, nous ferons en sorte que le contenu statique soit pris en charge par le front-end Web (Nginx), raison pour laquelle cette variable n'est initialisée que dans le fichier des paramètres liés au développement. + +Au final, cela ressemble à ceci: + +.. image:: mvc/my-first-wishlists.png + :align: center \ No newline at end of file