Crear un blog con Django. Parte 4: Diseño
Para esta cuarta parte del tutorial nos vamos a encargar del diseño, para facilitar el proceso usaremos bootstrap ya que en este tutorial queremos hacer incapie en el framework de Django y no en la parte del frontend. Para trabajar con las templates vamos a utilizar el motor de plantillas de Django, si habéis trabajado anteriormente con un motor de plantillas veréis que todos son muy similares, sino más adelante explicaré como funcionan :)
Lo primero que vamos a hacer es añadir la navegación a nuestro blog, nuestra página va a tener una página principal donde se mostrarán todos los posts, una página de detalle por cada post, una de login, otra para el registro y la página de sobre mi. Para poder ver las páginas que vamos a crear necesitamos crearlas y apuntar donde están para que cuando se acceda mediante la url aparezcan, para ello abrimos el archivo simple_blog/urls.py y añadimos el siguiente código:
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path(
route='',
view=TemplateView.as_view(template_name='posts/index.html'),
name='index'
),
path(
route='post/my-post.html',
view=TemplateView.as_view(template_name='posts/detail.html'),
name='detail'
),
path(
route='login',
view=TemplateView.as_view(template_name='users/login.html'),
name='login'
),
path(
route='registro',
view=TemplateView.as_view(template_name='users/register.html'),
name='register'
),
path(
route='sobre-mi',
view=TemplateView.as_view(template_name='about.html'),
name='about'
)
]
Como veis el sistema de enrutamiento es bastante sencillo, se añade una función de tipo path en la que guardamos la ruta que se debe escribir para acceder a nuestra vista, el nombre de la plantilla y un nombre que se utilizará posteriormente cuando tengamos que añadir una url en nuestras plantillas.
Ahora lo que vamos a hacer es descargar bootstrap, para ello lanzamos el siguiente comando:
pip install django-bootstrap4
Y añadimos la app a nuestro archivo simple_blog/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# Rich text editor
'ckeditor',
# Local apps
'posts',
'users',
'categories',
'comments',
'bootstrap4',
]
En el mismo archivo añadiremos también la ruta donde se guardarán los templates, editando la constante TEMPLATES:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
En este mismo archivo añadimos estas líneas para decirle a Django donde guardaremos los archivos estáticos (css, js, imágenes, etc.):
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
Una vez hecho esto en la raiz de nuestro proyecto creamos la carpeta static y dentro de esta la carpeta css que contendrá todas las hojas de estilo que creemos, en esta carpeta creamos el archivo blog-home.css. Debe quedar así:
static/
css/
blog-home.css
Para este proyecto utilizaremos esta template creada por startbootstrap.
En el archivo blog-home.css añadimos el siguiente código:
body {
padding-top: 56px;
}
Después de eso creamos en nuestro directorio raiz la carpeta templates que será la que contendrá todas las plantillas que utilicemos.
Index
Dentro de la carpeta templates crearemos un archivo llamado base.html que será el que contenga la extructura básica de la web, un carpeta llamada posts y dentro de ella un archivo al que llamaremos index.html que será la página principal del blog. La extructura debe quedar así:
templates/
posts/
index.html
base.html
Ahora que tenemos esta estructura creada vamos a ponernos manos a la obra con las plantillas. Abrimos el archivo base.html y añadimos el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}Simple blog{% endblock %}</title>
{% load bootstrap4 %}
{% bootstrap_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/blog-home.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Simple Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Blog
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sobre mi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %}{% endblock %}
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Web Design</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">Tutorials</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Simple Blog {% now "Y" %}</p>
</div>
</footer>
{% bootstrap_javascript jquery='full' %}
</body>
</html>
Ahora que ya tenemos nuestra plantilla base vamos a explicar los elementos de Django template que estamos utilizando:
<title>{% block title %}Simple blog{% endblock %}</title>
Normalmente las diferentes páginas de una web comparten los mismos elementos como cabeceras, pie de página barras de navegación, los elementos definidos como bloques permiten modificar su contenido cuando se hereda de la plantilla base.
{% load bootstrap4 %}
{% bootstrap_css %}
La etiqueta load carga una librería, en este caso la librería de bootstrap4 y bootstrap_css carga los archivos css.
{% load static %}
<link rel="stylesheet" href="{% static 'css/blog-home.css' %}">
En este caso load carga nuestra carpeta de estáticos y en la siguiente línea lo que hacemos es cargar la hoja de estilos que queremos añadir a nuestra página.
{% bootstrap_javascript jquery='full' %}
Esta línea carga las librerías de Jquery que utiliza bootstrap.
Ahora que tenemos nuestro archivo base configurado añadiremos el siguiente código a nuestra plantilla index.html:
{% extends "base.html" %}
{% block content %}
<div class="row">
<div class="col-md-8">
<h1 class="my-4">Simple Blog
{% comment %} <small>Other text</small> {% endcomment %}
</h1>
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
<a href="#">Start Bootstrap</a>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
<a href="#">Start Bootstrap</a>
</div>
</div>
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
{% endblock %}
Aquí lo que hacemos es extender de la plantilla base.html y en el bloque content añadimos el cuerpo de nuestra página.
Ahora que ya tenemos esto si levantamos nuestro proyecto podremos ver que nuestro diseño aparece en la web. Ahora que tenemos esto vamos a crear el detalle de un post, para ello dentro de templates/posts creamos el archivo detail.html y añadimos el siguiente código:
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1 class="mt-4">Post Title</h1>
<p class="lead">
by
<a href="#">Start Bootstrap</a>
</p>
<hr>
<p>Posted on January 1, 2019 at 12:00 PM</p>
<hr>
<img class="img-fluid rounded" src="http://placehold.it/900x300" alt="">
<hr>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>
<hr>
<div class="card my-4">
<h5 class="card-header">Leave a Comment:</h5>
<div class="card-body">
<form>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="media mb-4">
<img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
<div class="media-body">
<h5 class="mt-0">Commenter Name</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
{% endblock %}
Una vez hemos añadido este código vamos a encargarnos de la parte del login. Lo primero que vamos a hacer es en nuestro directorio templates añadir la carpeta users, dentro de esta crearemos tres archivos que se llamarán base.html, login.html y register.html, la estructura de carpetas debe quedar ahora así:
templates/
users/
base.html
login.html
register.html
posts/
index.html
base.html
Añadimos los siguientes códigos en los archivos que acabamos de crear.
base.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}Simple blog - Login{% endblock %}</title>
{% load bootstrap4 %}
{% bootstrap_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/signin.css' %}">
</head>
<body class="text-center">
{% block content %}{% endblock %}
{% bootstrap_javascript jquery='full' %}
</body>
</html>
login.html
{% extends "users/base.html" %}
{% block content %}
<form class="form-signin">
<h1><a href="#" class="title-link">Simple Blog</a></h1>
<h1 class="h3 mb-3 font-weight-normal">Login</h1>
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
<label for="inputPassword" class="sr-only">Contraseña</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Contraseña" required>
<div class="checkbox mb-3"></div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
<p class="mt-5 mb-3 text-muted">© Simple Blog {% now "Y" %}</p>
</form>
{% endblock %}
register.html
{% extends "users/base.html" %}
{% block title %}Simple blog - Registro{% endblock %}
{% block content %}
<form class="form-signin">
<h1><a href="#" class="title-link">Simple Blog</a></h1>
<h1 class="h3 mb-3 font-weight-normal">Registro</h1>
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputUsername" class="sr-only">Nombre de usuario</label>
<input type="text" id="inputUsername" class="form-control" placeholder="Nombre de usuario" required>
<label for="inputPassword" class="sr-only">Contraseña</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Contraseña" required>
<label for="inputPassword" class="sr-only">Repetir contraseña</label>
<input type="password" id="inputPasswordRepeat" class="form-control" placeholder="Repetir contraseña" required>
<div class="checkbox mb-3"></div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Registrarse</button>
<p class="mt-5 mb-3 text-muted">© Simple Blog {% now "Y" %}</p>
</form>
{% endblock %}
Dentro de static/css creamos el archivo signin.css y añadimos el siguiente código:
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="text"] {
border-radius: 0;
}
.form-signin input[type="password"] {
border-radius: 0;
}
#inputPasswordRepeat {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.title-link {
color: #000;
cursor: pointer;
}
.title-link:hover {
color: #000;
text-decoration: none;
}
Por último crearemos la página de sobre mi, para ello dentro de la carpeta templates creamos el archivo about.html y añadimos el siguiente código:
{% extends "base.html" %}
{% block title %}Simple blog - Sobre mi{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1 class="mt-4">Sobre mi</h1>
<hr>
<img class="img-fluid rounded" src="http://placehold.it/150x200" alt="">
<hr>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>
<hr>
</div>
{% endblock %}
Y con esto ya tendríamos toda la parte del diseño de nuestro blog, en el próximo post implementaremos el login para ir dándole funcionalidad al proyecto.
Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.
Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.
Nos leemos 👋.