Anime XML - Documentación

Básico

Menú

En la pestaña Diseño de nuestro panel buscamos el gadget menu y pinchamos sobre el icono de lapiz, esto nos abrira una nueva ventana en la cual encontraremos el menu por defecto. Borra su contenido y copia y pega el siguiente html:

<ul class="navbar-menu__list">
    <li><a href="/"><i class="fas fa-home"></i> Inicio</a></li>
    <li><a href="#"><i class="fas fa-code"></i> Elemento #2</a></li>
    <li><a href="#"><i class="fas fa-code"></i> Elemento #2</a></li>
</ul>

Sub menú

Para agregar un sub menu, justo por debajo de una etiqueta </li>, agregue el siguiente html:

<li><a href="#">Sub menu</a>
    <ul class="is-child">
        <li><a href="#">element #1</a></li>
        <li><a href="#">element #2</a></li>
        <li><a href="#">element #3</a></li>
    </ul>
</li>

Agregar un icono

Para agregar un icono a un item de nuestro menu, debemos agregarlo justo por delante del texto de la etiqueta <a> una etiqueta <i> con el nombre de la clase:

<a href="#"><i class='claseIcono m8-r'></i> Sub menu</a>

Anime.xml usa la librería Font Awesome para obtener una completa lista de iconos. Se recomienda usar esta si ocupas iconos.

Variables

En panel » tema » editor HTML buscamos <!-- General -->, lo cual nos llevará al siguiente cádigo:

<!-- General -->
<Variable name="config.comment" {...} ddefault="blogger" value="blogger"/>
<Variable name="config.shortname" {...} default="shortname" value="shortname"/>
<Variable name="config.fbID" {...} default="fbID" value="fbID"/>

General

En la siguiente tabla se detallan el uso de cada una de estas variables.

Nombre Variable	Uso	Tipo
config.comment	Sistema de comentarios. Sus valores aceptados son blogger, disqus y facebook	String
config.shortname	Nombre corto (shortname) para disqus. saber más »	String
config.fbID	ID de aplicación para usar en los comentarios de facebook.	String

Temas

Skin de color para anime XML.

skin 01

<!-- Variable skin: tema 1 -->
<Variable name="keycolor" description="Color" type="color" default="#E63946"  value="#E63946"/>

<Group description="Color" selector="body">
    <Variable name="body.color" description="Body background color" type="color" default="#fff"  value="#303841"/>
    <Variable name="accents.color" description="Action color" type="color" default="#E63946"  value="#E63946"/>
    <Variable name="text.color" description="Text Color" type="color" default="#2B2D42"  value="#ffffff"/>
    <Variable name="footer.color" description="Footer background Color" type="color" default="#2B2D42"  value="#3a4750"/>
    <Variable name="light.color" description="Light Color" type="color" default="#EEF1F4"  value="#2b323a"/>
    <Variable name="body.content" description="Content color" type="color" default="#fff"  value="#3a4750"/>
    <Variable name="body.background.color" description="Browser navbar color (Mobile only)" type="color" default="$(accents.color)"  hideEditor="true" value="#E63946"/>
</Group>

skin 02

<!-- Variable skin: tema 2 -->
<Variable name="keycolor" description="Color" type="color" default="#E63946"  value="#E63946"/>

<Group description="Color" selector="body">
    <Variable name="body.color" description="Body background color" type="color" default="#fff"  value="#303841"/>
    <Variable name="accents.color" description="Action color" type="color" default="#E63946"  value="#f6c90e"/>
    <Variable name="text.color" description="Text Color" type="color" default="#2B2D42"  value="#ffffff"/>
    <Variable name="footer.color" description="Footer background Color" type="color" default="#2B2D42"  value="#3a4750"/>
    <Variable name="light.color" description="Light Color" type="color" default="#EEF1F4"  value="#2b323a"/>
    <Variable name="body.content" description="Content color" type="color" default="#fff"  value="#3a4750"/>
    <Variable name="body.background.color" description="Browser navbar color (Mobile only)" type="color" default="$(accents.color)"  hideEditor="true" value="#f6c90e"/>
</Group>

Instalación

