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...
