{"id":1235,"date":"2022-08-25T20:46:16","date_gmt":"2022-08-25T19:46:16","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1235"},"modified":"2022-10-24T20:05:29","modified_gmt":"2022-10-24T19:05:29","slug":"widgets-personalizados-para-wordpress","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/1235\/widgets-personalizados-para-wordpress\/","title":{"rendered":"Widgets personalizados para tu sitio WordPress"},"content":{"rendered":"\n<p>Para prescindir de plugins externos innecesarios, aqu\u00ed ver\u00e1s c\u00f3mo hacer tus propios widgets para insertar en tu p\u00e1gina de WordPress o dentro de cualquier post.<\/p>\n\n\n\n<p>S\u00f3lo tienes que saber algo de HTML y de javascript. Vamos a ello!<\/p>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Contenido<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"custom-html\">Custom HTML<\/h2>\n\n\n\n<p>Si has visto alg\u00fan otro post de este blog ya habr\u00e1s visto la tabla de contenido de arriba, o la notificaci\u00f3n de cookies en la barra lateral.<\/p>\n\n\n\n<p>Ambos son elementos din\u00e1micos que he programado con HTML y javascript y que puedes insertar en m\u00faltiples sitios de tu WordPress usando un bloque \"Custom HTML\".<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"653\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1.png\" alt=\"\" class=\"wp-image-1236\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1.png 748w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1-300x262.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1-676x590.png 676w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Simplemente inserta este bloque y dentro podr\u00e1s introducir tu c\u00f3digo HTML personalizado y programable con javascript. Veamos unos ejemplos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"notificacion-de-cookies\">Notificaci\u00f3n de cookies<\/h2>\n\n\n\n<p>La barra lateral de este blog muestra un mensaje de consentimiento de cookies, con un enlace a la pol\u00edtica de privacidad.<\/p>\n\n\n\n<p>Puede que hayas visto que al cambiar el idioma de la p\u00e1gina, se cambia el contenido de dicho mensaje autom\u00e1ticamente.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom2.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"233\" height=\"103\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom2.png\" alt=\"\" class=\"wp-image-1237\"\/><\/a><figcaption>Haz click derecho para inspeccionar la estructura de la p\u00e1gina.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Para que funcione correctamente, imagina que el bloque <strong>Custom HTML<\/strong> que insertas es un <code>iframe<\/code> o una especie de p\u00e1gina insertada; una sub-p\u00e1gina dentro de nuestra p\u00e1gina.<\/p>\n\n\n\n<p>Editamos el contenido del <strong>Custom HTML<\/strong> como si de otra p\u00e1gina se tratara, y podemos a\u00f1adir libremente lo que queramos.<\/p>\n\n\n\n<p>Para la notificaci\u00f3n, solo quiero una l\u00ednea de texto, a la que asigno la <code>id<\/code> \"cookie-txt\". Es bueno a\u00f1adir toda la estructura HTML b\u00e1sica, aunque se puede prescindir de muchos elementos. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body style=\"background-color:'lightgrey';width:100%;\"&gt;\n&lt;p id=\"cookie-txt\"&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Ahora a\u00f1ado una funci\u00f3n javascript que lea el idioma de la p\u00e1gina y rellene esta l\u00ednea en consecuencia.<\/p>\n\n\n\n<p>Puedes hacer distintas pruebas usando la consola y el inspector del navegador, haciendo click derecho en la p\u00e1gina.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"325\" height=\"146\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3.png\" alt=\"\" class=\"wp-image-1238\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3.png 325w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3-300x135.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Una forma r\u00e1pida de obtener el idioma es leyendo la propiedad <code>lang=\"es-ES\"<\/code> del elemento <code>&lt;html&gt;<\/code> de la p\u00e1gina (o <code>lang=\"en-GB\"<\/code> para ingl\u00e9s).<\/p>\n\n\n\n<p>El resto es una condici\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Si se detecta \"es-ES\", definimos el mensaje en Espa\u00f1ol.<\/li><li>Si se detecta \"en-GB\", definimos el mensaje en Ingl\u00e9s.<\/li><\/ul>\n\n\n\n<p>El contenido del mensaje lo definimos mediante la propiedad <code>innerHTML<\/code> del elemento <code>&lt;p&gt;<\/code>, por lo que podemos darle cualquier formato HTML, como incrustarle un enlace o resaltar en negrita.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nvar lang=document.getElementsByTagName(\"html\")&#91;0].lang;\nif(lang==\"es-ES\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"\ud83c\udf6a &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=1225' target='_blank'&gt;Pol\u00edtica&lt;\/a&gt; &lt;b&gt;anti-Cookies&lt;\/b&gt; aceptada al navegar.&lt;\/p&gt;\";\n}else if(lang==\"en-GB\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"&lt;b&gt;\ud83c\udf6a anti-Cookies&lt;\/b&gt; &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=3' target='_blank'&gt;policy&lt;\/a&gt; accepted while browsing.\";\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Por lo que quedar\u00eda algo as\u00ed:<\/p>\n\n\n\n<html>\n<body style=\"background-color:'lightgrey';width:100%;\">\n<p id=\"cookie-txt\"><\/p>\n<\/body>\n<script>\nvar lang=document.getElementsByTagName(\"html\")[0].lang;\nif(lang==\"es-ES\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"\ud83c\udf6a <a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=1225' target='_blank'>Pol\u00edtica<\/a> <b>anti-Cookies<\/b> aceptada al navegar.<\/p>\";\n}else if(lang==\"en-GB\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"<b>\ud83c\udf6a anti-Cookies<\/b> <a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=3' target='_blank'>policy<\/a> accepted while browsing.\";\n}\n<\/script>\n<\/html>\n\n\n\n<p>El c\u00f3digo completo del <strong>Custom HTML<\/strong> que muestra la notificaci\u00f3n de cookies es este:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body style=\"background-color:'lightgrey';width:100%;\"&gt;\n&lt;p id=\"cookie-txt\"&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;script&gt;\nvar lang=document.getElementsByTagName(\"html\")&#91;0].lang;\nif(lang==\"es-ES\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"\ud83c\udf6a &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=1225' target='_blank'&gt;Pol\u00edtica&lt;\/a&gt; &lt;b&gt;anti-Cookies&lt;\/b&gt; aceptada al navegar.&lt;\/p&gt;\";\n}else if(lang==\"en-GB\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"&lt;b&gt;\ud83c\udf6a anti-Cookies&lt;\/b&gt; &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=3' target='_blank'&gt;policy&lt;\/a&gt; accepted while browsing.\";\n}\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>El bloque <strong>Custom HTML<\/strong>, en este caso, lo inserto como un elemento de la barra lateral:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"404\" height=\"563\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4.png\" alt=\"\" class=\"wp-image-1239\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4.png 404w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4-215x300.png 215w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"tabla-de-contenido\">Tabla de contenido<\/h2>\n\n\n\n<p>La tabla de contenido que aparece en cada post viene a ser m\u00e1s o menos lo mismo que lo anterior.<\/p>\n\n\n\n<p>En primer lugar, defino la tabla d\u00e1ndole formato, y dejando el contenido vac\u00edo para rellenar luego con una funci\u00f3n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\"&gt;\n&lt;p style=\"font-weight:bold;\"&gt;Contenido&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>En este caso, lo que har\u00e9 es buscar los \"headings\" o t\u00edtulos de cada apartado, en concreto los de etiqueta <code>&lt;h2&gt;<\/code>. Por ello, al redactar los posts debo usar siempre este tipo de encabezado (que es el habitual) si quiero que aparezca en la tabla.<\/p>\n\n\n\n<p>Adem\u00e1s, defino un ancla o <strong>html Anchor<\/strong>, que se asignar\u00e1 como \"id\", lo cual nos permitir\u00e1 crear un enlace que nos lleve hasta dicho encabezado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"623\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5.png\" alt=\"\" class=\"wp-image-1240\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5.png 299w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5-144x300.png 144w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>La funci\u00f3n har\u00e1 lo siguiente:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Buscar los elementos &lt;h2&gt; uno por uno.<br><code>for (let i=0;i &lt; window.document.getElementsByTagName(\"h2\").length; i++) { element = window.document.getElementsByTagName(\"h2\")[i];<\/code><br><code>...<\/code><br><\/li><li>Tomar el texto que contiene.<br><code>text = \"\u25b9 \"+element.innerHTML;<\/code><br><\/li><li>Crear el nuevo elemento de tipo hiperenlace (&lt;a&gt;) que ir\u00e1 a la tabla de contenido, con el texto anterior.<br><code>var newelement = document.createElement(\"a\"); newelement.innerHTML=text;<\/code><br><\/li><li>Tomar la \"id\" del post y del encabezado para crear un enlace a dicho encabezado.<br><code>var postid = window.document.getElementsByTagName(\"article\")[0].id;<\/code><br>v<code>ar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;<\/code><br><\/li><li>A\u00f1adirlo todo en una l\u00ednea al elemento de la tabla de contenido<br><code>newelement.setAttribute(\"href\", url); newelement.appendChild(document.createElement(\"br\")); window.document.getElementById(\"menu\").appendChild(newelement);<\/code><br><\/li><\/ol>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>A\u00f1adiendo <b>#id-de-la-secci\u00f3n<\/b> al final de una URL te dirije a dicho apartado.<\/i><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\"><li>Por \u00faltimo, algunas p\u00e1ginas tardan un tiempo en cargar y no est\u00e1n todos los encabezados disponibles al inicio, por lo que meto todo el c\u00f3digo anterior en una funci\u00f3n, y la invoco con un tiempo de retardo.<br><code>window.setTimeout(fillmenu,500);<\/code><\/li><\/ol>\n\n\n\n<p>El c\u00f3digo del bloque completo ser\u00eda el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\"&gt;\n&lt;p style=\"font-weight:bold;\"&gt;Contenido&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i&lt;window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")&#91;i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")&#91;0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nwindow.setTimeout(fillmenu,500);\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>A\u00f1ade este bloque HTML a tus bloques <b>reusables<\/b> y lo podr\u00e1s insertar en todos tus posts. Este bloque de <b>TIP!<\/b> es otro ejemplo.<\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bloque-TIP\">Bloque de TIP!<\/h2>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Este bloque de <b>TIP!<\/b> es otro ejemplo. Tendr\u00e1s que reconvertir a un bloque regular si quieres alterar el contenido <b>solo<\/b> en el bloque insertado<\/i><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6.png\" alt=\"\" class=\"wp-image-1241\" width=\"551\" height=\"392\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6.png 734w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6-300x213.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6-676x481.png 676w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Aqu\u00ed su c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"&gt;&lt;i&gt;&lt;b&gt;TIP! &lt;\/b&gt;Este bloque de &lt;b&gt;TIP!&lt;\/b&gt; es otro ejemplo. Tendr\u00e1s que reconvertir a un bloque regular si quieres alterar el contenido &lt;b&gt;solo&lt;\/b&gt; en el bloque insertado&lt;\/i&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Como ver\u00e1s, las posibilidades son realmente ilimitadas as\u00ed que queda todo a expensas de tu imaginaci\u00f3n.<\/p>\n\n\n\n<p>Se creativo y dise\u00f1a tus propios widgets, ya ver\u00e1s lo bien complementan tu blog!<\/p>\n\n\n\n<p>Como siempre, dudas o comentarios al Twitter \ud83d\udc26 \u00a1Hasta otra!<\/p>\n\n\n\n<p>(el bloque de Twitter tambi\u00e9n es un reutilizable \ud83d\udc40 )<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para prescindir de plugins externos innecesarios, aqu\u00ed ver\u00e1s c\u00f3mo hacer tus propios widgets para insertar en tu p\u00e1gina de WordPress o dentro de cualquier post. S\u00f3lo tienes que saber algo de HTML y de javascript. Vamos a ello! Custom HTML Si has visto alg\u00fan otro post de este blog ya habr\u00e1s visto la tabla de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1250,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-1235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webes","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":5,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"predecessor-version":[{"id":1590,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1235\/revisions\/1590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1250"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}