Cambios en múltiples páginas

Problema

En muchas ocasiones queremos realizar un determinado cambio en nuestra web que afecta a un gran número de páginas, una tarea que puede resultar bastante ardua si no contamos con herramientas adecuadas.

Y aún contando con estas herramientas tras hacer los cambios debemos volcar todas las páginas modificadas a nuestro servidor.

Un ejemplo típico se produce cuando queremos modificar una barra de navegación, barra que se muestra en todas las páginas de nuestra web: cuando queremos agregar una nueva opción nos encontramos con la necesidad de modificar un gran número de páginas

Solución

Podemos ahorrarnos trabajo de una forma muy simple: utilizar un archivo javascript enlazado en todas las páginas, este archivo contendrá el código para generar esa parte de nuestra página que podemos necesitar modificar en alguna ocasión.

De esta forma para realizar un cambio en nuestras páginas bastará modificar el archivo javascript y sólo será necesario volcar este archivo modificado al servidor.

En el ejemplo citado arriba el archivo enlazado contendría una función que generase la barra de navegación.

Ejemplo

Como aplicación práctica seguimos con el ejemplo de la barra de navegación. En nuestro archivo js, al que llamaremos barranavegacion.js, colocamos un código que genere la barra de navegación, construida mediante elementos DOM creados en linea.

function ponBarra(nav) {

   var blq = document.createElement("div");

   var ul, item, lnk, anc, barra;

   var items=[{url:"link1.htm", txt:"Enlace 1"},

      {url:"link2.htm", txt:"Enlace 2"},

      {url:"link3.htm", txt:"Enlace 3"},

      {url:"link4.htm", txt:"Enlace 4"}];

   ul = document.createElement("ul");

   for (let i=0; i<items.length; i++) {

      item = document.createElement("li");

      item.style.display ="inline-block";

      item.style.padding ="0 8px";

      lnk= document.createElement('a');

      lnk.setAttribute('href',items[i].url);

      anc = document.createTextNode(items[i].txt);

      lnk.appendChild(anc);

      item.appendChild(lnk);

      ul.appendChild(item)

      }

   barra = document.getElementById(nav)

   barra.appendChild(ul)

}

Dentro de nuestras páginas colocamos un elemento <div> vacío pero con un argumento id, el identificador de donde ha de colocarse la barra de navegación Y luego asignarla al evento load de la página:

<body onload=ponBarra('navbar') >

<div id="navbar">

</div>

</body>

Por supuesto en la sección head de la página habremos colocado el script enlazado a nuestro archivo conteniendo la función dibujaBarra()

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

Es conveniente que para el argumento src utilices una dirección absoluta, para que sea accesible desde todas las páginas. En este ejemplo la barra invertida indica el directorio raiz del sitio web.