1

Quisiera saber si existe algo mejor que usar document.write() para crear una plantilla que se repita en multiples hojas html, o bien no es considerado buena práctica, porque veo que ningun sitio web lo usan, y sin embargo lo veo como la forma mas sencilla de hacer.

O sea, dentro de los parentesis del document.write() escribo la plantilla html, y luego lo meto en un archivo js, el cual sera importado en cada subpágina, luego el contenido unico de cada subpagina se añade con document.getElementById().innerHTML.

En este ejemplo de plantilla, quiero hacer un sitio con un flexbox, dentro del cual esta el aside y un div, y a su vez, el div contiene el main y el footer para ambos estén en columna al lado del aside.

body {
    margin: 0;
    --anchobarra: 300px;
    --margen: 20px;
    position: relative;
}
h1 {margin: 40px; font-size: 23px;}
parts {border: 1px solid rgb(255,255,0); box-sizing: border-box;}
main {font-size: 24px; position: relative;}
.flexconteiner {display: flex; margin: 0 var(--margen) 0 var(--margen)}
.mainfoot { border-right: 1px solid white; width: 100%;}
aside {width: var(--anchobarra); height: 100%; padding: 20px;}
<body>
<header class="parts">
    <h1>titulo del sitio</h1>
</header>
    <div class="flexconteiner">
        <div class="mainfoot">
            <main class="parts">
      contenido variable de la subpagina
      </main>
            <footer class="parts">
                contenido variable de la subpagina
            </footer>
        </div>
        <aside id="aside" class="parts">
    contenido invariable
    </aside>
    </div>
  </body>

4
  • Hola! Bienvenidx a SOes. Las preguntas del tipo "Tengo que hacer esto" sin mostrar el código que has escrito no suelen ser bien recibidas, ya que la respuesta será siempre adivinando y no encaja en el formato del sitio. Recomiendo que hagas el recorrido para entender el sitio y de paso ganar tu primera medalla. También estaría bien que revisaras Cómo preguntar para que recibas respuesta cuanto antes.
    – Alfabravo
    Commented el 19 nov. 2020 a las 15:38
  • La mejor forma para contarnos todo eso que nos intentas explicar, es añadiendo el código relevante a tu pregunta, editándola.
    – Alfabravo
    Commented el 19 nov. 2020 a las 15:38
  • según lo poco que te puedo entender, creo que te serviría aprender algún framework como Angular, React, Vue, hace eso y tienes un código estructurado. Commented el 19 nov. 2020 a las 16:05
  • @Alfabravo ya edite el post para añadir un ejemplo Commented el 19 nov. 2020 a las 17:16

1 respuesta 1

0

Como comentaron mas arriba, practicamente lo que quieres es hacer lo que frameworks o librerias como angular, react o vue ya hacen por ti. Pero si quieres realizar algo mas basico sin tanta dependencia puedes utilizar las Plantillas literales. Esto te permite crear plantillas mas fácilmente e insertarle variables sin concatenar texto y te respeta los saltos de linea. A modo de ejemplo puedes usar una función como témplate

function WelcomeView(username) {
   return `<h1>Welcome ${username}</h1>
           <h2>Have a nice day!!</h2>`;
}

Este es un ejemplo donde puedes llamar la funcion para insertarlo en tu html desde javascript

document.querySelector('header').innerHTML = WelcomeView('El Pepe');

Basicamente esto son los componentes de react, pero esto es mucho mas simplificado.

4
  • Excelente respuesta y bien ejemplificada, una lástima quitarle seriedad con tan pésima elección de string en la llamada a la función...
    – Benito-B
    Commented el 20 nov. 2020 a las 15:18
  • @Benito-B no son una buena opción ? quizás nadie las usa y yo las e estado usando todo este tiempo :c Commented el 20 nov. 2020 a las 15:54
  • Me refiero al string "El Pepe". Los memes no añaden nada a la explicación
    – Benito-B
    Commented el 20 nov. 2020 a las 17:11
  • Aaa ahora entiendo y tienes toda la razón, lo tendré en cuenta de ahora en adelante gracias Commented el 20 nov. 2020 a las 17:13

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.