Siguenos en facebook
y mantente informado de todo el nuevo contenido que tenemos para ti.
Documentación - Reader.xml
Guía para configurar y usar la plantilla Reader.xml
Variables
En nuestro Panel > Tema > Editar HTML buscamos lo siguiente: <!-- General -->, lo cual nos llevara al siguiente codigo:
<!-- General --> <Variable name="config.comment" {...} default="blogger" value="blogger"/> <Variable name="config.shortname" {...} default="shortname" value="shortname"/> <Variable name="config.fbID" {...} default="fbID" value="fbID"/> <Variable name="config.readerMode" {...} default="cascade" value="cascade"/> <!-- Lang --> <Variable name="lang.searchForm" {...} default="Buscar capítulo" value="Buscar capítulo"/> <Variable name="lang.recentPost" {...} default="Últimos capítulos" value="Últimos capítulos"/> <Variable name="lang.readerHome" {...} default="Inicio" value="Inicio"/> <Variable name="lang.readerReadLater" {...} default="Leer después" value="Leer después"/> <Variable name="lang.readerPage" {...} default="Página" value="Página"/> <Variable name="lang.readerPages" {...} default="Páginas" value="Páginas"/> <Variable name="lang.readerReadMode" {...} default="Modo lectura" value="Modo lectura"/> <Variable name="lang.readerPageMode" {...} default="Modo página" value="Modo página"/> <Variable name="lang.readerCascadeMode" {...} default="Modo cáscada" value="Modo cáscada"/> <Variable name="lang.readerPendingChapters" {...} default="Capítulos pendientes" value="Capítulos pendientes"/> <Variable name="lang.readerSucc" {...} default="Se ha agregado a tu lista de episodios por leer" value="Se ha agregado a tu lista de episodios por leer"/> <Variable name="lang.readerWarn" {...} default="Ya agregaste este episodio a tu lista" value="Ya agregaste este episodio a tu lista"/> <Variable name="lang.dlChapter" {...} default="Descargar capítulo" value="Descargar capitulo"/> <Variable name="lang.prevChapter" {...} default="Capítulo anterior" value="Capítulo anterior"/> <Variable name="lang.nextChapter" {...} default="Siguiente capítulo" value="Siguiente capítulo"/> <!-- Card --> <Variable name="card.style" {...} default="default" value="default"/> <Variable name="card.column" {...} default="1" value="1"/>
En la siguiente tabla se detallan el uso de cada una de estas variables.
General
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 |
config.readerMode | Nos permite eligir el modo por defecto del lector. Sus valores aceptados son cascade y page | String |
Lang
Las variables Lang nos permiten cambiar el idioma de la variable por el deseado. Util si lo que buscamos es cambiar el idioma de la plantilla sin mucho esfuerzo.
Cambiar texto
Para cambiar el texto por defecto, simplemente cambie el valor de default y value por el deseado. Un ejemplo seria el siguiente:
<Variable name="lang.searchForm" {...} default="Mi texto" value="Mi texto"/>
Lo anterior hara que el buscador que se ubica al inicio del blog, cambie el texto por defecto por "Mi texto".
Card
Variable | Uso | Tipo |
---|---|---|
card.style | Nos permite cambiar entre el estilo por defecto y el estilo por tarjeta. Sus valores aceptados son default, poster | String |
card.column | Numero maximo de items por fila. | number |
Para usar el modo poster debe agregar una etiqueta <img> al principio de la entrada de la siguiente manera:
<img src="{url_poster_image}" style="display: none;" />
Donde {url_poster_image} es la url a una imagen.
Configuración
IMPORTANTE En esta configuración se da por hecho que el blog que se está usando para seguir esta configuración está en blanco (sin entradas). Si no es así, recomiendo que lo hago en un blog limpio y continué con la guía.
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.
los textos del panel pueden variar según el idioma elegido.
Publicar entradas
En nuestro panel creamos una nueva entrada presionando en el botón "Crear entrada" que se ubica al lado izquierdo de nuestro panel, dentro del editor escojemos la vista HTML y posteriormente agregamos el siguiente código:
<script> let pages = [{...}] </script>
El valor {...} debemos reemplazarlo por un array de variables, estas variables deben contener una lista de imagenes que con anterioridad hemos subido a un servidor de nuestra propiedad. Quedando de la siguiente manera:
<script> let pages = [ "https://i.imgur.com/oiP4lMm.jpg", "https://i.imgur.com/w2TbrBE.jpg", "https://i.imgur.com/p8mk3WH.jpg" ] </script>
Agregar datos adicionales
Si ya hemos habilitado los vínculos de difusión en nuestro panel. En la entrada que hemos creado, buscamos la pestaña "Vínculos" que se encuentra a nuestra derecha. Al abrirla se nos mostrará lo siguiente:

Guíandonos por la imagen, en el campo "Agregar vínculo" agregamos el siguiente valor: custom.com/{data}, dónde {data} es un valor reservado que se detalla más abajo. En el campo "Agregar tipo MIME", agregamos el valor correspondiente al dato que queremos agregar.
En la siguiente tabla, se detalla los valores válidos para {data}:
data | Uso | Obligatorio |
---|---|---|
title | Es el título del manga/comic del episodio actual | Sí |
episode | Es el texto "Episodio 01" que se visualiza al lado del título | Sí |
episodeName | Es el nombre del episodio actual | No |
dl | Es un valor de tipo object que contiene enlaces de descarga. Este debe contener valores de tipo Array | No |
prev | Es la url al capítulo anterior. | No |
next | Es la url al capítulo siguiente. | No |
Agregar enlaces de descarga
Tomando como guía la sección anterior, en el campo Agregar tipo MIME agregamos el siguiente valor de tipo object:
link: ["#url_enlace1", "#url_enlace2"], linkText: ["Texto para #url_enlace1", "Texto para #url_enlace1"]
Es importante que la longitud del array de link y linkText sean iguales o de lo contrario el código dará errores. La propiedad linkText es opcional y puede ser omitida.
si agregamos todos los valores correctamente, deberiamos tener una estructura similar a la de la imagen:

IMPORTANTE: Al momento de agregar los custom.com, no agregar https:// al inicio.
Créditos
Reader.xml ha sido posible gracias a las siguientes librerías y/o plataformas. Sin estas, este proyecto no existiría.
Librería/plataforma | versión | author | URL/repositorio | |
---|---|---|---|---|
Blogger Code | - | Soraya Lambrechts | página web | |
Karasu-base | v1.2.5 | Karasu (Marcelo) | Repositorio | |
Karasu | v0.1.19 | Karasu (Marcelo) | Repositorio | |
wjs-related | v2.0.6 | zkreations | Repositorio | |
Comments Bundle | v1.0.10 | zkreations | Repositorio | |
Font Awesome Free | 5.8.2 | Font Awesome Team | Repositorio | |
Google Fonts | - | Google LLC | página web |