Otra forma de crear páginas estáticas

Blogger es un servicio de blogs, eso no es novedad. Un blog tiene una característica fundamental, las entradas se muestran ordenadas cronológicamente y todas y cada una de ellas aparecerán listadas en un elemento como Archivos. No hay manera de ocultarlas. A diferencia de otros servicios carece de las llamadas páginas estáticas y esta es una de las ventajas de sistemas como WordPress.

Una página estática no es otra cosa que una entrada atemporal, está fuera del orden cronológico y suelen usarse para agregar información adicional; por ejemplo, la página About que tanto vemos, el formulario para contactos, índices diversos o incluso el blogroll.

Es cierto que tenemos fomas de simular ese tipo de página ya sea personalizando ciertos posts de tal manera que no parezcan entradas, creando blogs auxiliares pero, no es lo mismo.

Hace mucho, descargué un ZIP con un demo donde se mostraba una alternativa para crear páginas estáticas en Blogger. Lamentablemente, no encuentro la página original pero, de cualquier manera, el demo incluye la página con las explicaciones. Su autor es Haochi Chen de Googlified y él mismo lo dice: "no es una gran solución pero funciona"

Yo disiento con eso, creo que es una buena idea aunque no es sencilla de aplicar si no se tienen conocimientos elementales de JavaScript pero, de todas formas, es un punto de partida para experimentar.

Para implementarlo, he cambiado algunos detalles de tal manera que podamos emplear la menor cantidad de archivos externos. De todas maneras, ciertas cosas deberán adaptarse a la estructura de cada plantilla así que hay que hacerlo con cuidado.

Veamos. Lo primero que necesitamos es el script cuyo contenido se encuentra en este archivo. Allí, debemos cambiar y verificar algunas cosas así que vamos a la plantilla y lo agregaremos al final, justo antes de </body>. Si tenemos agregados otros scripts al final de la plantilla como Google Analytics o Twitter, convendría que lo pusiéramos antes de estos. No, la explicación no es muy precisa pero diría que lo ideal sería buscar el último </div> de la plantilla y agregarlo justo allí debajo.

Como hay que hacerle alguna modificación para adaptarlo a cada sitio, vamos a ver el código:

<script type='text/javascript'>
//<![CDATA[

// esta función escribe el script que cargará la página estática
  function get(url) {
    var script = document.createElement("script");
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', url);
    document.body.appendChild(script);
  }

// función creada por Dieter Raber de http://dieterraber.net
function readGet() {
    var _GET = new Array();
    var uriStr  = window.location.href.replace(/&amp;/g, '&');
    var paraArr, paraSplit;
    if(uriStr.indexOf('?') > -1){
     var uriArr  = uriStr.split('?');
      var paraStr = uriArr[1];
    } else {
      return _GET;
    }
    if(paraStr.indexOf('&') > -1) {
      paraArr = paraStr.split('&');
    } else {
      paraArr = new Array(paraStr);
    }
    for(var i = 0; i < paraArr.length; i++) {
      paraArr[i] = paraArr[i].indexOf('=') > -1 ? paraArr[i] : paraArr[i] + '=';
      paraSplit  = paraArr[i].split('=');
      _GET[paraSplit[0]] = decodeURI(paraSplit[1].replace(/\+/g, ' '));
    }
    return _GET;
  }

// es la función que "escribe" la página estática y debemos editar
  function page() {
    elHTML = '<div class="post">';
    elHTML += '<h3 class="post-title"><a href="http://miSitio.blogspot.com/?page='; 
    elHTML += tituloPE.toLowerCase();
    elHTML += '">' + tituloPE + '</a></h3>';
    elHTML += '<div class="post-body"><p>' + contenidoPE + '</p>';
    elHTML += '<div style="clear: both;"></div>';
    elHTML += '</div></div>';
    document.getElementById('main').innerHTML = elHTML;
    document.getElementById('main').style.display = 'block';
  }

// las variables 
  var _GET = readGet(); // crea la URL
  var ifPAGE  = false; // TRUE si estamos mirando una página estática
  var tituloPE  = ''; // el título de la página estática
  var contenidoPE = ''; // el contenido de la página estática

// cargamos las diferentes páginas
  switch(_GET['page']) {
    case 'paginaEstatica-1': // ejemplo 1
      get('URL_paginaEstatica1.txt');
      ifPAGE = true;
      break
    case 'paginaEstatica-2': // ejemplo 2
      get('URL_paginaEstatica2.txt');
      ifPAGE = true;
      break
    default:
  }

// ejecutar y mostrar la página
if (ifPAGE == true) {
    window.onload = function(){
      page();
    }
  }

//]]>
</script>

Lo que hará el script es usar el DIV main que es el que por defecto usa Blogger para mostrar los posts y "escribir" su contenido; por eso es importante verificar que los nombres de las clases sean las de nuestra plantilla y ahí es donde debemos tener cuidado si lo que queremos es crear algo que tenga las mismas características que un post. Este es el esquema básico del DIV main:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
<b:includable id='post' var='post'>
  <div class='post uncustomized-post-template'>
    .......
    <h3 class='post-title'> ....... </h3>
    .......
    <div class='post-body'>
    .......
      <div style='clear: both;'/>
    </div>
  </div>
