Canvas Core

Mixins y otros recursos útiles que se utilizan como punto de partida para crear una plantilla de Blogger. Puedes ver un ejemplo básico en: https://github.com/zkreations/canvas

Instalar

npm

npm i @zkreations/canvas -D

Mixins

Una de las grandes ventajas de usar PugJS es que puedes crear mixins, que son bloques de código reutilizables. Canvas cuenta con algunos bloques escritos exclusivamente para facilitar algunas tareas en Blogger:

variables

Crea variables de Blogger, para usarlas dentro de una etiqueta b:skin:

mixin variables(object)

El parámetro del mixin requiere un objeto, los cuales deben contener atributos de variables de Blogger. Por ejemplo

+variables({ 
  "body.background": {
    description: "Background",
    type: "background",
    color: "$(body.background.color)",
    value: "$(color) none repeat scroll top center"
  },
})

El campo value es obligatorio, todos los demás son opcionales. Si el campo type no se especifica se usará por defecto "string". Un ejemplo de variables con los datos mínimos aceptables:

+variables({
  "c.test" : { value: "example"},
  "c.get" : { value: "false"},
})

El código resultante sería:

<Variable name="c.test" description="c.test" type="string" value="example"/>
<Variable name="c.get" description="c.get" type="string" value="false"/>

cdata

Este mixin genera etiquetas html en donde el contenido estará rodeado de etiquetas Character DATA. Estas etiquetas evitan que el lenguaje de Blogger sea interpretado.

mixin cdata(tag="style")

Como único parámetro acepta el nombre de una etiqueta html. Si no se especifica la etiqueta html por defecto será <style>, por ejemplo:

+cdata

El código resultante será:

<style>/*<![CDATA[*/ /*]]>*/</style>

markups

Crea las etiquetas b:defaultmarkups necesarias para configurar inclusiones predeterminadas de Blogger.

mixin markups(object={})

Como único parámetro acepta un objeto de matrices string, las cuales deben corresponder a inclusiones de widgets, por ejemplo:

+markups({
  "AdSense,Blog": [
    "defaultAdUnit",
  ],
})

El código resultante será:

<b:defaultmarkups>
  <b:defaultmarkup type="AdSense,Blog">
    <b:includable id="defaultAdUnit"/>
  </b:defaultmarkup>
</b:defaultmarkups>

markup

Crea el marcado predeterminado para widgets, requiere el mixin +markups como padre para su correcta interpretación en Blogger.

mixin markup(type="Common")

Como único parámetro escribe el nombre de un tipo de widget válido de Blogger, si no se especifica se usará "Common". Si el tipo especificado no es válido o si es un widget de solo lectura, verás un aviso en la consola al compilar.

+markups
  +markup

El código resultante será:

<b:defaultmarkups>
  <b:defaultmarkup type="Common"></b:defaultmarkup>
</b:defaultmarkups>

default-tools

Importa las inclusiones globales de canvas, requiere el mixin +markups como padre para su correcta interpretación en Blogger.

mixin default-tools(tools=defaultTools)

Como único parámetro acepta acepta una matriz de string que contiene el nombre de las inclusiones disponibles. Puedes elegir las que necesites (por defecto se incluyen todas):

[ "ads", "adsense", "attr", "image", "kind", "meta" ]

section

Crea una etiqueta b:section que verifica si contiene widgets, de lo contrario no genera html de la sección en el código fuente.

mixin section(id)

Como único parámetro acepta un identificador único, el cual es obligatorio. Todos los atributos especificados en el mixin también formarán parte del código final:

+section("sidebar")

El código resultante será:

<b:section id="sidebar" cond='data:widgets any (w => w.sectionId == "sidebar")'></b:section>

widget

Crea una etiqueta b:widget que recuerda las veces que ha sido llamado, incrementando su contador en 1 tras cada inclusion.

mixin widget(type="HTML", settings={}, number)

