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
Esa línea no incluye ningún fichero a tu proyecto, simplemente utiliza uno existente en internet. Adelante, abre tu página web y actualízala. ¡Ahí lo tienes!
27
27
@@ -44,14 +44,14 @@ En primer lugar, necesitamos crear un directorio para almacenar nuestros archivo
44
44
djangogirls
45
45
├─── static
46
46
└─── manage.py
47
-
47
+
48
48
49
49
Abre el fichero `mysite/settings.py`, desplázate hasta el fondo del fichero y agregue las siguientes líneas:
50
50
51
51
STATICFILES_DIRS = (
52
52
os.path.join(BASE_DIR, "static"),
53
53
)
54
-
54
+
55
55
56
56
De esta manera Django sabrá dónde encontrar los archivos estáticos.
57
57
@@ -62,7 +62,7 @@ Vamos ahora a crear un fichero CSS para añadir tu propio estilo a tu página we
62
62
static
63
63
└─── css
64
64
blog.css
65
-
65
+
66
66
67
67
Hora de escribir CSS! Abra el archivo `static/css/blog.css` en el editor de código.
68
68
@@ -79,14 +79,14 @@ En el fichero `static/css/blog.css` debes añadir el siguiente código:
79
79
h1 a {
80
80
color: #FCA205;
81
81
}
82
-
83
82
84
-
`h1 un` es un Selector de CSS. Esto significa que estamos aplicando nuestros estilos a `cualquier elemento dentro de un elemento <code>h1`</code> (por ejemplo cuando tenemos en código algo como: `< h1 >< a href = "" > enlace < /a >< / h1 >`). En este caso, estamos diciendo que cambie su color a `#FCA205`, que es de color naranja. Por supuesto, puedes poner tu propio color aquí!
83
+
84
+
`h1 un` es un Selector de CSS. Esto significa que estamos aplicando nuestros estilos a `cualquier elemento dentro de un elemento <code>h1`</code> (por ejemplo cuando tenemos en código algo como: `<h1><a href = ""> enlace </a></h1>`). En este caso, estamos diciendo que cambie su color a `#FCA205`, que es de color naranja. Por supuesto, puedes poner tu propio color aquí!
85
85
86
86
En el fichero CSS se definen los estilos de los elementos que se encuentran en el fichero HTML. Los elementos se identifican por el nombre del elemento (es decir, `a``h1`, `body`), el atributo `class` o el atributo `id`. Class y id son nombres que le das al elemento tu mismo. Classes definen grupos de elementos y ids apuntan a elementos específicos. Por ejemplo, la siguiente etiqueta puede identificarse mediante CSS usando el nombre `a`, la clase `external_link` o el id `link_to_wiki_page`:
@@ -98,7 +98,7 @@ Entonces, necesitamos decirle a nuestra plantilla HTML que hemos añadido CSS. A
98
98
{% load staticfiles %}
99
99
```
100
100
101
-
Estamos cargando archivos estáticos aquí:). Luego, entre el `<head>``y/< / head>`, después de los enlaces a los archivos CSS Bootstrap (el navegador lee los archivos en el orden que los das, así que nuestro archivo de código puede sobreescribir partes del código en de Bootstrap), añade la siguiente línea:
101
+
Estamos cargando archivos estáticos aquí:). Luego, entre el `<head>`y `</head>`, después de los enlaces a los archivos CSS Bootstrap (el navegador lee los archivos en el orden que los das, así que nuestro archivo de código puede sobreescribir partes del código en de Bootstrap), añade la siguiente línea:
@@ -189,7 +189,7 @@ Adelante! Nombra algunas partes del código HTML. Añade una clase llamada `page
189
189
<h1><ahref="/">Django Girls Blog</a></h1>
190
190
</div>
191
191
```
192
-
192
+
193
193
194
194
Y ahora añade la clase `post` a tu `div` que contiene una entrada del blog.
195
195
@@ -200,7 +200,7 @@ Y ahora añade la clase `post` a tu `div` que contiene una entrada del blog.
200
200
<p>{{ post.text|linebreaks }}</p>
201
201
</div>
202
202
```
203
-
203
+
204
204
205
205
Ahora añadiremos bloques de declaración a diferentes selectores. Selectores a partir de `.` se refieren a las clases. Hay muchos tutoriales y explicaciones sobre CSS en la web para ayudarte entender el siguiente codigo. Por ahora, sólo copia y pega en tu archivo `mysite/static/css/blog.css`:
206
206
@@ -253,7 +253,7 @@ h1, h2, h3, h4 {
253
253
color: #000000;
254
254
}
255
255
```
256
-
256
+
257
257
258
258
Luego envuelve el código HTML que muestra los mensajes con las declaraciones de clases. Cambia esto:
259
259
@@ -266,7 +266,7 @@ Luego envuelve el código HTML que muestra los mensajes con las declaraciones de
266
266
</div>
267
267
{% endfor %}
268
268
```
269
-
269
+
270
270
271
271
En `blog/templates/blog/post_list.html` con esto:
272
272
@@ -287,7 +287,7 @@ En `blog/templates/blog/post_list.html` con esto:
Cuando enviamos el formulario, estamos en la misma vista, pero esta vez tenemos algunos datos más en la `request`, concretamente en `request.POST`. ¿Recuerdas que en el archivo HTML la definición de `<form>` tenía la variable `method = "POST"`? Todos los campos del formulario estan ahora en `request.POST`. No deberías renombrar la variable `POST` (el único nombre que también es válido para la variable `method` es `GET`, pero no tenemos tiempo para explicar cuál es la diferencia).
179
+
Cuando enviamos el formulario, estamos en la misma vista, pero esta vez tenemos algunos datos más en la `request`, concretamente en `request.POST`. ¿Recuerdas que en el archivo HTML la definición de `<form>` tenía la variable `method = "POST"`? Todos los campos del formulario estan ahora en `request.POST`. No deberías renombrar la variable `POST` (el único nombre que también es válido para la variable `method` es `GET`, pero no tenemos tiempo para explicar cuál es la diferencia).
180
180
181
181
En nuestra *vista* tenemos dos posibles situaciones a contemplar. Primera: cuando accedemos a la página por primera vez y queremos un formulario en blanco. Segundo: cuando volvemos a la *vista* con los datos del formulario que acabamos de escribir. Así que tenemos que añadir una condición (utilizaremos `if` para eso).
182
182
@@ -186,13 +186,13 @@ if request.method == "POST":
186
186
else:
187
187
form = PostForm()
188
188
```
189
-
189
+
190
190
191
191
Es hora de llenar los puntos `[...]`. Si el `method` es `POST` queremos construir el `PostForm` con los datos del formulario, ¿no? Lo haremos con:
192
192
193
193
```python
194
194
form = PostForm(request.POST)
195
-
```
195
+
```
196
196
197
197
Fácil! Lo siguiente es verificar si el formulario es correcto (todos los campos necesarios están definidos y no hay valores incorrectos). Lo hacemos con `form.is_valid()`.
198
198
@@ -204,21 +204,21 @@ if form.is_valid():
204
204
post.author = request.user
205
205
post.save()
206
206
```
207
-
207
+
208
208
209
209
Básicamente, tenemos que hacer dos cosas aquí: salvar el formulario con `form.save` y añadirle un autor (ya que no había ningún campo de `autor` en el `PostForm` y este campo es obligatorio). `cometer = False` significa que no queremos guardar el modelo `Post` todavía - queremos añadir el autor primero. La mayoría de las veces utilizarás `form.save()`, sin `commit = False`, pero en este caso, tenemos que hacerlo. `post.Save()` conservará los cambios (añadiendo a autor) y se creará una nueva entrada en el blog!
210
210
211
211
Por último, sería genial si podemos inmediatamente ir a la página `post_detail` de la entrada de blog que se acaba de crear, ¿no? Para hacerlo necesitamos una importación más:
212
212
213
213
```python
214
214
from django.shortcuts import redirect
215
-
```
215
+
```
216
216
217
217
Añádelo al principio del archivo. Y ahora podemos decir: ves a la página `post_detail` de la entrada recién creada.
`blog.views.post_detail` es el nombre de la vista a la que queremos ir. ¿Recuerdas que esta *vista* requiere una variable `pk`? Para pasarlo a las vistas utilizamos `pk=post.pk`, donde `post` es la entrada recién creada!
Vamos a ver si funciona. Ves a la página `http://127.0.0.1:8000/post/new/`, añadir un `título` y un `texto`, guárdalo... ¡y voilá! Se añade la nueva entrada al blog y se nos redirige a la página de `post_detail`!
241
+
Vamos a ver si funciona. Ves a la página `http://127.0.0.1:8000/post/new/`, añadir un `título` y un `texto`, guárdalo... ¡y voilá! Se añade la nueva entrada al blog y se nos redirige a la página de `post_detail`!
242
242
243
243
Probablemente has visto que no hemos definido la fecha de publicación. Vamos a introducir un *botón publicar* en **Django girls Tutorial: extensiones**.
244
244
@@ -271,7 +271,7 @@ Abre el archivo `blog/templates/blog/post_detail.html` y añade esta línea:
Esto se ve casi exactamente igual a nuestra view `post_new`, ¿no? Pero no del todo. Primero: pasamos un parámetro extra `pk` de los urls. Luego: obtenemos el modelo `Post` que queremos editar con `get_object_or_404(Post, pk=pk)` y después, al crear el formulario pasamos este post como una `instancia` tanto al guardar el formulario:
320
320
321
321
```python
322
322
form = PostForm(request.POST, instance=post)
323
323
```
324
-
324
+
325
325
326
326
como al abrir un formulario con este post para editarlo:
327
327
328
328
```python
329
329
form = PostForm(instance=post)
330
330
```
331
-
331
+
332
332
333
333
Ok, ¡vamos a probar si funciona! Dirígete a la página `post_detail`. Debe haber ahí un botón para editar en la esquina superior derecha:
334
334
@@ -362,6 +362,6 @@ $ git commit -m "Added views to create/edit blog post inside the site."
0 commit comments