From 2aa5a83686880e947a6614a42f93550d96b1f87f Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 2 Feb 2025 21:30:23 -0800 Subject: Add and Update Translations --- content/overview-abridge/index.es.md | 443 +++++++++++++++++++++ content/overview-abridge/index.fr.md | 19 +- content/overview-abridge/index.md | 19 +- content/overview-code-blocks.es.md | 407 +++++++++++++++++++ content/overview-code-blocks.fr.md | 39 +- content/overview-code-blocks.md | 37 +- content/overview-images/index.es.md | 150 +++++++ content/overview-images/index.fr.md | 49 ++- content/overview-images/index.md | 31 +- content/overview-markdown-and-style.es.md | 288 ++++++++++++++ content/overview-markdown-and-style.fr.md | 31 +- content/overview-markdown-and-style.md | 60 ++- content/overview-math.es.md | 127 ++++++ content/overview-math.fr.md | 11 + content/overview-math.md | 18 +- content/overview-rich-content/index.es.md | 182 +++++++++ content/overview-rich-content/index.fr.md | 116 ++++-- content/overview-rich-content/index.md | 30 +- content/overview-showdata.es.md | 35 ++ content/overview-showdata.fr.md | 4 +- content/overview-showdata.md | 4 +- content/pages/offline.es.md | 9 + content/pages/offline.pt.md | 9 + content/video-streaming-sites/_index.es.md | 3 +- content/video-streaming-sites/_index.fr.md | 3 +- content/video-streaming-sites/_index.md | 3 +- .../overview-embed-streamable.es.md | 8 +- .../overview-embed-streamable.fr.md | 5 +- .../overview-embed-streamable.md | 5 +- .../overview-embed-vimeo.es.md | 45 +++ .../overview-embed-vimeo.fr.md | 11 +- .../video-streaming-sites/overview-embed-vimeo.md | 11 +- .../overview-embed-youtube.es.md | 44 ++ .../overview-embed-youtube.fr.md | 9 +- .../overview-embed-youtube.md | 9 +- 35 files changed, 2078 insertions(+), 196 deletions(-) create mode 100644 content/overview-abridge/index.es.md create mode 100644 content/overview-code-blocks.es.md create mode 100644 content/overview-images/index.es.md create mode 100644 content/overview-markdown-and-style.es.md create mode 100644 content/overview-math.es.md create mode 100644 content/overview-rich-content/index.es.md create mode 100644 content/overview-showdata.es.md create mode 100644 content/pages/offline.es.md create mode 100644 content/pages/offline.pt.md create mode 100644 content/video-streaming-sites/overview-embed-vimeo.es.md create mode 100644 content/video-streaming-sites/overview-embed-youtube.es.md (limited to 'content') diff --git a/content/overview-abridge/index.es.md b/content/overview-abridge/index.es.md new file mode 100644 index 0000000..5b06119 --- /dev/null +++ b/content/overview-abridge/index.es.md @@ -0,0 +1,443 @@ ++++ +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 [Zola](https://getzola.org) rápido, ligero y moderno que utiliza [abridge.css](https://github.com/Jieiku/abridge.css) (un framework CSS HTML semántico de clase ligera). Puntuaciones perfectas de [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/) y [Observatory](https://developer.mozilla.org/en-US/observatory/analyze?host=abridge.netlify.app). 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.netlify.app), [YellowLabTools](https://yellowlab.tools/) y [Observatory](https://developer.mozilla.org/en-US/observatory/analyze?host=abridge.netlify.app). +- [Soporte PWA](#pwa) (Aplicación Web Progresiva). +- Todo JavaScript puede ser [totalmente desactivado](https://abridge.netlify.app/overview-abridge/#javascript-files). +- Temas Dark, Light, Auto y Switcher. (colores personalizables, variables css) +- [Resaltado de sintaxis de](https://abridge.netlify.app/overview-code-blocks/) código. (colores personalizables, variables css) +- Bloques de código numerados con [resaltado de línea](https://abridge.netlify.app/overview-code-blocks/#toml). +- Sitio completamente Offline usando el PWA **o** configurando `search_library = "offline"` en `config.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.netlify.app/archive/). +- [Etiquetas](https://abridge.netlify.app/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.netlify.app/video-streaming-sites/overview-embed-youtube/), [Vimeo](https://abridge.netlify.app/video-streaming-sites/overview-embed-vimeo/), [Streamable](https://abridge.netlify.app/video-streaming-sites/overview-embed-streamable/). +- Media Shortcodes: [video](https://abridge.netlify.app/overview-rich-content/#video), [img](https://abridge.netlify.app/overview-images/#img-shortcode), [imgswap](https://abridge.netlify.app/overview-images/#imgswap-shortcode), [image](https://abridge.netlify.app/overview-rich-content/#image), [gif](https://abridge.netlify.app/overview-rich-content/#gif), [audio](https://abridge.netlify.app/overview-rich-content/#audio). +- Otros Shortcodes: [showdata](https://abridge.netlify.app/overview-showdata/), [katex](https://abridge.netlify.app/overview-math/#usage-1). + +## Inicio rápido + +Este tema requiere la versión {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" key="min_version" type="toml") }} 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/config.toml config.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 +``` + +- `config.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 config.toml raíz de tu proyecto: + +```bash +sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.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 `config.toml`) + +## Paginación {#pagination} + +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** `config.toml`: + +```scss +$switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure to also set js_switcher_default in config.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. + +## Config.toml Configuración + +La mayoría de las opciones en `config.toml` se documentan por sí mismas. (obvio entre el nombre del valor config y los comentarios) + +Abridge trabajará con un `config.toml` barebones porque los valores por defecto se proporcionan en los archivos de plantilla. + +Recomiendo copiar todo el archivo config.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 {#seo} + +Puede revisar las etiquetas SEO en la macro seo ubicada en `templates/macros/seo.html`, todos los valores configurables deben estar en `config.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 config.toml sean suficientes, cualquier palabra clave que añada a la página es adicional a las definidas en config.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 config.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.netlify.app/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 config.toml principal. + +### PWA, Aplicación Web Progresiva {#pwa} + +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.netlify.app](https://abridge.netlify.app/) + +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 `config.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 `config.toml` + +## Optimización del rendimiento + +### Archivos Javascript + +Todo javascript puede ser desactivado en `config.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 ` + +## Bloques de código + +Bloques de código.. ❤️ con resaltado automático de sintaxis ✨‍ + +Consulte las opciones en [la documentación](https://www.getzola.org/documentation/content/syntax-highlighting/). + +### Bloque de código en línea + +Si queremos, también podemos `specify inline code` que es útil para `the small stuff`. + +### Rust + +```rust +fn main() { + let greetings = ["Hello", "Hola", "Bonjour", + "Ciao", "こんにちは", "안녕하세요", + "Cześć", "Olá", "Здравствуйте", + "Chào bạn", "您好", "Hallo", + "Hej", "Ahoj", "سلام", + "Hej", "Hallo", "Hei", + "Helló", "Hallo", "Buna ziua", + "Merhaba"]; + + for (num, greeting) in greetings.iter().enumerate() { + print!("{} : ", greeting); + match num { + 0 => println!("This code is editable and runnable!"),//en English + 1 => println!("¡Este código es editable y ejecutable!"),//es Spanish + 2 => println!("Ce code est modifiable et exécutable !"),//fr French + 3 => println!("Questo codice è modificabile ed eseguibile!"),//it Italian + 4 => println!("このコードは編集して実行出来ます！"),//jp Japanese + 5 => println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),//ko Korean + 6 => println!("Ten kod można edytować oraz uruchomić!"),//pl Polish + 7 => println!("Este código é editável e executável!"),//pt Portuguese + 8 => println!("Этот код можно отредактировать и запустить!"),//ru Russian + 9 => println!("Bạn có thể edit và run code trực tiếp!"),//vi Vietnamese + 10 => println!("这段代码是可以编辑并且能够运行的！"),//zh Chinese + 11 => println!("Dieser Code kann bearbeitet und ausgeführt werden!"),//de German + 12 => println!("Den här koden kan redigeras och köras!"),//sv Swedish + 13 => println!("Tento kód můžete upravit a spustit"),//cs Czech + 14 => println!("این کد قابلیت ویرایش و اجرا دارد!"),//fa Persian + 15 => println!("Denne kode kan redigeres og køres!"),//da Danish + 16 => println!("Deze code is bewerkbaar en uitvoerbaar!"),//du Dutch + 17 => println!("Tämä koodi on muokattavissa ja ajettavissa!"),//fi Finnish + 18 => println!("Ez a kód szerkeszthető és futtatható!"),//hu Hungarian + 19 => println!("Denne koden er redigerbar og kjørbar!"),//no Norwegian + 20 => println!("Acest cod este editabil și rulabil!"),//ro Romanian + 21 => println!("Bu kod düzenlenebilir ve çalıştırılabilir!"),//tr Turkish + _ => {}, + } + } +} +``` + +### TOML + +```toml,linenos,hl_lines=3 +base_url = "https://abridge.netlify.app/" +title = "Abridge" +description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." +default_language = "en" +#theme = "abridge" + +build_search_index = true +minify_html = false +feed_filename = "atom.xml" +taxonomies = [ + {name = "categories", feed = true}, + {name = "tags", feed = true}, +] +``` + +### Bash + +```bash,hl_lines=5 +#!/bin/bash +for d in /sys/kernel/iommu_groups/*/devices/*; do + n=${d#*/iommu_groups/*}; n=${n%%/*} + printf 'IOMMU Group %s ' "$n" + lspci -nns "${d##*/}" +done +``` + +### HTML + +```html + + + + + Example HTML5 Document + + + +

Test

+ + +``` + +### CSS + +```css +html { + font-size: var(--fs); +} + +.c { + text-align: center; +} +``` + +### SCSS + +```scss + +$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default; +$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default; + +@mixin font { + // convert space separated list to comma separated list + $font: list.join($font, "", $separator: comma); + $font: functions.remove($font, ""); + $font-mono: list.join($font-mono, "", $separator: comma); + $font-mono: functions.remove($font-mono, ""); + + $font: functions.font-var($font, $fontExt-Main, $findFont-Main); + $font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code); + + #{--ff}: $font; + #{--fm}: $font-mono;//code +} +``` + +### Javascript + +```javascript +function closeSearch() {//close the search displaying the regular page. + const e = document.querySelector("main"); + e.innerHTML = window.main +} + +function goSearch() {// on enter key or search icon click display results to the page. + const e = document.querySelector("main"); + window.main || (window.main = e.innerHTML); + var t = document.getElementById("suggestions"), + n = ((ResultsClone = t.cloneNode(!0)).id = "results", document.createElement("div")), + o = '

'.concat(document.getElementById("searchinput").value, "

"); + return n.innerHTML = o, ResultsClone.insertBefore(n, ResultsClone.firstChild), e.innerHTML = ResultsClone.outerHTML, t.innerHTML = "", document.getElementById("searchinput").value = "", !1 +}! function() { + // search function code goes here +} +``` + +### PHP + +```php +getAll(); + +if ($_SERVER['REQUEST_METHOD'] == "POST") { + if (!isset($_SESSION['PFA_token'])) { + die("Invalid token (session timeout; refresh the page and try again?)"); + } + $fUsername = trim(safepost('fUsername')); + if ($lang != check_language(false)) { # only set cookie if language selection was changed + setcookie('lang', $lang, time() + 60*60*24*30); # language cookie, lifetime 30 days + } +} + +$_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); + +/* vim: set expandtab softtabstop=4 tabstop=4 shiftwidth=4: */ +``` + +### Json + +```json +{ + "name": "Abridge Zola Theme", + "short_name": "Abridge", + "description": "Fast & Lightweight Zola Theme", + "start_url": "/index.html", + "scope": "/", + "background_color": "#111111", + "theme_color": "#222222", + "display": "standalone", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "/android-chrome-192x192m.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + } + ] +} +``` + +### SQL + +```sql +-- jelly-actix-web-starter - Creates an accounts table, along with some associated helpers. + +create or replace function update_timestamp() returns trigger as $$ +begin + new.updated = now(); + return new; +end; +$$ language 'plpgsql'; + +create table if not exists accounts ( + id serial primary key, + name text not null, + email text not null unique, + password text not null, + profile jsonb not null default '{}', + plan integer not null default 0, + is_active boolean not null default true, + is_admin boolean not null default false, + has_verified_email boolean not null default false, + last_login timestamp with time zone, + created timestamp with time zone not null default now(), + updated timestamp with time zone not null default now() +); + +create unique index accounts_unique_lower_email_idx on accounts (lower(email)); + +create trigger user_updated before insert or update on accounts +for each row execute procedure update_timestamp(); +``` + +### Lua + +```lua +function square(x) + return x * x +end + +print(square(2)) -- prints '4' + +function getPlayerInformation() + playerName = UnitName("player") + playerLevel = UnitLevel("player") + specId, specName = GetSpecializationInfo(GetSpecialization()) + + return "Hey, I'm " .. playerName .. " (Level " .. playerLevel .. "). I'm currently in spec " .. specName .. "." +end + +print(getPlayerInformation()) +``` + +### C + +```c +#include +int main() { + int a; + /* actual initialization */ + a = 10; + printf("Hello, World!"); + return 0; +} +``` + +### C++ + +```cpp +// Your First C++ Program + +#include + +int main() { + int a; + /* actual initialization */ + a = 10; + std::cout << "Hello World!"; + return 0; +} +``` + +### Go + +```go +package main + +import "fmt" + +func main() { + var myvariable1 = 20 + var myvariable2 = "hello world" + fmt.Println("hello world") +} +``` + +### Python + +```python +#!/usr/bin/env python3 +import smtplib, socket +from influxdb import InfluxDBClient + +while True: + send = 1 + later = time.time() + 25200 + iso = time.ctime(later) + tempF = round(bme280.temperature * 1.8 + 29, 3) #C to F formula is +32, difference is to correct bme280 temperature offset + humidity = round(bme280.humidity, 3) + pressure = round(bme280.pressure, 3) + # serialize data as JSON + data = [ + { + "measurement": measurement, + "tags": { + "location": location, + }, + "time": iso, + "fields": { + "temperature" : tempF, + "humidity": humidity, + "pressure": pressure + } + } + ] + # Send the JSON data to InfluxDB + try: + client.write_points(data) + except socket.error as e: + print("Could Not Connect to InfluxDB!") + if tempF > 90 and humidity > 55: + emailSubject = "Humidity>55: " + str(int(humidity)) + "%H , Temperature>90: " + str(int(tempF)) + "F" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F Dashboard' + elif humidity > 55: + emailSubject = "Humidity>55: " + str(int(humidity)) + "%H" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F Dashboard' + elif tempF > 90: + emailSubject = "Temperature>90: " + str(int(tempF)) + "F" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F Dashboard' + else: + send = 0 + if send == 1: + try: + if time.time() > lastEmailTime or abs(lastTemp-int(tempF)) > 1: + lastEmailTime = time.time()+emailInterval + lastTemp = int(tempF) + sender.sendmail('jake@example.com', emailSubject, emailContent) + except socket.error as e: + print("Could Not Connect to SMTP server!") + time.sleep(interval) +``` + +### Ruby + +```ruby +=begin + Ruby program to check whether the + year is leap year or not between range. +=end + +puts "Enter the lower limit:" +lwr = gets.chomp.to_i +puts "Enter the upper limit:" +upr = gets.chomp.to_i + +for yr in lwr..upr do + if yr % 400 == 0 + puts "#{yr} is a leap year" + elsif yr % 4 == 0 && yr % 100 !=0 + puts "#{yr} is a leap year" + else + puts "#{yr} is not a leap year" + end +end +``` diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md index 0a40e4e..1263d05 100644 --- a/content/overview-code-blocks.fr.md +++ b/content/overview-code-blocks.fr.md @@ -30,6 +30,7 @@ Voir [les docs](https://www.getzola.org/documentation/content/syntax-highlightin Si nous voulons, nous pouvons aussi `spécifier le code en ligne` ce qui est utile pour `les petites choses`. ### Rust + ```rust fn main() { let greetings = ["Hello", "Hola", "Bonjour", @@ -72,21 +73,12 @@ fn main() { } ``` -### Bash -```bash -#!/bin/bash -for d in /sys/kernel/iommu_groups/*/devices/*; do - n=${d#*/iommu_groups/*}; n=${n%%/*} - printf 'IOMMU Group %s ' "$n" - lspci -nns "${d##*/}" -done -``` - ### TOML + ```toml,linenos,hl_lines=3 base_url = "https://abridge.netlify.app/" title = "Abridge" -description = "Abridge est un thème Zola rapide et léger utilisant le HTML sémantique, le CSS abridge.css class-light et aucun JS obligatoire." +description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." default_language = "en" #theme = "abridge" @@ -99,7 +91,19 @@ taxonomies = [ ] ``` +### Bash + +```bash,hl_lines=5 +#!/bin/bash +for d in /sys/kernel/iommu_groups/*/devices/*; do + n=${d#*/iommu_groups/*}; n=${n%%/*} + printf 'IOMMU Group %s ' "$n" + lspci -nns "${d##*/}" +done +``` + ### HTML + ```html @@ -115,6 +119,7 @@ taxonomies = [ ``` ### CSS + ```css html { font-size: var(--fs); @@ -126,6 +131,7 @@ html { ``` ### SCSS + ```scss $font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default; @@ -147,6 +153,7 @@ $font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe ``` ### Javascript + ```javascript function closeSearch() {//close the search displaying the regular page. const e = document.querySelector("main"); @@ -166,6 +173,7 @@ function goSearch() {// on enter key or search icon click display results to the ``` ### PHP + ```php int main() { @@ -286,6 +297,7 @@ int main() { ``` ### C++ + ```cpp // Your First C++ Program @@ -301,6 +313,7 @@ int main() { ``` ### Go + ```go package main @@ -314,6 +327,7 @@ func main() { ``` ### Python + ```python #!/usr/bin/env python3 import smtplib, socket @@ -369,6 +383,7 @@ while True: ``` ### Ruby + ```ruby =begin Ruby program to check whether the diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md index 5d0f19f..0d1728d 100644 --- a/content/overview-code-blocks.md +++ b/content/overview-code-blocks.md @@ -30,6 +30,7 @@ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting If we want, we can also `specify inline code` which is useful for `the small stuff`. ### Rust + ```rust fn main() { let greetings = ["Hello", "Hola", "Bonjour", @@ -72,17 +73,8 @@ fn main() { } ``` -### Bash -```bash,hl_lines=5 -#!/bin/bash -for d in /sys/kernel/iommu_groups/*/devices/*; do - n=${d#*/iommu_groups/*}; n=${n%%/*} - printf 'IOMMU Group %s ' "$n" - lspci -nns "${d##*/}" -done -``` - ### TOML + ```toml,linenos,hl_lines=3 base_url = "https://abridge.netlify.app/" title = "Abridge" @@ -99,7 +91,19 @@ taxonomies = [ ] ``` +### Bash + +```bash,hl_lines=5 +#!/bin/bash +for d in /sys/kernel/iommu_groups/*/devices/*; do + n=${d#*/iommu_groups/*}; n=${n%%/*} + printf 'IOMMU Group %s ' "$n" + lspci -nns "${d##*/}" +done +``` + ### HTML + ```html @@ -115,6 +119,7 @@ taxonomies = [ ``` ### CSS + ```css html { font-size: var(--fs); @@ -126,6 +131,7 @@ html { ``` ### SCSS + ```scss $font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default; @@ -147,6 +153,7 @@ $font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe ``` ### Javascript + ```javascript function closeSearch() {//close the search displaying the regular page. const e = document.querySelector("main"); @@ -166,6 +173,7 @@ function goSearch() {// on enter key or search icon click display results to the ``` ### PHP + ```php int main() { @@ -286,6 +297,7 @@ int main() { ``` ### C++ + ```cpp // Your First C++ Program @@ -301,6 +313,7 @@ int main() { ``` ### Go + ```go package main @@ -314,6 +327,7 @@ func main() { ``` ### Python + ```python #!/usr/bin/env python3 import smtplib, socket @@ -369,6 +383,7 @@ while True: ``` ### Ruby + ```ruby =begin Ruby program to check whether the diff --git a/content/overview-images/index.es.md b/content/overview-images/index.es.md new file mode 100644 index 0000000..0f26e78 --- /dev/null +++ b/content/overview-images/index.es.md @@ -0,0 +1,150 @@ ++++ +date = 2021-05-19T15:00:00Z +description = "Las imágenes pueden incrustarse directamente usando markdown `![Ferris](ferris.svg)`, pero usando un shortcode se evita CLS al establecer explícitamente la anchura y la altura." +draft = false +title = "Códigos cortos de imagen" + +[extra] +keywords = "Image, Markdown, Shortcodes, Swap" +series = "Features" +thumbnail = "ferris-gesture.png" +toc = true + +[taxonomies] +tags = [ + "Features", + "Shortcodes", + "Images", +] ++++ +Este post cubre los **shortcodes imgswap e img**. Las imágenes también se pueden incrustar directamente utilizando markdown `![Ferris](ferris.svg)`, pero es mejor utilizar un código corto para que pueda establecer explícitamente la anchura y la altura, esto ayudará a evitar el cambio de diseño de contenido que mejora la experiencia del usuario y la puntuación de Google Lighthouse. + + + +# código corto img + +- src es la ruta y el nombre de archivo de la imagen. (obligatorio) +- class establece una clase para la imagen. +- alt establece la nota alt para la imagen. +- caption establece el texto del título debajo de la imagen. +- link establece un hipervínculo para la imagen. +- w es el ancho de la imagen. +- h es la altura de la imagen. + +Clases opcionales: + +- ci se puede utilizar para centrar la imagen. +- fr se puede utilizar para flotar la imagen a la derecha. +- fl se puede utilizar para flotar la imagen a la izquierda. +- b1 se puede utilizar para añadir un borde de 1px. + +*google lighthouse recomienda establecer los atributos alt, w y h. Si se omite alt, se utiliza el nombre del archivo. Si se omiten w o h entonces get\_image\_metadata() rellena estos valores.* + +## Uso (misma ruta) + +```rs +{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}} +``` + +**Salida** + +```html +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} +``` + +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} + +## Uso (ruta relativa ./) + +```rs +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}} +``` + +**Salida** + +```html +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} +``` + +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} + +## Uso (ruta raíz /) + +```rs +{{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}} +``` + +**Salida** + +```html +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} +``` + +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} + +# Imagen SVG directamente en el código + +```html + +``` + + + +# código corto imgswap + +Por defecto main\_src es la imagen mostrada, swap\_src se muestra al pasar el ratón por encima. + +Al pasar el ratón sobre la imagen se mostrará la imagen a comparar. + +- main\_src es la ruta y el nombre de archivo de la imagen por defecto. (obligatorio) +- swap\_src es la ruta y el nombre de archivo de la imagen de intercambio. (obligatorio) +- class establece una clase para la imagen. +- alt establece la nota alt para la imagen. +- caption establece el texto del título debajo de la imagen. +- link establece un hipervínculo para la imagen. +- w es el ancho de la imagen. +- h es la altura de la imagen. + +*google lighthouse recomienda establecer los atributos alt, w y h. Si se omite alt, se utiliza el nombre del archivo. Si se omiten w o h entonces get\_image\_metadata() rellena estos valores.* + +## Uso (misma ruta) + +```rs +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} +``` + +**Salida** + +```html +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} +``` + +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} + +## Uso (ruta relativa ./) + +```rs +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}} +``` + +**Salida** + +```html +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} +``` + +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} + +## Uso (ruta raíz /) + +```rs +{{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}} +``` + +**Salida** + +```html +{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} +``` + +{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index d81dcaf..ad77bf9 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -38,44 +38,57 @@ Cours optionnels: - fl peut être utilisé pour faire flotter l'image vers la gauche. - b1 peut être utilisé pour ajouter une bordure de 1px. -** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. ** +*google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs.* ## Utilisation (même chemin) + ```rs -{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") */}} +{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html -{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }} +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ``` -{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }} + +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ## Utilisation (chemin relatif ./) + ```rs -{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" caption="Ferris" link="https://www.rust-lang.org/") */}} +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html -{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" caption="Ferris" link="https://www.rust-lang.org/") }} +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ``` -{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" caption="Ferris" link="https://www.rust-lang.org/") }} + +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ## Utilisation (chemin racine /) + ```rs -{{/* img(src="/images/ferris.svg" alt="Ferris le Rustacé") */}} +{{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}} ``` + **Sortir** + ```html -{{ img(src="/images/ferris.svg" alt="Ferris le Rustacé") }} +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} ``` -{{ img(src="/images/ferris.svg" alt="Ferris le Rustacé") }} + +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} # Image SVG directement dans le code + ```html ``` - + # imgswap Shortcode @@ -92,34 +105,46 @@ Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche. - w est la largeur de l'image. - h est la hauteur de l'image. -** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. ** +*google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs.* ## Utilisation (même chemin) + ```rs {{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} ``` + **Sortir** + ```html {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ``` + {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ## Utilisation (chemin relatif ./) + ```rs {{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}} ``` + **Sortir** + ```html {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ## Utilisation (chemin racine /) + ```rs {{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}} ``` + **Sortir** + ```html {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 05c45e5..c3cfd03 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -38,44 +38,57 @@ Optional Classes: - fl can be used to float the image left. - b1 can be used to add a 1px border. -** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. ** +*google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values.* ## Usage (same path) + ```rs {{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html {{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ``` + {{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ## Usage (relative path ./) + ```rs {{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html {{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ``` + {{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ## Usage (root path /) + ```rs {{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}} ``` + **Output** + ```html {{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} ``` + {{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} # SVG image directly in code + ```html ``` - + # imgswap Shortcode @@ -92,34 +105,46 @@ When you hover your mouse over the image it will display the image to compare. - w is the width of the image. - h is the height of the image. -** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. ** +*google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values.* ## Usage (same path) + ```rs {{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} ``` + **Output** + ```html {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ``` + {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ## Usage (relative path ./) + ```rs {{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}} ``` + **Output** + ```html {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ## Usage (root path /) + ```rs {{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}} ``` + **Output** + ```html {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} diff --git a/content/overview-markdown-and-style.es.md b/content/overview-markdown-and-style.es.md new file mode 100644 index 0000000..e0c0534 --- /dev/null +++ b/content/overview-markdown-and-style.es.md @@ -0,0 +1,288 @@ ++++ +date = 2022-05-15T15:00:00Z +description = "Artículo de ejemplo que muestra la sintaxis básica de Markdown y el formato de los elementos HTML." +draft = false +title = "Markdown y estilo" + +[extra] +keywords = "Markdown, Style, Syntax, Syntax Highlighting" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Markdown", +] ++++ +Este artículo ofrece una muestra de la sintaxis básica de Markdown que puede utilizarse en los archivos de contenido de Zola, también muestra si los elementos HTML básicos se decoran con CSS en un tema de Zola. + + + +# Encabezados + +Los siguientes elementos HTML `

`-`

` representan seis niveles de encabezados de sección. `

` es el nivel de sección más alto, mientras que `

` es el más bajo. + +# H1 + +## H2 + +### H3 + +#### H4 + +##### H5 + +###### H6 + +# Párrafo + +Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. + +¿Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. + +# Blockquotes + +El elemento blockquote representa contenido citado de otra fuente, opcionalmente con una cita que debe estar dentro de un elemento `footer` o `cite`, y opcionalmente con cambios en línea como anotaciones y abreviaturas. + +## Blockquote sin atribución + +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Tenga en cuenta** que puede utilizar *la sintaxis Markdown* dentro de un blockquote. + +## Blockquote atribución + +> No comuniques compartiendo memoria, comparte memoria comunicando.
+> — Rob Pike[^1] + +> Todos los hombres desean saber por naturaleza.
+> ― Aristotle[^2] + +> El poder surge como respuesta a una necesidad, no a un deseo.
+> — *Goku* + +> Adapta lo que es útil, rechaza lo que es inútil y añade lo que es específicamente tuyo.
+> — *Bruce Lee* + +# Tablas + +Las tablas no forman parte de las especificaciones básicas de Markdown, pero Zola las soporta desde el principio. + +| Nombre | Edad | +| ------ | ---- | +| Alice | 23 | +| Bob | 27 | +| Cody | 33 | +| John | 59 | +| Kerry | 23 | + +## Tabla Inline Markdown + +| Cursiva | Negrita | Código | Tachado | +| --------- | ----------- | ------ | --------- | +| *cursiva* | **negrita** | `code` | ~tachado~ | + +## Tabla grande dentro de una figura + +Rodee las tablas muy grandes con `
` para que puedan desplazarse horizontalmente. + +
+ +| **Fabricante** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| **Ingresos $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 | + +
+ +*valores de ingresos encontrados en el motor de búsqueda y no verificados, sólo para fines de demostración de la tabla de desplazamiento de figuras.* + +# Texto plegable + +
+ Title 1 +

IT'S A SECRET TO EVERYBODY.

+
+ +
+ Title 2 +

Stay awhile, and listen!

+
+ +# Bloques de código + +Bloques de código.. ❤️ con resaltado automático de sintaxis ✨‍ + +Consulte las opciones en [la documentación](https://www.getzola.org/documentation/content/syntax-highlighting/). + +## Bloque de código con backticks + +```html + + + + + Ejemplo de documento HTML5 + + +

Prueba

+ + +``` + +## Números de línea, destacados + +```html,linenos,hl_lines=5 7-9 + + + + + Ejemplo de documento HTML5 + + +

Prueba

+ + +``` + +## Bloque de código en línea + +Si queremos, también podemos `specify inline code` que es útil para `the small stuff`. + +# Tipos de lista + +## Lista ordenada + +1. Primer elemento +2. Segundo elemento +3. Tercer elemento + +## Lista desordenada + +- Elemento de lista +- Otro elemento +- Y otro elemento + +## Lista anidada + +- Fruta + - Manzana + - Naranja + - Plátano +- Lácteos + - Leche + - Queso + +# Otros elementos - abbr, sub, sup, kbd, mark, link + +GIF es un formato de imagen de mapa de bits. + +H2O + +Xn + Yn = Zn + +Pulse CTRL+ALT+Supr para finalizar la sesión. + +La mayoría de las salamandras son nocturnas y cazan insectos, gusanos y otras criaturas pequeñas. + +----- + + +\[^1\]: La cita anterior es un extracto de la [charla](https://www.youtube.com/watch?v=PAAkCSZUG1c) de Rob Pike durante el Gopherfest, el 18 de noviembre de 2015. + +\[^2\]: La cita es la primera frase de la [Metafísica](https://en.wikipedia.org/wiki/Metaphysics_\(Aristotle\)) de Aristóteles. + +## Navegadores + +Menú principal del sitio se crea mediante la anidación de la nav bajo una etiqueta de encabezado. Consulte la parte superior de este sitio para ver un ejemplo. La navegación es adaptativa, reduzca el ancho de la página para verla en acción. + +## Formularios + +
+

+ +

+

+ +

+

+ +

+
+

+
+ + + + +
+ Size + + + + +
+ +
+ + +
+ +
+ + +
+
+ +

+ + + + + + + + + + +
diff --git a/content/overview-markdown-and-style.fr.md b/content/overview-markdown-and-style.fr.md index 75f4de7..c60c2c0 100644 --- a/content/overview-markdown-and-style.fr.md +++ b/content/overview-markdown-and-style.fr.md @@ -21,14 +21,18 @@ Cet article propose un exemple de syntaxe Markdown de base pouvant être utilis # Rubriques -Les éléments HTML `

`—`

` suivants représentent six niveaux d'en-têtes de section. -`

` est le niveau de section le plus élevé alors qu'il `

` est le plus bas. +Les éléments HTML `

`—`

` suivants représentent six niveaux d'en-têtes de section. `

` est le niveau de section le plus élevé alors qu'il `

` est le plus bas. # H1 + ## H2 + ### H3 + #### H4 + ##### H5 + ###### H6 # Paragraphe @@ -64,13 +68,13 @@ L'élément blockquote représente le contenu qui est cité à partir d'une autr Les tables ne font pas partie de la spécification principale de Markdown, mais Zola les prend en charge prêtes à l'emploi. - Nom | Âge ---------|------ - Alice | 23 - Bob | 27 - Cody | 33 - John | 59 - Kerry | 23 +| Nom | Âge | +| ----- | --- | +| Alice | 23 | +| Bob | 27 | +| Cody | 33 | +| John | 59 | +| Kerry | 23 | ## Tableau avec Markdown en ligne @@ -78,10 +82,10 @@ Les tables ne font pas partie de la spécification principale de Markdown, mais | -------- | -------- | ------ | ----------------- | | *italique* | **gras** | `code` | ~~barré~~ | - ## Grand tableau dans l'étiquette de la figure Entourez les très grandes tables `
` pour qu'elles puissent défiler horizontalement. +
| **Fabricant** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac | @@ -89,6 +93,7 @@ Entourez les très grandes tables `
` pour qu'elles puissent dé | **Revenu $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
+ *valeurs de revenus trouvées sur le moteur de recherche et non vérifiées, uniquement à des fins de démonstration du tableau de défilement des figures.* # Texte pliable @@ -179,10 +184,10 @@ Appuyez sur pour terminer la session. CTRL+ALT+D La plupart salamanders sont nocturnes et chassent les insectes, les vers et autres petites créatures. ---- +----- -[^1]: La citation ci-dessus est extraite du [discours](https://www.youtube.com/watch?v=PAAkCSZUG1c) -de Rob Pike lors du Gopherfest, le 18 novembre 2015. + +[^1]: La citation ci-dessus est extraite du [discours](https://www.youtube.com/watch?v=PAAkCSZUG1c) de Rob Pike lors du Gopherfest, le 18 novembre 2015. [^2]: La citation est la première phrase de [la Métaphysique](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)) d'Aristotle. diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md index 479eb85..2e3aef8 100644 --- a/content/overview-markdown-and-style.md +++ b/content/overview-markdown-and-style.md @@ -21,37 +21,29 @@ This article offers a sample of basic Markdown syntax that can be used in Zola c # Headings -The following HTML `

`—`

` elements represent six levels of section -headings. `

` is the highest section level while `

` is the lowest. +The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. # H1 + ## H2 + ### H3 + #### H4 + ##### H5 + ###### H6 # Paragraph -Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, -voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma -dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as -cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin -porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? -Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit -ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda -veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore -eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata -tiustia prat. +Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. -Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne -sapicia is sinveli squiatum, core et que aut hariosam ex eat. +Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. # Blockquotes -The blockquote element represents content that is quoted from another source, -optionally with a citation which must be within a `footer` or `cite` element, -and optionally with in-line changes such as annotations and abbreviations. +The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. ## Blockquote no attribution @@ -74,27 +66,26 @@ and optionally with in-line changes such as annotations and abbreviations. # Tables -Tables aren't part of the core Markdown spec, but Zola supports them -out-of-the-box. +Tables aren't part of the core Markdown spec, but Zola supports them out-of-the-box. - Name | Age ---------|------ - Alice | 23 - Bob | 27 - Cody | 33 - John | 59 - Kerry | 23 +| Name | Age | +| ----- | --- | +| Alice | 23 | +| Bob | 27 | +| Cody | 33 | +| John | 59 | +| Kerry | 23 | ## Table Inline Markdown | Italics | Bold | Code | StrikeThrough | -| -------- | -------- | ------ | ----------------- | +| --------- | -------- | ------ | ----------------- | | *italics* | **bold** | `code` | ~~strikethrough~~ | - ## Large table within figure Surround very Large tables with `
` so they can scroll horizontally. +
| **Manufacturer** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac | @@ -102,6 +93,7 @@ Surround very Large tables with `
` so they can scroll horizonta | **Revenue $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
+ *revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.* # Foldable Text @@ -188,16 +180,14 @@ H2O Xn + Yn = Zn -Press CTRL+ALT+Delete to end the -session. +Press CTRL+ALT+Delete to end the session. -Most salamanders are nocturnal, and hunt for insects, worms, and -other small creatures. +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. ---- +----- -[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) -during Gopherfest, November 18, 2015. + +[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. [^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)). diff --git a/content/overview-math.es.md b/content/overview-math.es.md new file mode 100644 index 0000000..d2307cd --- /dev/null +++ b/content/overview-math.es.md @@ -0,0 +1,127 @@ ++++ +date = 2021-05-05T15:00:00Z +description = "Artículo de ejemplo que muestra la visualización de notaciones matemáticas, posible gracias a la biblioteca KaTeX." +draft = false +title = "Notación matemática" +updated = 2022-01-01T15:00:00Z + +[extra] +keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" +math = true +math_auto_render = true +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Shortcodes", + "Mathematics", +] ++++ +Puede utilizar [KaTeX](https://katex.org) para representar notaciones matemáticas. + +Puede activar el soporte $\\KaTeX$ globalmente, por sección o por página. + + + +## Habilitar globalmente + +Para habilitar el soporte $\\KaTeX$ globalmente, añada `math = true` bajo `[extra]` del `config.toml` +en la raíz de su sitio. También puede añadir `math_auto_render = true` +y cada sección y página de su sitio cargará la [extensión](https://katex.org/docs/autorender.html) KaTeX [autorender](https://katex.org/docs/autorender.html). + +```toml +[extra] +math = true +math_auto_render = false +``` + +## Base por sección + +Para habilitar el soporte $\\KaTeX$ en una sección en particular, añada `math = true` bajo `[extra]` en el `[SECTION_NAME]/_index.md`. +Ahora el shortcode katex será renderizado, también puede añadir `math_auto_render = true` +y la sección de su sitio cargará la [extensión](https://katex.org/docs/autorender.html) KaTeX [autorender](https://katex.org/docs/autorender.html). + +```toml ++++ +[extra] +math = true ++++ +``` + +## Por página + +Para habilitar el soporte $\\KaTeX$ en una página en particular, añada `math = true` bajo `[extra]` en el frontmatter +de la página. Ahora el shortcode katex será renderizado, también puede añadir `math_auto_render = true` +y la página de su sitio cargará la [extensión](https://katex.org/docs/autorender.html) KaTeX [autorender](https://katex.org/docs/autorender.html). + +```toml ++++ +[extra] +math = true +math_auto_render = true ++++ +``` + +Es una buena práctica habilitar el soporte $\\KaTeX$ por página, ya que esto sólo cargará los archivos requeridos en esa página en particular, sin afectar la velocidad de carga de otras páginas. Si su sitio no es muy matemático, por favor NO habilite esta característica globalmente o por sección. + +## Uso + +Envuelva cualquier sintaxis $\\KaTeX$ [válida](https://katex.org/docs/supported.html) con `$...$` para Matemáticas en línea y `$$...$$` para Matemáticas en bloque. + +### Matemáticas en línea + +Esta es la ecuación más bonita que he visto nunca: + +### Uso + +```rs +{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} +``` + +### Salida + +```html +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} +``` + +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} + +### Matemáticas en bloque + +Un poco de Matemáticas en modo visualización es suficiente: + +### Uso + +```rs +{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} +``` + +### Salida + +```html +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} +``` + +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} + +### Auto Render Inline + +```tex +$ e^{i\pi}+1=0 $ +``` + +$ e^{i\pi}+1=0 $ + +### Auto Render Bloque + +```tex +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ +``` + +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ diff --git a/content/overview-math.fr.md b/content/overview-math.fr.md index 4cccd05..a26a5f0 100644 --- a/content/overview-math.fr.md +++ b/content/overview-math.fr.md @@ -22,6 +22,7 @@ tags = [ Vous pouvez utiliser [KaTeX](https://katex.org) pour rendre des notations mathématiques. Vous pouvez activer le $\KaTeX$ prise en charge globale, par section ou par page. + ## Activer globalement @@ -74,13 +75,17 @@ Enveloppez tout [valide](https://katex.org/docs/supported.html) $\KaTeX$ syntaxe C'est la plus belle équation que j'ai jamais vue: ### Usage + ```rs {%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} ``` + ### Sortir + ```html {% katex(block=false) %} e^{i\pi}+1=0 {% end %} ``` + {% katex(block=false) %} e^{i\pi}+1=0 {% end %} ### Bloquer les mathématiques @@ -88,16 +93,21 @@ C'est la plus belle équation que j'ai jamais vue: Certaines mathématiques en mode affichage sont assez justes : ### Usage + ```rs {%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} ``` + ### Sortir + ```html {% katex(block=true) %} \int_0^1 x^2 dx {% end %} ``` + {% katex(block=true) %} \int_0^1 x^2 dx {% end %} ### Rendu automatique en ligne + ```tex $ e^{i\pi}+1=0 $ ``` @@ -105,6 +115,7 @@ $ e^{i\pi}+1=0 $ $ e^{i\pi}+1=0 $ ### Bloc de rendu automatique + ```tex $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi diff --git a/content/overview-math.md b/content/overview-math.md index aac9d00..3d29dd3 100644 --- a/content/overview-math.md +++ b/content/overview-math.md @@ -22,6 +22,7 @@ tags = [ You can use [KaTeX](https://katex.org) to render mathematical notations. You can enable the $\KaTeX$ support globally, per-section or per-page basis. + ## Enable Globally @@ -63,27 +64,28 @@ math_auto_render = true +++ ``` -It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the -required files on that particular page, without affecting the page load speed of other pages. -If your site is not math-heavy, please do NOT enable this feature globally or per-section basis. +It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the required files on that particular page, without affecting the page load speed of other pages. If your site is not math-heavy, please do NOT enable this feature globally or per-section basis. ## Usage -Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline -Mathematics and `$$...$$` for block Mathematics. +Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline Mathematics and `$$...$$` for block Mathematics. ### Inline Mathematics This is the most beautiful equation I've ever seen: ### Usage + ```rs {%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} ``` + ### Output + ```html {% katex(block=false) %} e^{i\pi}+1=0 {% end %} ``` + {% katex(block=false) %} e^{i\pi}+1=0 {% end %} ### Block Mathematics @@ -91,16 +93,21 @@ This is the most beautiful equation I've ever seen: Some Mathematics in display mode is fair enough: ### Usage + ```rs {%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} ``` + ### Output + ```html {% katex(block=true) %} \int_0^1 x^2 dx {% end %} ``` + {% katex(block=true) %} \int_0^1 x^2 dx {% end %} ### Auto Render Inline + ```tex $ e^{i\pi}+1=0 $ ``` @@ -108,6 +115,7 @@ $ e^{i\pi}+1=0 $ $ e^{i\pi}+1=0 $ ### Auto Render Block + ```tex $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi diff --git a/content/overview-rich-content/index.es.md b/content/overview-rich-content/index.es.md new file mode 100644 index 0000000..fdafd67 --- /dev/null +++ b/content/overview-rich-content/index.es.md @@ -0,0 +1,182 @@ ++++ +date = 2021-05-15T15:00:00Z +description = "Una breve descripción de Shortcodes personalizados para Zola que implementan elementos html modernos: video, imagen, gif, audio." +draft = false +title = "Contenido enriquecido" + +[extra] +keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Video", + "Audio", + "Images", + "Shortcodes", +] ++++ +Se incluyen varios shortcodes personalizados para aumentar CommonMark. `video` los shortcodes `image`, `gif` y `audio` se crearon para ayudarle a aprovechar los elementos HTML modernos en sus escritos. + + + +## Vídeo + +- `sources` es una matriz de rutas de archivos de vídeo. (obligatorio) +- `class` establece una clase para el vídeo. +- `caption` establece el texto del pie de foto debajo del vídeo. +- `w` define la anchura del vídeo. +- `h` define la altura del vídeo. +- `autoplay` si está activado, el vídeo se reproduce automáticamente al cargarse. +- `loop` si está activado, reproduce el vídeo en bucle. +- `muted` cuando está activado, silencia el audio inicialmente. +- `playsinline` si está configurado, reproduce el vídeo incrustado en lugar de a pantalla completa en navegadores móviles. + +*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* + +**Clases opcionales:** + +- `ci` se puede utilizar para centrar la imagen. +- `fr` se puede utilizar para flotar la imagen a la derecha. +- `fl` se puede utilizar para flotar la imagen a la izquierda. +- `b1` se puede utilizar para añadir un borde de 1px. + +### Uso + +```rs +{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} +``` + +### Salida + +```html +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} +``` + +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} + +### Uso + +```rs +{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="¡Son más de 9000!") */}} +``` + +### Salida + +```html +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="¡Son más de 9000!") }} +``` + +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }} + +## Imagen + +El shortcode `image` devuelve una etiqueta `` con múltiples fuentes. + +Cada cadena en la matriz `sources` debe ser una ruta a un archivo de imagen de un tipo diferente (`avif`, `webp`, `png`, `jpg`, etc). +La última imagen en la matriz `sources` se utiliza para crear una etiqueta `` para que el navegador recurra a ella si los otros formatos aún no son compatibles. + +- `sources` es una matriz de rutas de archivos de imagen. (obligatorio) +- `class` establece una clase para la imagen. +- `caption` establece el texto del pie de foto debajo de la imagen. +- `w` establece el ancho de la imagen. +- `h` establece la altura de la imagen. + +*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* + +**Clases opcionales:** + +- `ci` se puede utilizar para centrar la imagen. +- `fr` se puede utilizar para flotar la imagen a la derecha. +- `fl` se puede utilizar para flotar la imagen a la izquierda. +- `b1` se puede utilizar para añadir un borde de 1px. + +### Uso + +```rs +{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="¡ES MÁS DE 9000!") */}} +``` + +### Salida + +```html +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="¡ES MÁS DE 9000!") }} +``` + +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }} + +## GIF + +El shortcode `gif` es exactamente igual que el [shortcode video](#video). +La única diferencia es que automáticamente tiene las propiedades adicionales: `autoplay`, `loop`, `muted`, `playsinline`. + +El uso de la etiqueta `