Desde nuestro panel » Tema » editar HTML buscamos lo siguiente <!-- Variable skin -->, lo cual nos llevará al siguiente código html:

<!-- Variable skin -->
<Variable name="keycolor" description="Color" type="color" default="#E63946"  value="#E63946"/>

<Group description="Color" selector="body">
    <Variable name="body.color" description="Body background color" type="color" default="#fff"  value="#ffffff"/>
    <Variable name="accents.color" description="Action color" type="color" default="#E63946"  value="#E63946"/>
    <Variable name="text.color" description="Text Color" type="color" default="#2B2D42"  value="#2B2D42"/>
    <Variable name="footer.color" description="Footer background Color" type="color" default="#2B2D42"  value="#2B2D42"/>
    <Variable name="light.color" description="Light Color" type="color" default="#EEF1F4"  value="#EEF1F4"/>
    <Variable name="body.content" description="Content color" type="color" default="#fff"  value="#ffffff"/>
    <Variable name="body.background.color" description="Browser navbar color (Mobile only)" type="color" default="$(accents.color)"  hideEditor="true" value="#E63946"/>
</Group>

Reemplaza el código anterior por uno de los antes mencionados.

---

Avanzado

Habilitar vínculos de difusión

En nuestro panel » configuración buscamos "Feed del sitio" y presionamos en el checkbox del título "Vínculos de redifusión y título". Si bien los vínculos de difusión, no han sido programados para esto, estos nos permitirán agregar datos adicionales a la entrada de una manera más comoda y sin tocar código html.

Nota: los textos del panel pueden variar según el idioma.

Agregar Nuevo vínculo de difusión.

Para agregar un nuevo vínculo de difusión basta con ir a la pestaña Vínculos y buscar el texto Agregar otro vínculo de redifusión y agregar los datos que se mencionan en las secciones Base, Breadcrumbs y Stats.

---

Entradas

Para el correcto funcionamiento de la plantilla Anime XML, se debe agregar el siguiente html en toda entrada que sea para una serie o película:

<div class='hide'>
<img src="{poster}"/>
<p>{synopsis}</p>
</div>

{poster} es la url de una imagen que usaremos como portada de nuestra entrada y {synopsis} es el resumen/argumento de la película/serie.

---

Datos adicionales

Datos adicionales obligatorios para el correcto funcionamiento de la plantilla.

uso

En cualquier entrada de Series o Película, debemos agregar al final el siguiente HTML:

<!-- Código de ejemplo-->
<div class='krs-attrObj hide'
    data-attrobj-rate="7.01"
    data-attrobj-studio="J.C.Staff"
    data-attrobj-year="2021"
    data-attrobj-episodes="24"
    data-attrobj-duration="23min. aprox">
</div>

El código anterior se debe agregar en modo Vista HTML.

En la siguiente tabla se datallan los datos anteriormente mencionados como sus posibles valores.

Nombre Variable	Uso	Tipo
data-attrobj-rate	Es un valor númerico que representa el puntaje dado a la serie/película.	Number
data-attrobj-studio	Nombre del studio encargado de la serie/película.	string
data-attrobj-year	Año en el que se emitió la serie/película	string
data-attrobj-episodes	Total de episodios para serie/película	string
data-attrobj-duration	Duración apróximada de la serie/película	string

Header

Header personalizado para series y películas.

En el cuadro Agregar vínculo agregamos lo siguiente:

custom.co/base

En el cuadro Agregar tipo MIME agregamos lo siguiente:

cover: "",
poster: "",
name: "",
synopsis: ""

En la siguiente tabla se detallan las variables y sus posibles valores.

Nombre Variable	Uso	tipo
cover	Es la imagen de fondo del header. Esta debe ser una url directa.	string/url
poster	Es la imagen que se usara como cubierta.	string/url
name	Título de la serie/película.	string
synopsis	Resumen o argumento de la serie/película.	string/html

---

Breadcrumbs

Crea categorías en base a las etiquetas de tu blog.

En el cuadro Agregar vínculo agregamos lo siguiente:

custom.co/breadcrumbs

En el cuadro Agregar tipo MIME agregamos lo siguiente:

"label1"

