canvas-core: A Pug repository from zkreations

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

zkreations/canvas-core

Canvas Core

Instalar

npm

Mixins

variables

cdata

markups

markup

default-tools

section

widget

Tools

@:ads

@:adsense

@:analytics

@:attr

@:image

@:kind

@:meta

License