Para los que quieran seguir el princpio DRY (don’t repeat yourself) durante el curso pueden hacer lo siguiente:
.
- Crear un archivo header.html con lo siguiente:
<body>
<div class="header-icons-container">
<div class="icons">
<a href="/"><span class="flaticon-001-facebook"></span></a>
<a href="/"><span class="flaticon-002-twitter"></span></a>
<a href="/"><span class="flaticon-011-instagram"></span></a>
<a href="/"><span class="flaticon-010-linkedin"></span></a>
<a href="/"><span class="flaticon-008-youtube"></span></a>
</div>
</div>
<nav>
<div class="nav-logo-container">
<a href="/"><img src="./assets/img/Logo-negro.png" alt="Logo de mi blog"/></a>
</div>
<div class="profile-link"><a href="./profile.html">Sobre mí</a></div>
</nav>
</body>
- Crear un archivo header.js:
fetch('./header.html')
.then(response => {
return response.text();
})
.then(data => {
document.querySelector('header').innerHTML = data;
});
- Dentro de todos los archivos html que queramos tener ese header, simplemente agregamos las etiquetas header sin contenido, dentro del body y agregamos el script de header.js dentro de la etiqueta head, antes del body:
<head>
<script async src="./assets/js/header.js"></script>
</head>
<body>
<header></header>
</body>
Espero que les sea de ayuda 😃
Curso Práctico de Maquetación en CSS
0 Comentarios
para escribir tu comentario