Reemplaza label1 por el nombre de una etiqueta existente en por lo menos una entrada de nuestro blog. Para agregar una nueva etiqueta, agrega ,"label2" al final.

Nota: El orden de aparición de cada etiqueta es secuencial.

---

Stats

Agrega datos como el score, studio, Año ó un dato personalizado de una serie o película.

En el cuadro Agregar vínculo agregamos lo siguiente:

custom.co/stats

En el cuadro Agregar tipo MIME agregamos lo siguiente:

{name: "RateScore", subName: "score", score: true},
{name: "LabelName", subName: "season", url: "/search/label/LabelName"},
{name: "LabelYear", subName: "year", url: "/search/label/LabelYear"},
{name: "StudioName", subName: "studio", url: "/search/label/StudioName"}

Para agregar un dato personalizado, agrega lo siguiente al final:

,{name: "nombre", subName: "texto secundario", url: "url"}

En la siguiente tabla se detallan los datos mencionados

Nombre Variable	Uso	tipo
name	Nombre principal.	string
subName	Nombre secundario.	string
score	Valor Boolean que nos permite agregar un item de tipo Score (Este antepondrá una estrella al valor name).	Boolean
url	URL de destino.	string/url

---

Slider

principal

Slider automatico que tomará las últimas entradas del blog.

Uso

Desde nuestro panel buscamos la pestaña Diseño, en ella debemos buscar el gadget de nombre Main slider y pinchar en el icono de lapiz, lo cual nos abrira una nueva ventana.

En el cuadro de contenido agregamos lo siguiente:

label: "my_label_name",
results: 5

En la siguiente tabla se detallan los valores anteriormente mencionados.

Nombre Variable	Uso
label	Nombre de una etiqueta de nuestro blog. Dicha etiqueta debe estar presente en por lo menos una entrada.
results	Total de entradas a ser mostradas.

IMPORTANTE: Este slider necesita los datos adicionales que se explican en su sección correspondiente para funcionar correctamente.

secundario

Slider manual que nos permitira recomendar Series, películas y/o alguna entrada de nuestro interes.

Uso

Desde nuestro panel buscamos la pestaña Diseño, en ella debemos buscar el gadget de nombre Slider y pinchar en el icono de lapiz, lo cual nos abrira una nueva ventana.

En el cuadro contenido debemos agregar lo siguiente:

{
  image: "{image}",
  title: "{title}",
  url: "{url}"
},
{
  image: "{image}",
  title: "{title}",
  url: "{url}"
}
// ...

En la siguiente tabla se detallan los valores mencionados.

Nombre Variable	Uso	tipo
image	URL a una imagen, esta puede estar alojada en blogger o no. De preferencia la resolución de esta debe ser de por lo menos 570x320.	string/image
title	Titulo de nuestro item.	string
url	URL de destino.	string

Agregar nuevo item

El slider secundario se basa en un array de objetos con la estructura ya mencionada arriba. Por lo tanto, para agregar un nuevo item a nuestro slider, debemos agregar el siguiente codigo justo por debajo de la llave de cierre }:

// ...
,
{
  image: "{image}",
  title: "{title}",
  url: "{url}"
}

IMPORTANTE: Se recomienda tener una cantidad moderada de items, puesto que si nos excedemos en la cantidad, el slider puede colapsar y romper el flujo de nuestra plantilla.

Box letters

Agrega un índice alfabetico a tu blog de forma sencilla.

En nuestro panel buscamos el gadget Box letter y pinchamos en el icono de lápiz, se nos abrirá una ventana. En el recuadro contenido agregamos el siguiente código:

prefix: "letter-",
letters: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]

En la siguiente tabla se detallan los valores anteriormente mencionados.

Nombre Variable	Uso
prefix	Prefijo que se usará antes de la letra. Este prefijo se usara en el array letters. Eje: letter-a
letters	Es un array de string que contiene el alfabeto completo. Al ser procesado, cada iteración tomara la variable prefix para crear un enlace. Eje: /search/label/prefix-letter

El array letter devolvera el siguiente codigo html:

