soy Kseso y esto EsCSS

Blogger extremo: Cómo poner tu blog de Blogspot en mantenimiento 16.4.17

O de cómo hacer de forma fácil y sencilla de revertir para que tu Blogger pase a mantenimiento sin servir nada de sus contenidos ni generar errores de ningún tipo. Incluidos los 404 o el típico de -vaya, eso es un error- inherente a fallos en el code.

Blogger extremo: Cómo poner tu blog de Blogspot en mantenimiento

·Por Kseso ⧉ 16.4.17 ⚑ blogger ✎ 0

Blogger en mantenimiento y código generado

Hoy toca otra de esas extravagancias / ideas locas de lograr en Blogger lo que la plataforma no ofrece y que a priori parece un imposible.

A diferencia de otras personalizaciones como puede ser la página de error 404, el CMS de Blogger no tiene una opción para poner un blog en mantenimiento. Sí puedes pasarlo temporalmente a privado, pero no es lo mismo.

Así que en esta ocasión se trata de poder poner todo un blog de Blogger en mantenimiento de forma sencilla y fácilmente reversible una vez hayamos terminado la tarea que nos obligue a privar a los usuarios de los contenidos.

En este tipo de aviso por mantenimiento normalmente se han de cumplir unos requisitos mínimos:

Que todos los contenidos (artículos, páginas estáticas...) queden inaccesibles.
Que el blog cargue el mismo mensaje de advertencia sea cual sea el contenido pedido (el índex o cualquier post o página).
Que el servido nunca devuelva un mensaje de error 404 o cualquier otro por el estilo, incluido el típico de Vaya, eso es un error. Disculpa las molestias bajo la imagen de la B de blogger rota
Que en el código fuente no haya más código que el necesario e inevitable para mostrar el aviso.

Para lograrlo sólo tenemos que impedir que Blogger sirva contenido y que en su lugar muestre nuestro aviso y sólo el aviso, sin nada más. Y que en el proceso no le rompamos sus esquemas, o su code.

Y para eso, sólo tenemos que hacer uso de algún condicional de forma creativa. Esto es, que Blogger al procesarlo lo de por bueno y válido y no devuelva o genere nada de contenido.

data:blog.isMobileRequest == true & false

Y lo mejor que he encontrando es un viejo conocido: blog.isMobileRequest, que tiene la particularidad que es binario. Admite únicamente dos valores: true o false.

Así que si le decimos a Blogger que sirva el contenido normal del blog sólo cuando ambos se cumplan procesará el código de la plantilla pero el resultado será una bonita página sin contenido. La razón es muy sencilla: le pedimos que el dispositivo que accede al blog se identifique como móvil y no movil a la vez.

Y como Blogger no soporta (de momento) ni dispositivos cuánticos o en versión Gatos de Schrödinger usaremos el siguiente condicional en los lugares adecuados:


<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
</b:if>

Pero como Blogger necesita encontrar alguna que otra cosilla (elementos de obligada presencia) no podemos poner el condicional tras la apertura de <html.../><b:if...> y cerrarlo antes del cierre </b:if></html>

En la imagen precedente puedes ver una captura del código en un tema de los tradicionales de Blogger tras incluirlo. Y a continuación en texto.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html expr:dir='data:blog.languageDirection' lang='ES-ES' xml:lang='ES-ES' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
&lt;style id=&#39;page-skin-1&#39;&gt;/* <b:skin><![CDATA[*/]]></b:skin>
<style>
/*ESTILOS DEL AVISO DE MANTENIMIENTO*/
</style>
<!--TITLE Y OTROS METAS O LINKS QUE QUIERAS QUE SE CARGUEN-->
<!--APERTURA DEL CONDICIONAL-->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
  <!-- TODO LO QUE HAYA EN TU HEAD -->
</b:if><!--CIERRE DEL CONDICIONAL-->
&lt;!--</head>--&gt;&lt;/head&gt;
<body>
AVISO EN MANTENIMIENTO
<!-- APERTURA DEL CONDICIONAL -->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.isMobileRequest == &quot;true&quot;'>

<!--TODO EL CONTENIDO QUE HAYA EN EL BODY DE TU PLANTILLA-->

</b:if> <!-- CIERRE DEL CONDICIONAL -->

&lt;noscript&gt;
   &lt;!--</body>--&gt;
  &lt;/noscript&gt;
&lt;/body&gt;</html>

Unos apuntes breves para quienes lo necesiten respecto al código anterior:

<style id='page-skin-1'>/* <b:skin><![CDATA[*/]]></b:skin>
Es obligado que haya uno y sólo un <b:skin></b:skin> para que no se rompa Blogger. Al escribirlo así lo valida y a la vez no carga un montón de CSS innecesario. En caso de que en tu plantilla lo tengas tal cual lo genera Blogger (sin alterar como es mi caso) no es necesario que lo pongas antes del condicional.
EL cierre del head y todo el final del código partir del <noscript> es por la misma razón. Evitar que Blogger inyecte un montón de código (js especialmente) innecesario, incluido el aviso de cookies
Todo lo que se encuentra en mayúsculas y entre comentarios (de HTML o CSS) son indicaciones o eso, comentarios al código.

Como es lógico, una vez terminados los trabajos que te obligaron a ponerlo en mantenimiento sólo tienes que eliminar lo añadido para el aviso y los dos los condicionales y sus cierres para que vuelvan a servirse los contenidos del blog.

data:view.isPreview

El uso de la doble condición anterior con el data blog.isMobileRequest es totalmente efectivo pero tan radical que cualquier actuación en el código tendremos que hacerla en otro blog (todos tenemos blogs de pruebas para experimentos) ya que siempre y en cualquier circunstancia sólo nos mostrará el aviso de en mantenimiento.

Así que, si por algún motivo tanta radicalidad es demasiada en algún caso, podemos optar por usar algún otro data en su lugar.

Si lo que buscas es poder acceder sólo tú, como administrador o "dueño", a los contenidos del blog o para ver los cambios que vayas haciendo lo puedes lograr a través de las distintas vistas previas. Para ello hay que usar el data que asociado a ellas en lugar del basado en blog.isMobileRequest

Para ello deja todo el contenido de head libre, esto es, sin añadir ningún condicional en él y sustituye el usado en body por el siguiente:

AVISO EN MANTENIMIENTO <b:if cond='data:view.isPreview'>  </b:if>

Si no hay Demo son Dragones

Pues eso, que predicar sin dar trigo... o que para que lo veas funcionando he creado un blog de pruebas. A continuación el enlace a él:

Blogger en mantenimiento eterno

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.