</b:includable>
.......
</b:widget>
</b:section>

Otra cosa que debemos cambiar y adaptar a nuestras necesidades es la configuración de las páginas que vayamos a crear. Eso, en el modelo original es lo que se ve en en el archivo page-config.js pero, me parece mejor colocarlo directamente junto con el otro y ponerlo en la plantilla para así, poder editarlo con facilidad.

El esquema para agregar una página es este:

case 'nombrePaginaEstatica':
  get('URL_paginaEstatica.txt');
  ifPAGE = true;
  break

nombrePaginaEstatica es un nombre que le daremos a la página estática para identificarla
URL_paginaEstatica.txt es la dirección URL del archivo de texto con el contenido de esa página que habremos subido a algún servidor

Cada página que creemos, deberá tener ese esquema y el nombrePaginaEstatica deberá ser único.

Ufff, suena engorroso; ya saben ahora por qué lo tuve tantos meses guardado pero, vale la pena seguir adelante. Paciencia.

Hasta aquí, tenemos el script. Podemos guardar la plantilla y, si no cometimos errores de sintaxis, el blog no sufrirá cambios; nada será distinto de lo que era. Ahora, debemos continuar y lo lógico, sería crear las páginas estáticas.

Esas páginas, originalmente eran archivos JS pero, como es más sencillo alojar archivos TXT, lo mejor es hacerlos así. Tienen sólo dos partes, dos variables, en una va el título que se mostrará y en la otra el contenido que es código HTML.

Cada página deberá tener algo así:

var tituloPE = 'EL TITULO A MOSTRAR';
var contenidoPE = 'EL CONTENIDO A MOSTRAR';

Cada una de ellas las colocaremos entre comillas simples (') y allí estará la única restricción; el contenido puede ser cualquier cosa pero no incluir comillas simples; si las necesitamos, debemos reemplazarlas por su equivalente &#39;

¿Cómo creamos ese contenido? Con cualquier editor, incluyendo el de Blogger. Basta escribir y copiar el código  HTML donde deberemos agregar manualmente los saltos de línea; es decir, si queremos que algo se muestre en una línea distinta, agregamos <br/> y si queremos dejar una línea en blanco, agregamos <br/><br/> o bien podemos colocar los párrafos entre etiquetas <p> y </p>.

¿Funcionará cualquier código? En principio sí pero, habrá que probar. Este es un ejemplo de un archivo TXT

Ahora ya está completo y lo único que falta es colocar el enlace donde nos guste, utilizando esta sintaxis:

<a href="?page=nombrePaginaEstatica">ENLACE</a>

Quiere decir que, para usar el archivo de texto about.txt del ejemplo, podría poner esto en el script:

case 'about':
  get('http://vagabundia.bolsanegra.net/jsBLOG/about.txt');
  ifPAGE = true;
  break

Y usar un enlace así:

<a href="?page=about">CLICK PARA VER</a>

Cada página nueva que creamos, la agregamos al script:

case 'demoPage1':
  get('URL_demoPAGE1.txt');
  ifPAGE = true;
  break
case 'demoPage2':
  get('URL_demoPAGE2.txt');
  ifPAGE = true;
  break

Y los enlaces donde quisiéramos mostrarlos, usando textos o imágenes; como parte de un menú o en la sidebar:

<a href='?page=demoPage1'>DEMO-1</a>
<a href='?page=demoPage2'>DEMO-2</a>

Un último detalle que tiene que ver más con lo estético que con otra cosa, es ver si podemos resolver la forma en que se nos muestra la página estática.

Como lo que hace el script es "re-escribir" la página donde nos encontremos eliminando parte de su contenido y lo reemplaza por el contenido del archivo de texto, la ubicamos al final y la ejecutamos cuando está cargada. Para reemplazar algo, primero debe existir ese "algo".

Esto, produce una situación indeseada, primero se nos mostrará una cosa y luego, cambiará y se nos mostrará otra.

Para disimular ese efecto, agregaremos un pequeño script justo antes de </head>, leeremos la URL de la página que se mostrará y si detectamos que en ella se encuentran los caracteres ?page significa que será una página estática así que, temporalmente, ocultaremos el DIV main y sólo lo mostraremos cuando ya esté terminado el reemplazo:

<script type='text/javascript'>
// <![CDATA[
  var uriStr = window.location.href.replace(/&amp;/g, '&');
  if(uriStr.indexOf('?page') > -1){
    document.write('<style>#main{display:none;}</style>')
  }
// ]]>
</script>

No, no es algo que puede hacerse con un par de clicks pero vale la pena intentarlo. En este blog de pruebas hay un demo online con cuatro páginas estáticas a las que se accede desde un menú y que muestran diferentes altenativas, simples o complejas.

Se crean dinámicamente pero son enlaces normales por lo tanto, también son accesibles desde otra página web así que esas páginas, también podrían ser abiertas desde acá:

Pseudo-About | DEMO-1 | DEMO-2 | Formulario de contacto