3

DRY (don't repeat yourself)

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><divclass="header-icons-container"><divclass="icons"><ahref="/"><spanclass="flaticon-001-facebook"></span></a><ahref="/"><spanclass="flaticon-002-twitter"></span></a><ahref="/"><spanclass="flaticon-011-instagram"></span></a><ahref="/"><spanclass="flaticon-010-linkedin"></span></a><ahref="/"><spanclass="flaticon-008-youtube"></span></a></div></div><nav><divclass="nav-logo-container"><ahref="/"><imgsrc="./assets/img/Logo-negro.png"alt="Logo de mi blog"/></a></div><divclass="profile-link"><ahref="./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><scriptasyncsrc="./assets/js/header.js"></script></head><body><header></header></body>

Espero que les sea de ayuda 😃

Escribe tu comentario
+ 2