Agrega una programación semanal de animes en emisión personalizable y automática para tu sitio web

Cuervito.kun
Agrega una programación semanal de animes en emisión personalizable y automática para tu sitio web

Si eres un fan del anime y tienes un sitio dedicado a este. Estoy seguro que se te ha pasado por la cabeza el darle a tus visitantes la programación semanal de cada anime en emisión, pero te has topado con aportes poco compatibles con tu tema o bien desactualizados.

En esta ocasión te traigo un aporte que te permitirá tener una programación semanal de los animes en emisión de forma automática y totalmente actualizable con los animes futuros que vayan estrenando temporada a temporada.

Sin más que decir, ¡vamos a lo bueno!

Características

  • Programación semanal generada automáticamente gracias a la api jikan
  • Variables css para personalizar color y elementos
  • Personalización HTML por medio de templates (Gracias a bloggerUtils)
  • Ligero y de fácil instalación

Instalación

Para este paso a paso tomaremos de ejemplo Blogger, pero puedes perfectamente replicarlo en wordpress o en el gestor de contenido de tu preferencia. Antes que nada recuerda hacer un respaldo en tu sitio en caso de algún inconveniente (No debería pasar nada, pero no está de más prevenir).

Instalar css y js necesarios

Ahora bien, en nuestro panel de blogger debemos buscar la pestaña Tema y luego editar la plantilla desde el botón desplegable Editar HTML. Una vez aquí dentro, debemos buscar la etiqueta </head> y justo por encima de ésta debemos pegar el siguiente código javascript:

<!-- CDN bloggerUtils -->
<script defer='defer' src='https://cdn.jsdelivr.net/npm/blogger-utils/dist/bundle.js'></script>

Ahora sin salir del editor HTML, debemos buscar la etiqueta </body> y justo por encima de esta, pegar este otro código javascript:

