Bienvenida al curso
Introducción a Rust para backend
Gestión de modelos en el backend con el ORM Diesel
¿Qué es un ORM?
Conexión con la base de datos
Instalación de Diesel y errores frecuentes
Creación de modelos (tablas)
Creando los registros
Leyendo los registros
Editando los registros
Eliminando los registros
Actix web framework (controlador)
Actix web framework
¡Hola mundo, Actix!
Match case
Endpoint Get para ver todos los BlogPosts
Endpoint Post para agregar nuevos Posts
Tera templates (vistas)
¿Qué es Tera?
Primer template para Post
Template para el index y los post
Añadiendo diseño al blog
Despliegue del proyecto
Heroku para el despliegue del proyecto
Release
Continúa tu aprendizaje
Siguientes pasos, Rustacean
Añadiendo diseño al blog
18/21Lectura
En esta clase revisaremos los templates de frontend de Tera, de esta manera nos familiarizaremos de manera más rápida con el frontend de este tipo de proyectos.
Para esta clase estaremos usando Bootstrap, que permite de una manera muy rápida y efectiva crear nuestro frontend, empezaremos con nuestro index.html, esta es la versión básica que hemos tenido hasta ahora:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% for post in posts %}
<div>
<h1>
<a href="/blog/{{post.slug}}">{{ post.title }} </a>
</h1>
<p>{{post.body | truncate(lenght=15)}}</p>
</div>
{% endfor %}
</body>
Primero vamos a importar los elementos de Bootstrap:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi blog</title>
<!-- Bootstrap -->
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
....
<!-- Mas Bootstrap -->
<script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>
Organizaremos la forma en la que se muestran los posts (y empezaremos a usar algo de html semántico):
...
<main class="container">
{% for post in posts %}
<div class="bg-light p-5 rounded">
<a class="h1" href="/blog/{{ post.slug }}">{{ post.title }}</a>
<p class="lead">{{ post.body | truncate(length=150) }}</p>
</div>
{% endfor %}
</main>
...
Añadiremos una navbar que nos ayudará a volver al index desde cualquier punto de la web:
...
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
</div>
</nav>
...
Hasta ahora únicamente hemos organizado nuestro código y hemos usado clases de Bootstrap, añadamos algunos estilos propios y nuevos:
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
body {
min-height: 75rem;
padding-top: 4.5rem;
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
main > .container {
padding: 60px 15px 0;
}
html,
body {
height: 100%;
}
</style>
Con estos pequeños cambios nuestra web ha cambiado totalmente, si quieres seguir profundizando en temas de frontend, html, css y javascript, ¡Tenemos cursos relacionados que te pueden servir mucho!
Ahora continuaremos con la visualización de nuestro post:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi hermoso blog</title>
</head>
<body>
<main>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
<a href="/">Volver</a>
</div>
</main>
</body>
</html>
Vamos a cambiarlo ligeramente, de nuevo lo primero es añadir Bootstrap:
...
<!-- Custom styles for this template -->
<link href="/static/css/navbar-top-fixed.css" rel="stylesheet">
</head>
...
<script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
...
Agregaremos, de nuevo, nuestro navbar y nuestro contenido, organizado, quedaría de esta manera:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
</div>
</nav>
<main class="container">
<div class="bg-light p-5 rounded">
<h1>{{ post.title }}</h1>
<p class="lead">{{ post.body }}</p>
</div>
</main>
En este caso el CSS es exactamente el mismo:
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
body {
min-height: 75rem;
padding-top: 4.5rem;
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
main > .container {
padding: 60px 15px 0;
}
html,
body {
height: 100%;
}
</style>
Con estos ligeros cambios nuestra web ahora se ve totalmente diferente, acompáñame a la siguiente clase para desplegar nuestra web en Heroku.
Aportes 0
Preguntas 0
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.