+++ date = 2022-05-17T15:00:00Z description = "Abridge es un tema Zola rápido y ligero que utiliza html semántico, abridge.css class-light CSS, y No Mandatory JS." draft = false title = "Abridge Tema Zola" updated = 2023-07-21T15:00:00Z [extra] series = "Features" toc = true [taxonomies] tags = [ "Features", "Config", ] +++ Un tema para [Zola](https://getzola.org) rápido, ligero y moderno que utiliza HTML semántico con pocas clases y CSS modular.. Puntuaciones perfectas de [Lighthouse](https://pagespeed.web.dev/report?url=abridge.pages.dev), [YellowLabTools](https://yellowlab.tools/) y [Observatory](https://developer.mozilla.org/en-US/observatory/analyze?host=abridge.pages.dev). Aquí hay una página de [Benchmarks de Zola Themes](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md). ![lighthouse](lighthouse.png) ## Características - Puntuaciones perfectas de [Lighthouse](https://pagespeed.web.dev/report?url=abridge.pages.dev), [YellowLabTools](https://yellowlab.tools/) y [Observatory](https://developer.mozilla.org/en-US/observatory/analyze?host=abridge.pages.dev). - [Soporte PWA](#pwa) (Aplicación Web Progresiva). - Todo JavaScript puede ser [totalmente desactivado](https://abridge.pages.dev/overview-abridge/#javascript-files). - Temas Dark, Light, Auto y Switcher. (colores personalizables, variables css) - [Resaltado de sintaxis de](https://abridge.pages.dev/overview-code-blocks/) código. (colores personalizables, variables css) - Bloques de código numerados con [resaltado de línea](https://abridge.pages.dev/overview-code-blocks/#toml). - Sitio completamente Offline usando el PWA **o** configurando `search_library = "offline"` en `zola.toml`. - Soporte multi-idioma. - Soporte para búsquedas.[(elasticlunr](https://abridge.pages.dev/), [pagefind](https://abridge-pagefind.pages.dev/), [tinysearch](https://abridge-tinysearch.pages.dev/)) - Sugerencias de búsqueda teclas de navegación, `/` focus, `arrow` move, `enter` select, `escape` close. - Página de resultados de búsqueda, escriba la consulta de búsqueda y luego pulse `Enter Key` o `click` el icono del botón de búsqueda. - Soporte[SEO](#seo). (Optimización para motores de búsqueda) - [Paginación](#pagination) con paginador numerado en el índice. - Enlaces al artículo anterior y siguiente en la parte inferior del artículo. - Tabla de Contenidos en el Índice de la página (Opcional, enlaces clicables) - Bloque de Entradas Recientes. (Opcional) - Botón Volver al principio. (sólo usa css) - Botón para copiar bloques de código. - Enlace de correo electrónico en la ofuscación de pie de página. (antispam) - Soporte[KaTeX](https://katex.org/). - [Página de archivo](https://abridge.pages.dev/archive/). - [Etiquetas](https://abridge.pages.dev/tags/). - Categorías. (similar a Etiquetas, desactivado/comentado por defecto) - Enlaces a iconos sociales en el pie de página. - Diseño responsivo. (mobile first) - Códigos cortos de vídeo: [Youtube](https://abridge.pages.dev/video-streaming-sites/overview-embed-youtube/), [Vimeo](https://abridge.pages.dev/video-streaming-sites/overview-embed-vimeo/), [Streamable](https://abridge.pages.dev/video-streaming-sites/overview-embed-streamable/). - Media Components: [video](https://abridge.pages.dev/overview-rich-content/#video), [img](https://abridge.pages.dev/overview-images/#img-component), [imgswap](https://abridge.pages.dev/overview-images/#imgswap-component), [image](https://abridge.pages.dev/overview-rich-content/#image), [gif](https://abridge.pages.dev/overview-rich-content/#gif), [audio](https://abridge.pages.dev/overview-rich-content/#audio). - Otros Components: [showdata](https://abridge.pages.dev/overview-showdata/), [katex](https://abridge.pages.dev/overview-math/#usage-1). ## Usuarios de Windows A continuación utilizo algunos comandos de Linux durante la configuración; para contar con un entorno similar, puedes instalar [Msys2](https://www.msys2.org/). En Msys2, utiliza Shift + Insert para pegar en la terminal; yo prefiero el lanzador UCRT64. ```bash MSYS2 pacman -Syu pacman -S --needed mingw-w64-ucrt-x86_64-git mingw-w64-ucrt-x86_64-zola mingw-w64-ucrt-x86_64-uutils-coreutils rsync ``` ## Inicio rápido Este tema requiere la versión {{}} o posterior de [Zola](https://www.getzola.org/documentation/getting-started/installation/) ```bash git clone https://github.com/jieiku/abridge.git cd abridge zola serve # open http://127.0.0.1:1111/ in the browser ``` ## Instalación El inicio rápido muestra cómo ejecutar el tema directamente. A continuación usaremos abridge como tema para un NUEVO sitio. ### 1: Crear un nuevo sitio zola ```bash yes "" | zola init mysite cd mysite ``` ### 2: Instalar Abridge Añade el tema como un submódulo git: ```bash git init # if your project is a git repository already, ignore this command git submodule add https://github.com/jieiku/abridge.git themes/abridge git submodule update --init --recursive git submodule update --remote --merge ``` O clona el tema en tu directorio de temas: ```bash git clone https://github.com/jieiku/abridge.git themes/abridge ``` ### 3: Configuración Copia algunos archivos del directorio del tema al directorio raíz de tu proyecto: ```bash rsync themes/abridge/.gitignore .gitignore rsync themes/abridge/zola.toml zola.toml rsync themes/abridge/content/_index.md content/ rsync -r themes/abridge/COPY-TO-ROOT-SASS/* sass/ rsync themes/abridge/netlify.toml netlify.toml rsync themes/abridge/package_abridge.js package_abridge.js rsync themes/abridge/package.json package.json ``` - `zola.toml` configuración base con todos los valores de configuración. - `content/_index.md` requerido para establecer la paginación. - `COPY-TO-ROOT-SASS/abridge.scss` overrides para personalizar las variables de Abridge. - `netlify.toml` configuración para desplegar su repo con netlfiy. - `package_abridge.js` node script para: actualizar la lista de archivos de caché en PWA, minify js, bundle js - `package.json` utilizado por node, define scripts y dependencias. Descomenta la línea theme en el zola.toml raíz de tu proyecto: ```bash sed -i 's/^#theme = "abridge"/theme = "abridge"/' zola.toml ``` ### 4: Añadir nuevo contenido Copia el contenido del directorio de temas a tu proyecto o haz un nuevo post: ```bash rsync -r themes/abridge/content . ``` ### 5: Ejecuta el proyecto Simplemente ejecute `zola serve` en la ruta raíz del proyecto: ```bash zola serve ``` Zola iniciará el servidor web dev, accesible por defecto en `http://127.0.0.1:1111`. Los cambios guardados se recargarán en vivo en el navegador. (pulse `ctrl+f5`, o mientras desarrolla configure `pwa=false` en `zola.toml`) ## Paginación {% raw %}{#pagination}{% endraw %} Puede establecer el número de elementos de la página de inicio editando el archivo `content\_index.md` y ajustando `paginate_by` ## Variables Sass Las variables de Abridge SASS pueden ser anuladas editando el archivo `sass\abridge.scss` en la carpeta raíz sass de su proyecto. ### Ancho de página ```scss $mw:75%,// max-width ``` ### Modos de Abridge ```scss $abridgeMode: "switcher",//valid values: switcher, auto, dark, light ``` - switcher: muestra automáticamente una versión oscura o clara dependiendo de la configuración del navegador/OS, y tiene un conmutador de temas javascript en el que el usuario puede hacer clic. - auto: muestra automáticamente una versión oscura o clara dependiendo de la configuración del navegador/OS. - dark: es el tema oscuro siempre. - light: es el tema claro siempre. ### Colores y estilos Puedes especificar qué plantilla de color quieres usar como base: ```scss $color: "orange",// color template to use/override: orange, blue, blueshade ``` A continuación, anule los colores individuales según sea necesario: ```scss /// Dark Colors $f1d: #ccc,// Font Color Primary $f2d: #ddd,// Font Color Headers $c1d: #111,// Background Color Primary $c2d: #222,// Background Color Secondary ... ``` ### Iconos sociales a pie de página Debe configurar qué iconos sociales planea utilizar. (hace que el tamaño del archivo css sea menor) Para simplemente desactivarlos todos puedes configurar `$enable-icons: false` (desactiva TODOS los iconos, navegación, búsqueda, etc.) De lo contrario, active sólo los iconos que necesita, por ejemplo, para el correo se establecería `$icon-mail: true` A continuación, debe desactivar todos los demás iconos que no utilice. ### Tema para visitas noscript Si tiene abridge configurado para utilizar el modo conmutador en lugar de auto/oscuro/luz, su sitio tendrá un botón que permitirá al visitante conmutar el tema. Si su visitante utiliza noscript o algún otro complemento de navegador que bloquee javascript, entonces estará atascado con cualquiera que sea el tema configurado por defecto para el modo conmutador. Para ajustar este modo, debe establecer los siguientes dos valores de configuración en `abridge.scss` **Y** `zola.toml`: ```scss $switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure to also set js_switcher_default in zola.toml) ``` ```toml js_switcher_default = "dark" # default nojs switcher mode: dark, light (make sure to also set $switcherDefault in abridge.scss) ``` Por defecto abridge utiliza el modo oscuro para el conmutador, así que a menos que desee establecer el modo por defecto a la luz para los visitantes nojs/noscript, entonces usted no necesita preocuparse acerca de estos ajustes. ## zola.toml Configuración La mayoría de las opciones en `zola.toml` se documentan por sí mismas. (obvio entre el nombre del valor config y los comentarios) Abridge trabajará con un `zola.toml` barebones porque los valores por defecto se proporcionan en los archivos de plantilla. Recomiendo copiar todo el archivo zola.toml como se indica en el paso 3, ya que proporciona todos los valores configurables. ### Menús superior y pie de página Establezca un campo en `extra` con una clave de `menu` y `menu_footer`. Si desea que el enlace se abra en una nueva pestaña/navegador entonces establezca `blank = true`. tamaño: s150, s140, s130, s120, s110, s95, s90, s85, s80, s75, s70, false(tamaño completo) Si un enlace debe tener una barra al final de la url configure `slash = true`. (generalmente todos los enlaces deben tener una barra al final a menos que sea un enlace de archivo como `sitemap.xml`) ```toml menu = [ {url = "about", name = "About", slash = true, blank = false, size="s110"}, {url = "posts", name = "Posts", slash = true, blank = false, size="s110"}, {url = "categories", name = "Categories", slash = true, blank = false, size="s110"}, {url = "tags", name = "Tags", slash = true, blank = false, size="s110"}, ] menu_footer = [ {url = "about", name = "About", slash = true, blank = false}, {url = "contact", name = "Contact", slash = true, blank = false}, {url = "privacy", name = "Privacy", slash = true, blank = false}, {url = "sitemap.xml", name = "Sitemap", slash = false, blank = true}, ] ``` ### Etiquetas SEO y de cabecera {% raw %}{#seo}{% endraw %} Puede revisar las etiquetas SEO en la component seo ubicada en `templates/components/seo.html`, todos los valores configurables deben estar en `zola.toml` bajo `config.extra` o en los archivos markdown de contenido. En el archivo markdown de su post debe establecer un título de menos de 60 caracteres y una descripción de entre 80 y 160 caracteres de longitud. La descripción es lo que se muestra en los resultados de búsqueda debajo del título de la página. Si no especifica una descripción de página, se utilizará en su lugar el archivo config.description del sitio principal. También debe establecer palabras clave específicas de la página a menos que sus palabras clave definidas en zola.toml sean suficientes, cualquier palabra clave que añada a la página es adicional a las definidas en zola.toml, así que no añada esas mismas palabras clave a sus palabras clave de la página. Opcionalmente, también puede establecer una imagen específica de la página para los resultados de búsqueda utilizando page.extra.thumbnail. Facebook, Twitter y OpenGraph Cards son compatibles (imagen y descripción automáticas para los enlaces publicados). OpenGraph recomienda 1200 x 630 (1,9:1). Twitter recomienda 2:1 para las grandes y 1:1 para las pequeñas. Si no establece una miniatura específica para la página, se utilizará en su lugar el banner definido en zola.toml. Consulta [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) para ver un ejemplo: ```md +++ [extra] thumbnail = "ferris-gesture.png" +++ ``` ### Notación matemática KaTeX KaTeX se puede utilizar para mostrar matemáticas complejas, es una "Rápida composición matemática para la web" Puedes ver una demo en [esta página](https://abridge.pages.dev/overview-math/). Para un mejor rendimiento, recomiendo sólo habilitar las matemáticas en una [base por página en sus archivos post.md](https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13), en lugar de en su archivo zola.toml principal. ### PWA, Aplicación Web Progresiva {% raw %}{#pwa}{% endraw %} Abridge tema tiene soporte PWA. Puede instalar todo el sitio como una aplicación y hacer que funcione sin conexión. Para probarlo simplemente usa google chrome o tu teléfono y ve aquí: [abridge.pages.dev](https://abridge.pages.dev/) Si utilizas Chrome en tu ordenador, busca el botón de instalación al final de la barra de direcciones. En Android debe aparecer una ventana emergente para instalar, también puede instalar desde el menú de 3 puntos en la esquina superior derecha. Una vez instalada la PWA, puedes desconectarte completamente y seguirás pudiendo navegar o buscar en el sitio Hay un script npm para generar la lista de caché de archivos y la minificación `npm run abridge`. Mi archivo [netlify.toml](https://github.com/Jieiku/abridge/blob/master/netlify.toml) ejecuta automáticamente este script npm durante el despliegue del sitio, por lo que todo es automático. Si Zola fuera capaz de crear un archivo js, entonces sería posible generar la lista de archivos de caché dinámicamente durante la compilación en lugar de depender de node/npm. Para utilizar una lista específica de archivos en lugar de todos los archivos de editar la entrada `pwa_BASE_CACHE_FILES` en `zola.toml`. Si incluso un solo archivo en la lista de caché no se encuentra entonces no pre caché de la lista, por lo que sólo la caché a medida que navega. (Si está configurando por primera vez, pruebe sólo con un par de páginas) La función PWA también es fácil de desactivar simplemente configurando `pwa = false` en `zola.toml` ## Optimización del rendimiento ### Archivos Javascript Todo javascript puede ser desactivado en `zola.toml`: ```toml build_search_index = false js_bundle = false js_copycode = false js_email_encode = false js_prestyle = false js_switcher = false pwa = false ``` Estos son los archivos javascript utilizados por Abridge: - search\_index.en.js: índice de búsqueda generado por zola en cada compilación para elasticlunr. - elasticlunr.min.js: biblioteca de búsqueda para la búsqueda del lado del cliente. - search.js: para hacer uso de elasticlunr desde la caja de búsqueda de nuestros sitios tanto para las sugerencias como para la página de resultados. - email.js: utiliza javascript para ofuscar su dirección de correo electrónico real para el icono de correo en la parte inferior de la página. - codecopy.js: añade un botón de copia a los bloques de código, para copiar el contenido del bloque de código al portapapeles. - theme.js: pequeño script para facilitar el almacenamiento local del cambiador de temas. (nunca agrupado, siempre separado) - theme\_button.js: pequeño script para la función de cambio de tema cuando se pulsa el botón de cambio de tema. - prestyle.js: Usado para precargar archivos css `