Bienvenue sur IndexError.

Ici vous pouvez poser des questions sur Python et le Framework Django.

Mais aussi sur les technos front comme React, Angular, Typescript et Javascript en général.

Consultez la FAQ pour améliorer vos chances d'avoir des réponses à vos questions.

Un template de base pour les APP

+2 votes

Sous Django je souhaiterai mettre un template de base (menu de navigation, footer ...) à la racine du projet pour pouvoir récupérer le template dans toutes les apps (pour éviter de créer plusieurs fois le meme fichier).

demandé 26-Fev-2016 par anonyme
edité 26-Fev-2016 par max

On parle de quoi ? Un framework web en particulier ?

2 Réponses

+5 votes

le mieux c'est encore la doc et en particulier la balise {% extends 'base.html' %} qui permet d'heriter d'un autre template qui sera la colonee vertebrale de tout son site.

répondu 26-Fev-2016 par foxmask (2,888 points)

oui j'avais vu qu'on pouvais utiliser la balise extends. Le problème est que pour chacune de les Apps j'ai un répertoire "static" -> "css" -> feuilles de style.
Lorsque je met une fichier base.html pour toutes mes app. je n'arrive pas à l'appliquer.Je me trompe surement au niveau du chemin d'acces ..

Tu peux ouvrir une autre question pour les fichiers statiques et on t'aidera pour ça aussi.

+1 vote

Je vais te montrer comment j'organise mes templates, peut-être que cela pourra t'aider.

Et si les autres ont des critiques argumentées, je suis preneur.

Le template de base pour toutes les pages du site projet/template/base.html

<!-- Template de base pour tout le projet -->
{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    {% block css %}
    <!-- Le fichier css global du projet -->
    <link rel="stylesheet" href="{% static 'global_style.css' %}" type="text/css" />
    {% endblock %}
</head>

<body>
    <nav id="menu">
        {% block menu %}
        <!-- Contenu du menu (en le mettant dans un bloc il y a toujours moyen de le modifier dans les apps) -->
        <a href="/">Maison</a>
        {% endblock %}
    </nav>

    <div id="content">
    {% block content %}
    <!-- On mettra le contenu ici dans les app -->
    {% endblock %}
    </div>
</body>
</html>

Le fichier pour le style global du site projet projet/static/global_style.css

#menu {
    border-bottom: 1px black;
}

Attention que pour que les fichiers base.html et global_style.css soient trouvables, il faut renseigner leur emplacement dans le fichier projet/settings.py

PROJECT_DIR = os.path.abspath(os.path.dirname(__file__))

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(PROJECT_DIR, 'templates').replace('\\','/'), # Add common template directory
        ],
        # Le reste comme par défaut dans le fichier settings
    }
]

STATICFILES_DIRS = [
    os.path.join(PROJECT_DIR, 'static').replace('\\','/'), # Add common static directory
]

Ensuite tu peux définir tes templates dans ton app.

Example 1, on garde le style global pour le template de l'app
app/template/app/template1.html

{% extends "base.html" %}
{% block content %}
<div>Bonjour le monde!</div>    
{% endblock %}

Le menu aura un bord inférieur noir

Example 2, on remplace completement le style global par un style local à l'app
app/template/app/template2.html

{% load staticfiles %}
{% extends "base.html" %}
{% block css %}
<!-- Le fichier css de l'app -->
<link rel="stylesheet" href="{% static 'app/local_style.css' %}" type="text/css" />
{% endblock %}
{% block content %}
<div>Bonjour le monde!</div>    
{% endblock %}

app/static/app/local_style.css

#content {
    border: 1px red;
}

Le menu n'aura plus de bord inférieur noir, mais le div content aura un bord rouge.

Example 3, on garde le style global du projet et on ajoute un style local pour l'app
app/template/app/template3.html

{% load staticfiles %}
{% extends "base.html" %}
{% block css %}
<!-- Inherite le fichier de style global du projet  -->
{{ block.super }}
<!-- Le fichier css de l'app -->
<link rel="stylesheet" href="{% static 'app/local_style.css' %}" type="text/css" />
{% endblock %}
{% block content %}
<div>Bonjour le monde!</div>    
{% endblock %}

Le menu aura toujours son bord inférieur noir et le div content aura un bord rouge.

Tu peux utiliser la même idée pour le contenu du menu, ou faire un block javascript, etc...

répondu 2-Mar-2016 par benjamin (394 points)
...