You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
En faisant ceci, vous n'ajoutez aucun nouveau fichier à votre projet: vous reliez simplement des fichiers hébergés sur Internet à votre projet. Essayez maintenant de rafraichir votre page. Et voilà!
@@ -41,27 +43,33 @@ Comme la CSS est un fichier statique, nous devons tout d'abord configurer les fi
41
43
42
44
Tout d'abord, nous devons créer un dossier pour y ranger nos fichiers statiques. Allez-y: créez un dossier appelé `static` à l'intérieur de votre dossier `djangogirls`.
43
45
44
-
djangogirls
45
-
├─── static
46
-
└─── manage.py
46
+
```
47
+
djangogirls
48
+
├─── static
49
+
└─── manage.py
50
+
```
47
51
48
52
49
53
Ouvrez le fichier `mysite/settings.py` et allez à la fin de celui-ci pour ajouter les lignes suivantes:
50
54
51
-
STATICFILES_DIRS = (
52
-
os.path.join(BASE_DIR, "static"),
53
-
)
55
+
```
56
+
STATICFILES_DIRS = (
57
+
os.path.join(BASE_DIR, "static"),
58
+
)
59
+
```
54
60
55
61
56
62
Maintenant, Django sait où se trouvent vos fichiers statiques.
57
63
58
64
## Votre première CSS!
59
65
60
-
Nous allons créer un fichier CSS afin de personnaliser notre page web. Créez un nouveau dossier appelé `css` à l'intérieur de votre dossier `static`. Ensuite, créez un nouveau fichier appelé `blog.css` à l'intérieur du dossier `css`. Vous êtes prêt·e·s?
66
+
Nous allons créer un fichier CSS afin de personnaliser notre page web. Créez un nouveau dossier appelé `css` à l'intérieur de votre dossier `static`. Ensuite, créez un nouveau fichier appelé `blog.css` à l'intérieur du dossier `css`. Vous êtes prêt·e·s?
61
67
62
-
static
63
-
└─── css
64
-
blog.css
68
+
```
69
+
static
70
+
└─── css
71
+
blog.css
72
+
```
65
73
66
74
67
75
Maintenant, écrivons un peu de CSS: ouvrez le fichier `static/css/blog.css` dans votre éditeur de texte.
@@ -85,8 +93,9 @@ Ajoutez ceci dans votre fichier `static/css/blog.css`:
85
93
86
94
Un fichier CSS permet de déterminer le style des éléments présents dans un fichier HTML. Les différents éléments sont identifiés par leur nom (`a`, `h1`, `body`), l’attribut `class` ou l’attribut `id`. Class et id sont des noms que vous choisissez vous-même. Les classes définissent des groupes d'éléments tandis que les ids désignent des éléments précis. Par exemple, l'élément suivant peut être identifié par CSS à la fois par son nom `a`, sa classe `external_link`, ou son identifiant `link_to_wiki_page`:
Nous vous conseillons d'en apprendre un peu plus sur les sélecteurs CSS sur [w3schools][4].
92
101
@@ -99,7 +108,7 @@ Afin que nos modifications fonctionnent, nous devons aussi signaler à notre tem
99
108
```
100
109
101
110
102
-
Hop, nous chargeons les fichiers statiques:). Pour l'ajout de code suivant, gardez en tête que le navigateur lit vos fichiers dans l'ordre dans lequel ils lui sont donnés: en le plaçant à l'endroit que nous vous indiquons, vous allez pouvoir remplacer du code provenant des fichiers Boostrap par le vôtre. Donc, entre le `<head>` et le `</head>` et après les liens vers les fichiers CSS de Boostrap, ajoutez ceci:
111
+
Hop, nous chargeons les fichiers statiques:). Pour l'ajout de code suivant, gardez en tête que le navigateur lit vos fichiers dans l'ordre dans lequel ils lui sont donnés: en le plaçant à l'endroit que nous vous indiquons, vous allez pouvoir remplacer du code provenant des fichiers Boostrap par le vôtre. Donc, entre le `<head>` et le `</head>` et après les liens vers les fichiers CSS de Boostrap, ajoutez ceci:
@@ -144,9 +153,11 @@ Ok, on sauvegarde et on rafraîchit la page!
144
153
145
154
Bravo! Peut-être que nous pourrions un peu aérer notre page web en augmentant la marge du côté gauche? Essayons pour voir!
146
155
147
-
body {
148
-
padding-left: 15px;
149
-
}
156
+
```
157
+
body {
158
+
padding-left: 15px;
159
+
}
160
+
```
150
161
151
162
152
163
Ajoutez ceci à votre fichier CSS, sauvegardez-le et voyons le résultat!
@@ -157,17 +168,20 @@ Ajoutez ceci à votre fichier CSS, sauvegardez-le et voyons le résultat!
157
168
158
169
Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans la partie `<head>` de votre fichier `blog/templates/blog/post_list.html`:
Cette ligne nous permet d'importer la police de caractères *Lobster* depuis Google Fonts (https://www.google.com/fonts).
164
176
165
177
Maintenant, ajouter la ligne `font-family: 'Lobster';` dans votre fichier CSS `static/css/blog.css`. Attention à bien la placer à l'intérieur du block déclaratif `h1 a` (c'est à dire entre les accolades `{` et `}`). Ensuite, rechargez la page. Votre code doit ressembler à ceci:
166
178
167
-
h1 a {
168
-
color: #FCA205;
169
-
font-family: 'Lobster';
170
-
}
179
+
```
180
+
h1 a {
181
+
color: #FCA205;
182
+
font-family: 'Lobster';
183
+
}
184
+
```
171
185
172
186
173
187
![Figure 14.3][7]
@@ -180,70 +194,75 @@ Comme nous l'avions mentionné précédemment, il existe une notion de classe da
180
194
181
195
Allons donner des noms à certaines parties de notre code html. Ajouter la classe `page-header` à votre `div` qui contient votre entête. Votre fichier doit ressembler maintenant à ceci:
182
196
183
-
<div class="page-header">
184
-
<h1><a href="/">Django Girls Blog</a></h1>
185
-
</div>
197
+
```
198
+
<div class="page-header">
199
+
<h1><a href="/">Django Girls Blog</a></h1>
200
+
</div>
201
+
```
186
202
187
203
188
204
Maintenant, ajouter la classe `post` à votre `div` contenant votre blog post.
189
205
190
-
<div class="post">
191
-
<p>published: {{ post.published_date }}</p>
192
-
<h1><a href="">{{ post.title }}</a></h1>
193
-
<p>{{ post.text|linebreaks }}</p>
194
-
</div>
206
+
```
207
+
<div class="post">
208
+
<p>published: {{ post.published_date }}</p>
209
+
<h1><a href="">{{ post.title }}</a></h1>
210
+
<p>{{ post.text|linebreaks }}</p>
211
+
</div>
212
+
```
195
213
196
214
197
215
Nous allons maintenant ajouter des blocs déclaratifs à différents sélecteurs. Les sélecteurs qui commencent par `.` sont reliés aux classes. Le net regorge de bons tutoriels sur CSS qui vous permettront de comprendre le code que nous allons maintenant rajouter à notre fichier. Comme nous n'avons malheureusement pas le temps d'entrer dans les détails, copiez le code suivant dans votre fichier `mysite/static/css/blog.css`:
Copy file name to clipboardExpand all lines: fr/deploy/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -175,7 +175,7 @@ Enfin, sauvegardons nos changements. Une nouvelle fois, prenez votre console et
175
175
176
176
Nous allons rendre votre blog accessible en ligne à l'adresse `[nom de votre blog].herokuapp.com`. Pour cela, il va être nécessaire de choisir un nom qui n'est pas encore pris. Ce nom n'a pas besoin d'être en lien avec l'application `blog` de Django, `mysite`, où n'importe quoi d'autre que nous avons pu créer jusqu'à présent. Vous pouvez choisir le nom que vous voulez, tant qu'il est conforme aux règles strictes définies par Heroku: pas de majuscules, pas d'accents, pas de nombres ni de tirets (`-`).
177
177
178
-
Si vous ne savez pas quoi prendre, pourquoi ne pas chercher quelque chose en rapport avec votre nom ou votre surnom? Une fois que vous avez choisi, lancez cette commande en remplaçant `djangogirlsblog` par le nom de votre application:
178
+
Si vous ne savez pas quoi prendre, pourquoi ne pas chercher quelque chose en rapport avec votre nom ou votre surnom? Une fois que vous avez choisi, lancez cette commande en remplaçant `djangogirlsblog` par le nom de votre application:
Copy file name to clipboardExpand all lines: fr/django_admin/README.md
+17-14Lines changed: 17 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,18 +4,20 @@ Pour ajouter, éditer et supprimer les posts que nous venons de modéliser, nous
4
4
5
5
Ouvrons le fichier `blog/admin.py` et remplaçons son contenu par ceci:
6
6
7
-
from django.contrib import admin
8
-
from .models import Post
9
-
10
-
admin.site.register(Post)
11
-
7
+
```
8
+
from django.contrib import admin
9
+
from .models import Post
10
+
11
+
admin.site.register(Post)
12
+
```
12
13
13
14
Comme vous pouvez le voir, nous importons le modèle « Post » que nous avons écrit dans le chapitre précédent. Afin que notre modèle soit visible dans l'interface d'administration, nous avons besoin d'enregistrer notre modèle à l'aide de `admin.site.register(Post)`.
14
15
15
16
Ok, allons voir notre modèle « Post ». N'oubliez pas de lancer le server web en tapant `python manage.py runserver` dans la console. À l'aide de votre navigateur, allez à l'adresse suivante:
16
17
17
-
http://127.0.0.1:8000/admin/
18
-
18
+
```
19
+
http://127.0.0.1:8000/admin/
20
+
```
19
21
20
22
Vous verrez une page de login qui ressemble à celle-ci:
21
23
@@ -25,13 +27,14 @@ Vous verrez une page de login qui ressemble à celle-ci:
25
27
26
28
Afin de pouvoir vous connecter, vous avez besoin de créer un *superuser ou superutilisateur*. C'est un utilisateur qui peut contrôler l'intégralité du site. Reprenez votre ligne de commande et taper `python manage.py createsuperuser` et appuyez sur entrée. Tapez votre nom d'utilisateur (en minuscules, sans espace), votre email et votre mot de passe lorsqu'on vous le demande. Ce qui apparaît dans votre console doit ressembler à ceci, au détail près que « username » et « email » doivent être ceux que vous avez entrés:
Retournez dans votre navigateur et connectez-vous en tant que superutilisateur grâce à l'utilisateur que vous venez de créer. Vous devriez accéder à l'interface d'administration de Django.
Copy file name to clipboardExpand all lines: fr/django_forms/README.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,7 @@ Afin de pouvoir créer un nouveau formulaire `Post`, nous avons besoin d'appeler
124
124
Nous avons pour cela besoin de créer un fichier `post_edit.html` dans le dossier `blog/templates/blog`. Afin que notre formulaire fonctionne, nous avons besoin de plusieurs choses:
125
125
126
126
* Nous avons besoin d'afficher le formulaire. Pour cela, nous n'avons qu'à utiliser `{{ form.as_p }}`.
127
-
* La ligne précédente va avoir besoin d'être enveloppée dans des balises HTML: `<form method="POST">...</form>`
127
+
* La ligne précédente va avoir besoin d'être enveloppée dans des balises HTML: `<form method="POST">...</form>`
128
128
* Nous avons besoin d'un bouton `Save (sauvegarder)`. Nous allons le créer à l'aide d'un bouton HTML: `<button type="submit">Save</button>`
129
129
* Enfin, nous avons besoin d'ajouter `{% raw %}{% csrf_token %}{% endraw %}` juste après la balise `<form ...>`. C'est très important: c'est ce qui va permettre de sécuriser votre formulaire! De toute manière, si vous avez oublié ce petit morceau, Django va se plaindre lors de la sauvegarde du formulaire:
130
130
@@ -200,7 +200,7 @@ Enfin, ce serait génial si nous pouvions tout de suite obtenir la page `post_de
200
200
from django.shortcuts import redirect
201
201
202
202
203
-
Ajoutez-le au tout début de votre page. Maintenant, nous allons ajouter la ligne qui signifie: "aller à la page `post_detail` pour le nouveau post qui vient d'être créé".
203
+
Ajoutez-le au tout début de votre page. Maintenant, nous allons ajouter la ligne qui signifie: "aller à la page `post_detail` pour le nouveau post qui vient d'être créé".
0 commit comments