<script>
/*!
* Schedules anime list (Javascript)
* version: 1.0
* Author: MarceloTLD (https://github.com/MarceloTLD)
* Release under MIT License
*/
//<![CDATA[
(()=>{async function e(e,t,s,a="{title}"){const i=await async function(e="monday"){const t=`https://api.jikan.moe/v4/schedules?filter=${e}&kids=false`;let s=await fetch(t);return s=await s.json()}(s),{template:n}=bloggerUtils;e.innerHTML="",t.classList.add("is-loaded"),i.data.filter(e=>!i.data[e.mal_id]&&(i.data[e.mal_id]=!0,!0)).forEach(t=>{const s={title:t.title,poster:t.images.jpg.image_url,synopsis:t.synopsis};e.innerHTML+=n(a,s)})}document.addEventListener("DOMContentLoaded",async function(){const t=document.querySelectorAll(".crv\\:schedules__day");if(void 0===window.bloggerUtils)return;const s="undefined"==typeof _SCHEDULES_HTML_TEMPLATE?'<div class="crv:schedules-item">\n        <picture class="crv:schedules-item__image"><img src="{poster}"></picture>\n        <h3 class="crv:schedules-item__title">{title}</h3>\n    </div>':_SCHEDULES_HTML_TEMPLATE;for(const a of[...t]){const t=a.getAttribute("data-day-name");if(t==["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][(new Date).getDay()].toLowerCase()){a.classList.add("is-active");const i=a.querySelector(".crv\\:schedules__entries");await e(i,a,t,s)}}console.log("day"),[...t].forEach(t=>{const a=t.querySelector(".crv\\:schedules__dayName"),i=t.getAttribute("data-day-name");a.addEventListener("click",async function(){t.classList.contains("is-active")?t.classList.remove("is-active"):t.classList.add("is-active"),t.classList.contains("is-loaded")||await e(this.nextElementSibling,t,i,s)})})})})();
//]]></script>

Una vez agregado el código, guardamos los cambios y volvemos a la pestaña Tema en la que estábamos anteriormente.

Ahora, en la pestaña Tema, damos clic en el botón de Personalizar, el cuál nos llevará a la página de personalización de blogger. Aquí debemos buscar la opción “Agregar CSS” y justo al final pegar el siguiente código:

/*!
* Schedules anime list style
* version: 1.0
* Author: MarceloTLD (https://github.com/MarceloTLD)
* Release under MIT License
*/
.crv\:schedules {
  /* CSS Variables */
  --schedules-primary-color: #4f46e5;
  --schedules-text-color: #27272a;
  --schedules-light-color: #f4f4f5;
  --schedules-light-color-darken: #e4e4e7;
  --schedules-font-family: "Inter";
  --schedules-col-width: 160px;
  font-family: var(--schedules-font-family);
}
.crv\:schedules__day.is-active{border-radius:8px;overflow:hidden}.crv\:schedules__day.is-active .crv\:schedules__entries{background:var(--schedules-light-color);display:grid}.crv\:schedules__day.is-active .crv\:schedules__dayName{background:var(--schedules-light-color-darken)}.crv\:schedules__day.is-active .crv\:schedules__dayName svg{transform:rotate(180deg)}.crv\:schedules__dayName{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:1rem;user-select:none;touch-action:auto;color:var(--schedules-text-color);border-bottom:1px solid var(--schedules-light-color)}.crv\:schedules__dayName h2{font-size:18px;font-weight:700}.crv\:schedules__dayName svg{opacity:.5;transition:.3s}.crv\:schedules__entries{display:none;padding:16px;grid-template-columns:repeat(auto-fit,minmax(var(--schedules-col-width),1fr));gap:16px}.crv\:schedules-item{display:flex;flex-direction:column}.crv\:schedules-item__image{width:100%}.crv\:schedules-item__image img{width:100%;object-fit:cover;aspect-ratio:5/7;border-radius:4px}.crv\:schedules-item__title{font-size:14px;font-weight:700;padding:8px}.crv\:schedules__loader{font-size:14px;font-weight:500;color:var(--schedules-text-color)}.crv\:schedules__loader [data-loader]{width:24px;height:24px;border:2px solid transparent;border-top-color:var(--schedules-primary-color);border-radius:50%;display:inline-block;vertical-align:middle;margin-right:12px;animation:1s infinite spinner}@keyframes spinner{from{transform:rotate(-360deg)}to{transform:rotate(0)}}

Guardamos los cambios y ya hemos agregado los estilos y código javascript necesario.

Mostrar programación

Una vez hecho el paso anterior, debemos ir a la pestaña Páginas de nuestro panel de blogger y allí crear una nueva página, en la cuál debemos pegar el siguiente código en modo html:

<div class="crv:schedules">
    <div class="crv:schedules__day" data-day-name="monday">
        <div class="crv:schedules__dayName">
            <h2>Monday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>

    <div class="crv:schedules__day" data-day-name="tuesday">
        <div class="crv:schedules__dayName">
            <h2>Tuesday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>
    <div class="crv:schedules__day" data-day-name="wednesday">
        <div class="crv:schedules__dayName">
            <h2>Wednesday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>
    <div class="crv:schedules__day" data-day-name="thursday">
        <div class="crv:schedules__dayName">
            <h2>Thursday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>
    <div class="crv:schedules__day" data-day-name="friday">
        <div class="crv:schedules__dayName">
            <h2>friday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>
    <div class="crv:schedules__day" data-day-name="saturday">
        <div class="crv:schedules__dayName">
            <h2>saturday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>
    <div class="crv:schedules__day" data-day-name="sunday">
        <div class="crv:schedules__dayName">
            <h2>sunday</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-chevron-down">
                <path d="m6 9 6 6 6-6" />
            </svg>
        </div>
        <div class="crv:schedules__entries">
            <span class="crv:schedules__loader"><i data-loader="loader"></i> Cargando...</span>
        </div>
    </div>
</div>

Guardamos los cambios y ya podremos visualizar la programación semanal en nuestro sitio desde la página que hemos creado.

Personalización

Para que te sea fácil personalizar algunos aspectos del código, he preparado algunas características adicionales que espero te ayuden a personalizar según tus necesidades este aporte.

Variables css

Estas son las variables css que puedes modificar para que puedas personalizar los colores y columnas de los estilos:

Nombre variableExplicaciónvalor
–schedules-primary-colorColor principal#4f46e5
–schedules-text-colorColor para el texto#27272a
–schedules-light-colorColor suave para los contenedores#f4f4f5
–schedules-light-colorColor ligeramente oscuro para contrastar con los contenedores#e4e4e7
–schedules-font-familyNombre de la fuente a usar‘Inter’
–schedules-col-widthTamaño de las columnas160px

Personalizar HTML

He preparado una manera sencilla para que puedas modificar las tarjetas sin mayor problema. Esto gracias a mi librería bloggerUtils que nos proporciona una manera sencilla de crear una plantilla cómo si fuera código html. Ve a tu panel de blogger y busca la pestaña Tema y dale clic al desplegable y presiona sobre el elemento Editar HTML. Aquí debemos buscar la etiqueta </body> y justo por encima de esta, pegar el siguiente código:

<script>
const _SCHEDULES_HTML_TEMPLATE = `
<div>{title}</div>
`;
</script>

El código anterior lo que hará es reemplazar el html por defecto que se utiliza para las tarjetas por el que hemos declarado con la variable _SCHEDULES_HTML_TEMPLATE

Esta plantilla te permitirá utilizar las siguientes llaves que se reemplazarán por el valor correspondiente:

  • {title} Devuelve el título del anime
  • {poster} Devuelve la imagen de portada del anime
  • {synopsis} Devuelve la sinopsis del anime (Solo en inglés)
  • {url} Devuelve la url del anime alojado en myanimelist

Filtrar animes por su id (opcional)

Si tu intención es solo mostrar los animes que existan en tu sitio web, puedes utilizar la variable _SCHEDULES_AVAILABLE_ANIMES para filtrar y obtener únicamente los animes que desees. Dicha variable es de tipo array y cada elemento de esta debe llevar un objeto con la propiedad mal_id (la obtienes de la url del anime) y opcionalmente la propiedad url para obtener una url personalizada (Si no se pasa esta propiedad se usará la de mal en su lugar). Un ejemplo de cómo utilizar ésta variable es la siguiente. Desde el Editor HTML, busca la etiqueta </body> y justo por encima, pega lo siguiente:

<script>
const _SCHEDULES_AVAILABLE_ANIMES = [
    { mal_id: "49458", url: "#url-blog" },
    { mal_id: "51122", url: "#url-blog" },
    { mal_id: "53865", url: "#url-blog" },
    { mal_id: "49889", url: "#url-blog" },
];
</script>

Guarda los cambios y si todo ha ido bien, deberían mostrarse únicamente las entradas que has establecido en la variable _SCHEDULES_AVAILABLE_ANIMES.


Y bueno eso es todo por ahora. Si este aporte te ha sido de utilidad considera apoyar mi trabajo invitándome un café. Tu contribución me permitirá seguir trayendo aportes de este tipo para todos de forma constante. Si crees que éste aporte le puede ser de ayuda a un amigo o conocido, por favor compártelo en tus redes sociales.

Créditos

  • El ícono usado para contraer/expandir las secciones fue extraído de el set de iconos de lucide.
  • La información de los animes se ha extraído gracias a la api Jikan
  • MyAnimeList por servir de fuente y base para la api Jikan