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

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

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}:

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.