<!-- ... -->
<li><a href="/search/label/letter-i">i</a></li>
<li><a href="/search/label/letter-j">j</a></li>
<li><a href="/search/label/letter-k">k</a></li>
<li><a href="/search/label/letter-l">l</a></li>
<li><a href="/search/label/letter-m">m</a></li>
<!-- ... -->

---

Shortcodes

Lista de información

<ul class="cp-info-list">
    <li><span>alternative title</span>: Gravity Falls</li>
    <!-- ... -->
</ul>

Lista de episodios

<ul class="epList">
    <li><a href="#">
            <span class="epList-num">01</span>
            <div class="epList-headline">
                <span class="epList-name">Rimuru's Busy Life</span>
                <span class="epList-nameEpisode">episode 01</span>
            </div>
        </a></li>
</ul>

Tabla de descarga

<div class="dl">
    <table>
        <caption class="dl-header">
            <div class="dl-header__item"><span>quality:</span> 1080p, 720p</div>
            <div class="dl-header__item"><span>subs:</span> english, spanish</div>
            <div class="dl-header__item"><span>audio:</span> japanese</div>
        </caption>
        <tr class="dl-headline">
            <th>#</th>
            <th>type</th>
            <th>link</th>
        </tr>
        <tr>
            <td>3</td>
            <td><span class="dl-box"><i class="fas fa-folder"></i> carpeta</span></td>
            <td>
                <a href="#" class="dl-link">Mega</a>
            </td>
        </tr>
    </table>
</div>

Agregar más campos de información

En la tabla buscamos el html:

<caption class="dl-header">
    <div class="dl-header__item"><span>quality:</span> 1080p, 720p</div>
    <div class="dl-header__item"><span>subs:</span> english, spanish</div>
    <div class="dl-header__item"><span>audio:</span> japanese</div>
</caption>

y justo por abajo de la etiqueta </div>, pegamos el siguiente código:

<div class="dl-header__item"><span>valor:</span> valor</div>

repetimos el proceso las veces que necesitemos.

Agregar más filas

Justo después del siguiente html:

<tr class="dl-headline">
    <th>#</th>
    <th>type</th>
    <th>link</th>
</tr>

Agregamos el siguiente código:

<tr>
    <td>1</td>
    <td><span class="dl-box"><i class="fas fa-folder"></i> carpeta</span></td>
    <td>
        <a href="#" class="dl-link">Mega</a>
    </td>
</tr>

repetimos el proceso las veces que necesitemos.

---

Tabs

<div class="cp-tabs tab m8-y">
    <div class="cp-tabs-items tab-select flex">
        <button class="tab-select-item" data-id="details">Details</button>
        <!-- {botón} -->
    </div>
    <div class="cp-tabs-content tab-item is-active" id="details">
        <!-- ...body -->
    </div>
    <!-- {contenido} -->
</div>

Recuerda agregar is-active a las clases tab-select-item y tab-item respectivamente para mostrar el contenido activo

Agregar mas botones

<button class="tab-select-item" data-id="{id-tab}">{nombre_botón}</button>

Reemplaza {id-tab} por un nombre único que coincida con el id de un contenedor con la clase tab-item

Agregar mas contenedores

Para agregar mas contenedores, agrega el siguente html justo por debajo de <!-- {contenido} -->:

<div class="cp-tabs-content tab-item is-active" id="{id-tab}">
    <!-- ...body -->
</div>

Secciones

En la pestana Diseño de nuestro panel buscamos el gadget sections, y pinchamos en el icono de lápiz. Este nos abrirá la siguiente ventana:

En el campo de Nuevo nombre del sitio debemos agregar un título para dicha sección. En el campo de URL del sitio nuevo debemos agregar lo siguiente:

label: "",
results: 4

La siguiente tabla se detallan los posibles valores del código mencionado

Nombre Variable	Uso
label	Es el nombre de una etiqueta existente en por lo menos una entrada de nuestro blog.
results	Es el total de items a mostrar

Una vez rellenado los cambos con los valores correspondientes, pincha en el botón "Agregar vínculo". Puedes repetir este proceso las veces que estimes conveniente.

---

Créditos

Anime XML ha sido posible gracias a la ayuda de las siguientes librerías y plataformas. Sin estas, esta plantilla no podría haber sido posible.