El primer parámetro define el tipo, si no se especifica se creará un widget "HTML". El segundo parámetro es un objeto que crea la configuración predeterminada del widget, el tercer parámetro es un numero que define un valor arbitrario al contador.

+widget("Text", {
  content: "Prueba de contenido"
}, 59)

El código resultante será:

<b:widget id="Text59" type="Text" version="2">
  <b:widget-settings>
    <b:widget-setting name="content">Prueba de contenido</b:widget-setting>
  </b:widget-settings>
</b:widget>

Por defecto el contador de widgets comienza desde el número 1, pero puedes establecer el numero inicial del contador declarando la variable initCall.

- let initCall = 20

Tools

Estas inclusiones son las que se obtienen del mixin default-tools y facilitan algunas tareas en la creación de plantillas, para ello solo debes incluirlas en donde las necesites utilizando la etiqueta b:include.

@:ads

Genera código de adsense que siempre es responsive, para ello se ignorará cualquier configuración del usuario. También acepta código de anuncios personalizados:

<b:include name='@:ads'/>

| Parámetro | Tipo | Descripcion | Requerido | | --------- | ---------- | ------------------------------- | --------- | | style | string | Estilos en línea | opcional | | slot | string | ID de bloque personalizado | opcional | | layout | string | ID de anuncio creado en Adsense | opcional |

@:adsense

Agrega la etiqueta que incluye el código JavaScript de AdSense, la cual está actualizada y solo cargará si AdSense esta habilitado en el blog:

<b:include name='@:adsense'/>

@:analytics

Agrega la etiqueta que incluye el código JavaScript de Analytics (GA4). Cargará si la ID de Analytics esta habilitado en el blog:

<b:include name='@:analytics'/>

@:attr

Agrega o remueve multiples atributos al nodo superior. Cada matriz debe estar conformada por dos elementos tipo string, el primer elemento sera el nombre del atributo, el segundo elemento corresponderá a su valor. Si el valor está vació o no está presente, el atributo especificado se borrará del nodo superior:

<b:include name='@:attr'/>

| Parámetro | Tipo | Descripcion | Requerido | | --------- | ---------------- | -------------------- | ---------------- | | - | array[array] | Matriz de matrices | obligatorio |

@:image

Manipula imágenes alojadas en los servidores de Google, principalmente trabaja con datos de Blogger tipo imagen. También permite agregarle nuevos atributos a las imágenes usando los parámetros de imágenes de Blogger:

<b:include name='@:image'/>

| Parámetro | Tipo | Descripcion | Requerido | | --------- | ---------- | ------------------------------- | ---------------- | | src | image | Url o dato de imagen | obligatorio | | alt | string | Texto de respaldo | opcional | | id | string | Identificador único | opcional | | class | string | Clases adicionales | opcional | | width | string | Ancho explícito | opcional | | height | string | Alto explícito | opcional | | resize | number | Cambia las dimensiones | opcional | | ratio | string | Relación de aspecto | opcional | | sizes | string | Valor del atributo sizes | opcional | | srcset | array | Matriz de tamaños | opcional | | loading | string | Atributo loading | opcional | | params | string | Parámetros adicionales | opcional |

@:kind

Agrega clases al nodo superior que contiene información del tipo de página visualizado.

<b:include name='@:kind'/>

@:meta

Meta datos y otras etiquetas para SEO optimizadas, destinados a la cabecera HTML

<b:include name='@:meta'/>

| Parámetro | Tipo | Descripcion | Requerido | | ---------- | ---------- | ------------------------------- | ---------------- | | cardType | string | Tipo de tarjeta de Twitter | opcional | | favicon | image | Imagen de favicon HD (192x192) | opcional | | favSizes | array | Matriz de números (favicons) | opcional | | robots | string | Meta robots personalizado | opcional | | ogImage | image | Imagen para redes sociales | opcional |

License

canvas-core is licensed under the MIT License