Demostración en codepen Ver repositorio

En esta ocasión les quiero compartir un aporte para los amantes del manga/comic. Se trata de un lector de páginas básico. Espero les guste y sobre todo les sea de utilidad en sus proyectos para esta temática. :)

Instalación

He preparado dos maneras de instalar este aporte, una es como un blog aparte, similar a mi plantilla manganano y su lector de episodios, la única diferencia es que este aporte es más básico y simple. Por otro lado tenemos como opción agregar el html en una entrada para su fácil uso.

Usar como plantilla

Obtener plantilla

Copiamos todo el contenido del enlace Obtener plantilla, ahora nos vamos a blogger y creamos un nuevo blog, luego nos vamos a Tema » editar HTML y borramos todo el contenido de la plantilla por defecto que blogger ha seleccionado y pegamos el contenido que hemos copiado del enlace anterior. Con esto ya tendremos nuestro lector de páginas listo para trabajar.

Publicar entrada

Cada vez que creemos una nueva entrada, debemos agregar el siguiente código:

<!-- Capítulo Anterior/siguiente (URL) -->
<div class="reader-nav">
	<a href="#">Capítulo anterior</a>
	<a href="#">Siguiente capítulo</a>
</div>

<!-- Lista de urls de las páginas a mostrar -->
<script>
	const pages = [
		"...ka...imasu/36409/1.jpg",
		"...ka...imasu/36409/2.jpg",
	]
</script>

El valor de la variable pages debe ser de tipo array y contener una lista de enlaces a imágenes directas (ver ejemplo arriba).

A considerar

  • La plantilla solo cuenta con el estilo para las entradas.
  • No tiene página de inicio ni de búsqueda.

Instalar como entrada

Recuerda hacer una copia de tu plantilla antes de hacer cualquier tipo de modificación sobre esta.

Instalar javascript

En nuestro panel, buscamos la pestaña tema y pinchamos en el ícono de tres puntos, se nos abrirá un menu, elegimos la opción editar HTML. Ahora buscamos la etiqueta </body> y justo por encima de esta, pegamos el siguiente código de javascript:

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
"use strict";
/*!
* simple-reader.js v1.0
* Copyright 2020 Karasu themes
* Developed by Marcelo (github.com/MarceloTLD)
* Licensed under MIT
*/!function(){const e=pages,r=document.querySelector(".reader-pages"),n=document.querySelector(".reader-nav #prev"),t=document.querySelector(".reader-nav #next"),c=document.querySelector(".reader-state #current-page"),d=document.querySelector(".reader-state #total-page"),a=e=>{let r=document.createElement("img");return r.src=e,r};r.appendChild(a(e[0])),d.innerHTML=e.length,(()=>{let d=0;n.addEventListener("click",()=>{d>0&&(d--,r.innerHTML="",r.appendChild(a(e[d])),c.innerHTML=d+1)}),t.addEventListener("click",()=>{d<e.length-1&&(d++,r.innerHTML="",r.appendChild(a(e[d])),c.innerHTML=d+1)})})()}();
//]]></script>
</b:if>

Guardamos los cambios y listo.

instalar css

De nuevo en nuestro panel, volvemos a la pestaña Tema y ahora pinchamos en el botón Personalizar y buscamos la opción Agregar CSS y pegamos el siguiente código:

/*!
* simple-reader.js v1.0
* Copyright 2020 Karasu themes
* Developed by Marcelo (github.com/MarceloTLD)
* Licensed under MIT
*/.reader-control{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:rgba(30,39,46,.8);font-weight:500;padding:8px 0}.reader-control button,.reader-nav a{background:#f5f5f5;color:#1e272e;outline:0;border:0;padding:12px 16px;font-size:14px;border-radius:4px;cursor:pointer;text-decoration:none;transition:all .2s}.reader-control button svg,.reader-nav a svg{width:24px;height:24px}.reader-control button:hover,.reader-nav a:hover{background:#575fcf;color:#fff}.reader-control button{margin-right:8px}.reader-state{padding:8px 16px}.reader-pages{padding:8px 16px}.reader-pages img{width:100%;max-width:100%;border-radius:4px}.reader-nav{padding:8px 16px;display:flex;align-items:center;justify-content:space-between}.reader-nav a{font-weight:500}

Publicar entradas

Ahora al crear una nueva entrada en el modo HTML agregamos el siguiente html:

<div class="reader">
    <!-- Control -->
    <div class="reader-control">
        <!-- Botones para cambiar entre páginas -->
        <div class="reader-nav">
            <button id="prev">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
                </svg>
            </button>
            <button id="next">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
                </svg>
            </button>
        </div>
        <!-- Página actual/total de páginas -->
        <div class="reader-state">
            Página <span id="current-page">1</span>/<span id="total-page">54</span>
        </div>
    </div>

    <!-- Contenedor donde se mostrarán las imagenes -->
    <div class="reader-pages"></div>

    <!-- Capítulo Anterior/siguiente (URL) -->

    <div class="reader-nav">
        <a href="#">Capítulo anterior</a>
        <a href="#">Siguiente capítulo</a>
    </div>

    <!-- Url de las páginas a mostrar -->
    <script>
        const pages = [
            ".../36409/1.jpg"
        ]
    </script>
</div>

Modificamos los valores correspondientes y listo.

Importante Usar siempre el modo html o de lo contrario se puede malograr la estructura html.

Si hemos hecho todo bien, ya podremos disfrutar de un lector de páginas sencillo pero que nos permitirá tener un orden a la hora de publicar nuestros episodios de mangas o comics y no tener todo revuelto. Si te manejas con los feed de blogger, ya te imaginarás todo el potencial que le podrás sacar a este aporte. ;)


Si has llegado hasta aquí te lo agradezco mucho, espero que el aporte te haya sido de utilidad y si es así, por favor te invito a compartirlo en las redes sociales con tus amigos.