Plantillas Tera y Bootstrap para Frontend Web

Clase 18 de 21 • Curso de Backend con Rust: Bases de Datos, Controladores y Templates

Clase anteriorSiguiente clase

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:

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

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

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.