0

Estoy aprendiendo html, css (Bootstrap) y js. Me gustaria saber como puedo hacer para empaquetar mi NAV asi solo tengo que modificarlo una vez para que sea efectivo en el resto de los .html que tenga. Asi no tengo que ir modificando uno por uno con la probabilidad de equivocarme. No se si tenga algo que ver con react. Estoy aprendiendo, les agradezco toda su programador@s !!

Mi nav que quiero empaquetar:

<nav class="navbar navbar-expand-lg bg-primary p-3 " id="menu">
    <div class="container-fluid ">
        <a class="navbar-brand" href="#">
            <img src="media/logo.png" width="170px" alt="Logo Principal">
            <!--fw-bold para negrita-->
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">Inicio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Noticias</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Tu experiencia</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Otras opciones
                    </a>
                    <ul class="dropdown-menu bg-dark">
                        <li><a class="dropdown-item" href="#">Otras fuentes noticieras</a></li>
                        <li>
                            <hr class="dropdown-divider bg-primary">
                        </li>
                        <li><a class="dropdown-item" href="#">Contactarnos</a></li>
                    </ul>
                </li>
            </ul>
            <div class="d-flex">
                <button type="button" class="btn btn-dark mx-5" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                    <span class="mx-4 p-2" > Iniciar sesion </span>
                </button>
            </div>
        </div>
    </div>
</nav>

2 respuestas 2

0

Armé lo siguiente que quizás te pueda ayudar, quizás no sea la mejor opción, podrías optar por algo como motores de templates como ejs, pug o nunjunks en Node por ejemplo, u otros recursos como React, Angular o Vue.. Pero puede ayudar para resolver el planteo.

Aquí va lo que armé:

Archivo index.html

<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="navbar"></div>

    <hr />

    <section>
      <h2>Contenido</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, blanditiis.
      Ea aliquam voluptatibus eligendi fugit enim consectetur, soluta sed,
      reiciendis voluptas quisquam, cum obcaecati id assumenda? Cum velit rem
      ex?
    </section>

    <hr />

    <div id="footer"></div>

    <script src="importFiles.js"></script>
    <script>
      getComponent("navbar", "navbar.html");
      getComponent("footer", "footer.html");
    </script>
  </body>
</html>

En este archivo hay 3 partes importantes.

La primera son los DIVs con id navbar y footer que es donde se agregará lo correspondiente a cada archivo deseado.

<div id="navbar"></div>

y

<div id="footer"></div>

La segunda es el script src al archivo importFiles que es un script que a continuación detallaré, es la siguiente línea:

<script src="importFiles.js"></script>

La tercera es sencillamente un bloque de script donde se invoca a una función creada que recibirá 2 parámetros, el primero es el id del elemento donde se desea importar el contenido del otro archivo y el segundo es el nombre del archivo a importar, quedando de la siguiente manera:

 getComponent("navbar", "navbar.html");
 getComponent("footer", "footer.html");

Archivo importFiles.js

async function getComponent(container, fileName) {
  const response = await fetch(fileName);
  const fileToImport = await response.text();
  const targetContainer = document.getElementById(container);
  targetContainer.insertAdjacentHTML("beforeend", fileToImport);
}

Finalmente cree 2 archivos solo para prueba un archivo navbar.html con el siguiente contenido:

<div>
  <h1>Prueba Navbar</h1>
</div>

Y un archivo footer.html con el siguiente contenido:

<div>
  <p>Esto sería el footer</p>
</div>

Entre medio de ellos agregué una etiqueta section con un párrafo solo para simular una estructura básica de navbar, contenido y footer.

Todos los antes mencionados archivos están en la misma carpeta para simplificar, si esto cambia se deberán modificar las rutas.

0

En html es difícil y con javascript podrías hacerlo con la etiqueta template aquí unos ejemplos https://www.w3schools.com/tags/tag_template.asp Sin embargo como mencionas arriba te facilitaría mas usar algún framework javascript como React o Vue para usar sus componentes o templates https://reactjs.org/docs/components-and-props.html https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.