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.


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
episode Es el texto "Episodio 01" que se visualiza al lado del título
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

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