Vitrina de códigos en Blogger
Sé que en la red hay un sinnúmero de servicios que nos permiten dar vida a trozos de código para cuestiones pedagógicas, pero quise averiguar si era posible tener un lienzo en Blogger en donde pudiera plasmar mis ideas con HTML, CSS y JavaScript.
El resultado de lo anterior fue la plantilla (en acción aquí) que comparto en esta publicación, en donde el contenido de las entradas quedará al descubierto (despojado de envoltorios) en el cuerpo del documento (body), el cual estará privado de los estilos y scripts generados por Blogger.
También brindé la posibilidad de mostrar su código fuente (sin resaltar su sintaxis) con solo añadir la etiqueta «snippet». Por otro lado, en la página principal se presentará una simple lista con las entradas publicadas, a excepción de aquellas que estén etiquetadas como «hidden».
La plantilla está dividida en tres secciones: una cabecera, un cuerpo (no editable) y un pie de página. Tanto la cabecera como el pie de página no son necesarios y no aparecerán, por supuesto, en las entradas. Por defecto, la sección del pie de página (footer) está vacía, mientras que en la cabecera (header) dejé el elemento correspondiente (cabecera del blog).
Soy consciente de que es posible ir aún más allá, como comentar las etiquetas head y body para tener más control desde nuestro editor, pero para lo que buscaba era más que suficiente. A continuación, les comparto el código por si desean jugar con él.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:skin id="index">
<![CDATA[
/* Estilos de la página principal */
body.index {
font-size: 1.1em;
color: #444;
}
body.index a {
color: #3498DB;
text-decoration: none;
}
body.index a:hover {
color: #A0CB52;
}
body.index .section {
margin: 1em 0;
}
body.index .widget.Header h1, body.index .widget.Header p {
margin: 0;
}
body.index #blog-pager a {
display: inline-block;
margin-right: 1em;
}
body.index #blog-pager a.blog-pager-newer-link:before {
content: "\0276E ";
}
body.index #blog-pager a.blog-pager-older-link:after {
content: " \0276F";
}
/* Estilos de las entradas */
body.snippet {
margin: 0;
overflow-y: hidden;
}
body.snippet * {
box-sizing: border-box;
}
body.snippet > #showcase {
display: grid;
grid-template-columns: 50% 50%;
}
body.snippet > #showcase > div {
height: 100vh;
}
body.snippet > #showcase > div:first-child {
overflow: auto;
}
body.snippet > #showcase > div:last-child textarea {
padding: 0.5em;
width: 100%;
height: 100%;
border: 0;
border-left: 1px solid #EEE;
outline: none;
}
@media only screen and (max-width: 800px) {
body.snippet #showcase {
grid-template-columns: 100% 100%;
}
}
]]>
</b:skin>
<b:if cond='data:blog.view == "snippet" and data:view.isSingleItem'>
<b:comment>El siguiente "script" tendrá como trabajo mostrar el código fuente de la entrada.</b:comment>
<script>
//<![CDATA[
window.onload = function() {
let showcase = document.getElementById("showcase");
if (showcase) {
if (!document.body.classList.contains("snippet")) {
document.body.classList.add("snippet");
}
let preview = document.getElementById("snippet") || showcase.firstElementChild;
let source_view = showcase.lastElementChild;
let textarea = source_view.querySelector("textarea");
textarea.value = preview.innerHTML;
let timeout = null;
textarea.onkeyup = function (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
preview.innerHTML = textarea.value;
}, 500);
};
}
};
//]]>
</script>
</b:if>
<b:comment>Editamos algunos elementos de Blogger para nuestro propósito.</b:comment>
<b:defaultmarkups>
<b:comment>Mensaje que se muestra cuando no se tiene ninguna entrada.</b:comment>
<b:defaultmarkup type='Common'>
<b:includable id='noContentPlaceholder'>
<b:if cond='data:view.isError'>
<div class='status-msg-body'><data:navMessage/></div>
<b:else/>
<div class='no-posts-message'><b:eval expr='data:view.isSearch ? data:messages.noResultsFound : data:messages.theresNothingHere'/></div>
</b:if>
</b:includable>
</b:defaultmarkup>
<b:comment>Elemento de tipo "Blog", es el encargado de mostrar las entradas.</b:comment>
<b:defaultmarkup type='Blog'>
<b:includable id='main'>
<b:comment>Líneas como la siguiente "comentan" códigos innecesarios generados por Blogger.</b:comment>
<b:eval expr='data:view.isSingleItem ? "-->" : ""'/>
<b:if cond='data:posts.any'>
<b:comment>Mostramos el contenido de la entrada.</b:comment>
<b:if cond='data:view.isSingleItem'>
<b:comment>Verificamos si la entrada tiene presente la etiqueta "snippet".</b:comment>
<b:if cond='data:posts.first.labels any (label => label.name == "snippet")'>
<div id='showcase'>
<div><data:posts.first.body/></div>
<div><textarea/></div>
</div>
<b:else/>
<data:posts.first.body/>
</b:if>
<b:else/>
<b:comment>En tal caso no se esté en una entrada, se crea una lista con los enlaces de todas las entradas del blog, pero excluyendo aquellas que tienen la etiqueta "hidden".</b:comment>
<main>
<ul>
<b:loop values='data:posts where (post => post.labels none (label => label.name == "hidden"))' var='post'>
<li><b:include data='post' name='postTitle'/></li>
</b:loop>
</ul>
</main>
</b:if>
<b:include cond='data:view.isMultipleItems' name='postPagination'/>
<b:else/>
<b:include name='noContentPlaceholder'/>
</b:if>
<b:eval expr='data:view.isSingleItem ? "<!--" : ""'/>
</b:includable>
<b:includable id='postPagination'>
<b:if cond='data:view.isMultipleItems'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
</div>
</b:if>
</b:includable>
<b:includable id='postTitle'>
<b:comment>Los títulos ahora pasan a ser simples enlaces para ser mostrados en una lista.</b:comment>
<b:comment>En tal caso se desee mostrar el código en la entrada correspondiente, se pasa como parámetro el valor "snippet" para poder ejecutar el "script" que se encarga de ello.</b:comment>
<a expr:href='data:post.link ?: data:post.labels any (label => label.name == "snippet") ? appendParams(data:post.url, {view: "snippet"}) : data:post.url'>
<b:eval expr='data:post.title != "" ? data:post.title : data:post.url'/>
</a>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
<b:eval expr='data:view.isSingleItem ? "<!--" : ""'/>
</head>
<b:eval expr='data:view.isSingleItem ? "--></head>" : ""'/>
<body>
<b:class cond='not data:view.isSingleItem' name='index'/>
<b:section id='header' cond='not data:view.isSingleItem'>
<b:widget type='Header' id='Header1' visible='true'/>
</b:section>
<b:eval expr='data:view.isSingleItem ? "<!--" : ""'/>
<b:section id='main' showaddelement='no'>
<b:widget type='Blog' id='Blog1' locked='true' visible='true'/>
</b:section>
<b:eval expr='data:view.isSingleItem ? "-->" : ""'/>
<b:section id='footer' cond='not data:view.isSingleItem'/>
</body>
</html>
Publicar un comentario
Sé respetuoso, no publiques información personal (p. ej., direcciones de correos electrónicos) y evita el contenido publicitario o que esté fuera del tema tratado. El comentario estará visible después de ser aprobado por el administrador.