Widget generador de secciones por etiquetas

/*!
 * wjs-section v2.1.0
 * Copyright 2018 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
.widget#LinkList201{
   background: none;
   margin:0;
   padding:0;
   box-shadow: none;
   outline:0;
   border:0;
}
.wjs-section__more {display: inline-block;}
.stns-title, .stns-image, .stns-image img {display: block;}
.stns-content {overflow: hidden}
.wjs-section {
   display: flex;
   flex: 1 0 100%;
   flex-wrap: wrap;
   font-size: 14px;
   margin-top: calc(var(--wjs-gutter-y) * -1);
   margin-left: calc(var(--wjs-gutter-x) / -2);
   margin-right: calc(var(--wjs-gutter-x) / -2);
}
.stns-alert,
.stns-card {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
   flex: 0 0 auto;
   padding-right: calc(var(--wjs-gutter-x) / 2);
   padding-left: calc(var(--wjs-gutter-x) / 2);
   margin-top: var(--wjs-gutter-y);
}
@media (min-width:376px) {.stns-card {width: 50%;}}
@media (min-width:576px) {
   .stns-card {width: 33.333333%}
   .wjs-section {font-size: 16px;}
}
/*! Personalización */
/* Estructura
-----------------------------------------*/
.wjs-section {
   --wjs-gutter-x: 1rem; /* Separacion orizontal */
   --wjs-gutter-y: 1rem; /* Separacion vertical */
}
/* Cuerpo
-----------------------------------------*/
.stns-content {
   box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.25); /* sombra */
   border-radius: 4px; /* bordes redondeados */
}
/* Contenedor de datos
-----------------------------------------*/
.stns-meta {
   padding: 1.2em; /* relleno */
   background-color: #fff; /* color de fondo */
}
/* Titulo
-----------------------------------------*/
.stns-title {
   font-size: 1em; /* tamaño del título */
   margin-bottom: .25em; /* separación */
   color: #464646; /* color del titulo */
   font-weight: 500; /* densidad del texto */
}
/* Fecha
-----------------------------------------*/
.stns-date {
   font-size: .9em; /* tamaño del texto */
   color: #BBBBBB; /* color de la fecha */
}
/* Resumen
-----------------------------------------*/
.stns-snippet {
   margin-top: .5em; /* separación */
   color: #757575; /* color del texto */
}
/* Boton "Mostrar todo"
-------------------------------------*/
.wjs-section__more {
   margin-top: 1.5rem; /* Separacion */
   padding: .8rem 1.5rem; /* relleno */
   background-color: #f1f1f1; /* color de fondo */
   font-size: 1em; /* tamaño del texto */
   font-weight: 500; /* densidad del texto */
   color: #757575; /* color del texto */
   border-radius: 4px; /* bordes redondeados */
}

<b:widget id='LinkList201' title='WJS Sections' type='LinkList'>
   <b:includable id='main'>
      <b:loop values='data:links' var='section'>
        <b:with expr:value='"{" + data:section.target + "}"' var='category'>
          <div class='widget'>
            <b:include name='sections-title'/>
            <b:include name='content'/>
          </div>
        </b:with>
      </b:loop>
      <b:include name='js'/>
    </b:includable>
   <b:includable id='sections-title'>
      <b:tag expr:name='data:widgets ? "h3" : "h2"' class='widget-title'>
        <span class='widget-name'><data:section.name/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <div class='wjs-section' expr:data-category="data:category.tag">
          <b:attr cond='data:category.results' name='data-max-results' expr:value='data:category.results'/>
          <p class="stns-alert">Cargando entradas...</p>
        </div>
        <a class='wjs-section__more' expr:href='+("/search/label/",data:category.tag)'>
          <data:messages.showAll/>
        </a>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
      <script>//<![CDATA[
         /*!
          * wjs-section v2.1.0
          * Copyright 2018 zkreations
          * Developed by José Gregorio (fb.com/JGMateran)
          * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
          */
         'use strict';
         var callbacks = {},
             defaults = {
                homeUrl: window.location.protocol + '//' + window.location.hostname, // Url blog
                image: 'img/no-img-blogger.png', // Imagen por defecto
                className: '.wjs-section',
                localeDate: 'es-ES', //Idioma
                snippet: 60, // Cantidad texto para el resumen
                imgSize: 'w300-h240-c', // Cantidad texto para el resumen
         };
         //! Core (No modificar) {{
         function forEach(e,t){var a,s;for(a=0;(s=e[a++])&&!1!==t.call(s,a,s););return e}function getCurrentData(e){var t,a,s={};for(t in section)a=e.getAttribute("data-"+t),a&&(s[t]=a);return s}function temp(e,t){var a;for(a in t)e=e.replace(new RegExp(a,"g"),t[a]);return e}function getLabel(e,t){var a,s=t.category,n=s.replace(/[^A-Z0-9]/gi,""),r=document.createElement("script"),l=defaults.homeUrl+"/feeds/posts/default?alt=json-in-script&callback=callbacks."+n;callbacks[n]=function(a){var s,n,r="",l=a.feed.entry;if(l)for(s=0;n=l[s++];){var c=n.content,i=n.summary,o=c?c.$t:i.$t,d=n.media$thumbnail,u=document.createElement("div");u.innerHTML=o;var m=u.querySelector("img");r+=temp(t.template,{IMG:(d?d.url:m?m.src:defaults.image).replace(section.expReg,defaults.imgSize),TITLE:n.title.$t,TIME:new Date(n.published.$t).toLocaleDateString(defaults.localeDate,{month:"long",day:"2-digit"}),SNIPPET:o.replace(/<[^>]*>?/g,"").substring(0,defaults.snippet)+"...",URL:function(){var e,t;for(e=0;t=n.link[e++];)if("alternate"===t.rel)return t.href}})}else r+=section.template.empty;e.innerHTML=r};for(a in t)"template"!==a&&(l+="&"+a+"="+t[a]);r.src=l,document.body.appendChild(r)}var section={expReg:/[swh]\d{2,4}(?:-[swh]\d{2,4})?(?:-c)?/,category:null,"max-results":6,template:{"default":'<div class="stns-card"><div class="stns-content"><div class="stns-header"><a class="stns-image" href="URL"><img src="IMG" /></a></div><div class="stns-meta"><a class="stns-title" href="URL">TITLE</a><time class="stns-date">TIME</time><p class="stns-snippet">SNIPPET</p></div></div></div>',empty:'<p class="stns-alert">No se han encontrado entradas</p>'}};forEach(document.querySelectorAll(defaults.className),function(e,t){var a=getCurrentData(t);a.category&&(a["max-results"]||(a["max-results"]=section["max-results"]),a.template=section.template["default"],getLabel(t,a))});
         //!}} Fin del core
      //]]></script>
   </b:includable>
</b:widget>

tag: "Viajes", results: 10