Cambios en múltiples páginas
Problema:
Realizar cambios que afecten a un conjunto de páginas sin editarlas todas una por una
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.
Ejemplos de estos elementos comunes:
- Barra de navegación
- Pie de páginas
- Botones sociales
Solución
Crear el elemento compartido con un script y enlazarlo a las páginas como archivo externo.
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.