diff options
Diffstat (limited to 'content')
35 files changed, 2078 insertions, 196 deletions
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). + +<!-- more --> + + + +## 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 `<link rel="preload"` - este script los cambia a `<link rel="stylesheet"` una vez que la página ha terminado de cargar, esto nos permite cargar hojas de estilo para fuentes externas, fontawesome, o katex de forma no bloqueante. +- sw.js: este es el archivo Service Worker para la PWA. +- sw\_load.js: este archivo se encarga de cargar el Service Worker para la PWA. + +#### opción js\_bundle + +`js_bundle` cuando se establece en true sirve un archivo bundle en lugar de todos los archivos js individuales. + +Todos los bundles necesarios son generados dinámicamente por el script node [package\_abridge.js](https://github.com/Jieiku/abridge/blob/master/package_abridge.js) + +El script node escaneará su config.toml en busca de los valores de configuración relevantes y, basándose en su config.tomnl, generará los paquetes necesarios. + +Todo lo que se necesita es `zola build && npm run abridge`. + +#### Biblioteca de búsqueda de switch + +Además de elasticlunr abridge también soporta pagefind y tinysearch. + +pagefind demo: https://abridge-pagefind.pages.dev/ + +tinysearch demo: https://abridge-tinysearch.pages.dev/ + +Para utilizar tinysearch se requieren pasos adicionales. + +**Cambia a pagefind:** + +```bash +npm install +sed -i 's/^search_library =.*/search_library = "pagefind"/' config.toml +npm run abridge +# zola serve +``` + +**Cambiar a elasticlunr:** + +```bash +sed -i 's/^search_library =.*/search_library = "elasticlunr"/' config.toml +npm run abridge +``` + +**Cambiar a nosearch:** + +```bash +sed -i 's/^search_library =.*/search_library = "false"/' config.toml +npm run abridge +``` + +**Cambia a tinysearch:** + +Primero hay que instalar tinysearch para poder construir el índice: + +```bash +git clone https://github.com/tinysearch/tinysearch +cd tinysearch +cargo build --release +sudo cp ./target/release/tinysearch /usr/local/bin/tinysearch +exit # reload shell environment +``` + +Cambiar Abridge a tinysearch + +```bash +sed -i 's/^search_library =.*/search_library = "tinysearch"/' config.toml +npm run abridge +tinysearch --optimize --path static public/data_tinysearch/index.html +# zola serve +``` + +#### Cambiador de temas + +El cambiador de tema depende de javascript para funcionar, aplica la clase .light al documentElement raíz. El archivo que maneja esto (`theme.js`) es pequeño y optimizado y es el primer archivo cargado en la cabeza, por lo que el impacto en el rendimiento es mínimo. Sin el conmutador de temas puede seguir utilizando el tema automático que utiliza la configuración de preferencias del navegador/OS. Incluso puede instalar un [plugin de Firefox](https://addons.mozilla.org/en-US/firefox/addon/theme-switcher-for-firefox/) para cambiar rápidamente entre los dos. + +### Optimizar archivos PNG/ICO + +Buena herramienta para generar iconos enmascarables para `manifest.json`: [maskable.app](https://maskable.app/editor) + +Todos los archivos png pueden ser optimizados usando [oxipng](https://github.com/shssoichiro/oxipng): + +```bash +cd static +oxipng -o max --strip all -a -Z *.png +``` + +Con pantallas más grandes y una mayor densidad de píxeles cada vez más común es probablemente una buena idea utilizar al menos un poco de compresión con pérdida. Por ejemplo, puede utilizar pngquant con una calidad del 93% y a menudo obtendrá imágenes de alrededor de la mitad del tamaño. Tenga en cuenta que pngquant es acumulativo, por lo que debe mantener sus imágenes originales en algún lugar, y sólo utilizar pngquant una vez por imagen, si lo usa una y otra vez en la misma imagen, entonces bajará la calidad de la imagen cada vez. Utilice siempre oxipng después, oxipng es sin pérdidas. + +```bash +pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png +oxipng -o max --strip all -a -Z *.png +``` + +leanify puede comprimir más lejos tanto para archivos png como ico: + +```bash +git clone https://github.com/JayXon/Leanify +cd Leanify +make +sudo cp leanify /usr/local/bin/leanify +exit #launch new terminal +leanify -i 7777 *.png +leanify -i 7777 *.ico +``` + +### Pre gzip/brotli contenido + +Si usted está sirviendo su sitio con nginx, puede pre gzip su contenido. + +(Netlify brotli gzips sus archivos automáticamente, no exta trabajo requerido) + +Primero configura nginx: + +```bash +sudo nano /etc/nginx/nginx.conf + +gzip on; +gzip_vary on; +gzip_proxied expired no-cache no-store private auth; +#gzip_proxied any; +gzip_comp_level 9; +gzip_buffers 64 16k; +#gzip_buffers 16 8k; +gzip_http_version 1.1; +gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml application/xhtml+xml application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf; +#gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; +``` + +Entonces usted puede gzip/brotli sus archivos: + +```bash +zola build +find ~/.dev/abridge/public -type f -regextype posix-extended -regex '.*\.(htm|html|css|js|xml|xsl|txt|woff|woff2|svg|otf|eot|ttf)' -exec gzip --best -k -f {} \+ -exec brotli --best -f {} \; +rsync -zvrh ~/.dev/abridge/public/ web:/var/www/abridge +``` + +Nginx no viene por defecto con soporte para brotli, pero añadirlo no fue difícil. diff --git a/content/overview-abridge/index.fr.md b/content/overview-abridge/index.fr.md index a3f5f2b..eb04aec 100644 --- a/content/overview-abridge/index.fr.md +++ b/content/overview-abridge/index.fr.md @@ -11,8 +11,8 @@ toc = true [taxonomies] tags = [ - "Features", - "Config", + "Features", + "Config", ] +++ Un thème rapide, léger et moderne [Zola](https://getzola.org) utilisant [abridge.css](https://github.com/Jieiku/abridge.css) (un cadre HTML CSS sémantique de classe légère). Les scores de [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/) et [Observatory](https://developer.mozilla.org/en-US/observatory/analyze?host=abridge.netlify.app) sont parfaits. Voici une page [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md). @@ -166,11 +166,13 @@ $abridgeMode : "switcher",//valeurs valides : switcher, auto, dark, light ### Couleurs et styles Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base : + ```scss $color : "orange",// modèle de couleur à utiliser : orange, bleu, blueshade ``` Ensuite, vous pouvez surcharger des couleurs individuelles si nécessaire : + ```scss /// Couleurs sombres $f1d : #ccc,// Couleur de police primaire @@ -199,7 +201,7 @@ Si votre visiteur utilise noscript ou un autre module complémentaire de navigat Pour ajuster ce mode, vous devez définir les deux valeurs de configuration suivantes dans `abridge.scss` **ET** `config.toml` : ```scss -$switcherDefault : "dark",// mode de commutation nojs par défaut : dark, light (assurez-vous de définir également js_switcher_default dans config.toml) +$switcherDefault: "dark",// mode de commutation nojs par défaut : dark, light (assurez-vous de définir également js_switcher_default dans config.toml) ``` ```toml @@ -250,18 +252,10 @@ Vous devez également définir des mots-clés spécifiques à la page, à moins Vous pouvez également définir une image spécifique à la page pour les résultats de recherche en utilisant page.extra.thumbnail. Les cartes Facebook, Twitter et OpenGraph sont prises en charge (image et description automatiques pour les liens affichés). OpenGraph recommande une taille de 1200 x 630 (1,9:1). Twitter recommande 2:1 pour les grandes images et 1:1 pour les petites. Si vous ne définissez pas de vignette spécifique à une page, la bannière définie dans config.toml sera utilisée à la place. Référez-vous à [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) pour un exemple : + ```md +++ -title = "Raccourcis d'images" -description = "Les images peuvent être incorporées directement en utilisant le markdown ` `, mais l'utilisation d'un shortcode permet d'éviter le CLS en définissant explicitement la largeur et la hauteur." -date = 2021-05-19 -draft = false - -[taxonomies] -tags = ["Fonctionnalités", "Shortcodes", "Images"] [extra] -toc = true -keywords = "Image, Markdown, Shortcodes, Swap" thumbnail = "ferris-gesture.png" +++ ``` @@ -373,6 +367,7 @@ exit # reload shell environment ``` Passer Abridge à tinysearch : + ```bash sed -i 's/^search_library =.*/search_library = "tinysearch"/' config.toml npm run abridge diff --git a/content/overview-abridge/index.md b/content/overview-abridge/index.md index 010e305..22044a6 100644 --- a/content/overview-abridge/index.md +++ b/content/overview-abridge/index.md @@ -11,8 +11,8 @@ toc = true [taxonomies] tags = [ - "Features", - "Config", + "Features", + "Config", ] +++ A fast, lightweight, and modern [Zola](https://getzola.org) theme utilizing [abridge.css](https://github.com/Jieiku/abridge.css) (a class-light semantic HTML CSS Framework). Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://developer.mozilla.org/en-US/observatory/analyze?host=abridge.netlify.app) scores. Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page. @@ -166,11 +166,13 @@ $abridgeMode: "switcher",//valid values: switcher, auto, dark, light ### Colors and Styles You can specify which color template you want to use as a base: + ```scss $color: "orange",// color template to use/override: orange, blue, blueshade ``` Then override individual colors as needed: + ```scss /// Dark Colors $f1d: #ccc,// Font Color Primary @@ -249,19 +251,11 @@ You should also set page specific keywords unless your keywords defined in confi You can optionally also set a page specific image for search results by using page.extra.thumbnail. Facebook, Twitter, and OpenGraph Cards are supported (automatic image & description for posted links). OpenGraph recommends 1200 x 630 (1.9:1). Twitter recommends 2:1 for large and 1:1 for small. If you do not set a page specific thumbnail then the banner defined in config.toml will be used instead. -Refer to [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) for an example: +Refer to [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) for an example. + ```md +++ -title = "Image Shortcodes" -description = "Images can be embedded directly using markdown ``, but using a shortcode prevents CLS by explicitly setting the width and height." -date = 2021-05-19 -draft = false - -[taxonomies] -tags = ["Features","Shortcodes","Images"] [extra] -toc = true -keywords = "Image, Markdown, Shortcodes, Swap" thumbnail = "ferris-gesture.png" +++ ``` @@ -373,6 +367,7 @@ exit # reload shell environment ``` Switch Abridge to tinysearch: + ```bash sed -i 's/^search_library =.*/search_library = "tinysearch"/' config.toml npm run abridge diff --git a/content/overview-code-blocks.es.md b/content/overview-code-blocks.es.md new file mode 100644 index 0000000..f7fa49c --- /dev/null +++ b/content/overview-code-blocks.es.md @@ -0,0 +1,407 @@ ++++ +date = 2022-05-16T15:00:00Z +description = "Artículo de ejemplo que muestra el resaltado de sintaxis y el formato de los bloques de código con un tema personalizado." +draft = false +title = "Tema Code Blocks" + +[extra] +keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Markdown", +] ++++ +Este artículo muestra varios Bloques de Código que permiten comparar fácilmente los temas de Sublime. + +<!-- more --> + +## 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 +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Example HTML5 Document</title> +</head> +<body> + <!--Main Content Area--> + <p>Test</p> +</body> +</html> +``` + +### 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 = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> <i class="svgs search"></i> '.concat(document.getElementById("searchinput").value, "</h2>"); + 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 +<?php +/** + * Postfix Admin + */ +require_once('common.php'); +$CONF = Config::getInstance()->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 <stdio.h> +int main() { + int a; + /* actual initialization */ + a = 10; + printf("Hello, World!"); + return 0; +} +``` + +### C++ + +```cpp +// Your First C++ Program + +#include <iostream> + +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 <a href="https://metrics.example.com">Dashboard</a>' + elif humidity > 55: + emailSubject = "Humidity>55: " + str(int(humidity)) + "%H" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F <a href="https://metrics.example.com">Dashboard</a>' + elif tempF > 90: + emailSubject = "Temperature>90: " + str(int(tempF)) + "F" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F <a href="https://metrics.example.com">Dashboard</a>' + 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 <!doctype html> <html lang="en"> @@ -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 <?php /** @@ -189,8 +197,8 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); /* vim: set expandtab softtabstop=4 tabstop=4 shiftwidth=4: */ ``` - ### Json + ```json { "name": "Abridge Zola Theme", @@ -223,6 +231,7 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); ``` ### SQL + ```sql -- jelly-actix-web-starter - Creates an accounts table, along with some associated helpers. @@ -255,6 +264,7 @@ for each row execute procedure update_timestamp(); ``` ### Lua + ```lua function square(x) return x * x @@ -274,6 +284,7 @@ print(getPlayerInformation()) ``` ### C + ```c #include <stdio.h> 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 <!doctype html> <html lang="en"> @@ -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 <?php /** @@ -189,8 +197,8 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); /* vim: set expandtab softtabstop=4 tabstop=4 shiftwidth=4: */ ``` - ### Json + ```json { "name": "Abridge Zola Theme", @@ -223,6 +231,7 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); ``` ### SQL + ```sql -- jelly-actix-web-starter - Creates an accounts table, along with some associated helpers. @@ -255,6 +264,7 @@ for each row execute procedure update_timestamp(); ``` ### Lua + ```lua function square(x) return x * x @@ -274,6 +284,7 @@ print(getPlayerInformation()) ``` ### C + ```c #include <stdio.h> 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 ``, 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 ``, 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. + +<!-- more --> + +# 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 +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> +``` + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> + +# 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 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> ``` -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> # 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 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> ``` -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> # 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. + +<!-- more --> + +# Encabezados + +Los siguientes elementos HTML `<h1>`-`<h6>` representan seis niveles de encabezados de sección. `<h1>` es el nivel de sección más alto, mientras que `<h6>` 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.<br> +> — <cite>Rob Pike[^1]</cite> + +> Todos los hombres desean saber por naturaleza.<br> +> ― <cite>Aristotle[^2]</cite> + +> El poder surge como respuesta a una necesidad, no a un deseo.<br> +> — *Goku* + +> Adapta lo que es útil, rechaza lo que es inútil y añade lo que es específicamente tuyo.<br> +> — *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 `<figure></figure>` para que puedan desplazarse horizontalmente. + +<figure> + +| **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 | + +</figure> + +*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 + +<details> + <summary>Title 1</summary> + <p>IT'S A SECRET TO EVERYBODY.</p> +</details> + +<details> + <summary>Title 2</summary> + <p>Stay awhile, and listen!</p> +</details> + +# 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 +<!doctype html> +<html lang="es"> +<head> + <meta charset="utf-8"> + <title>Ejemplo de documento HTML5</title> +</head> +<body> + <p>Prueba</p> +</body> +</html> +``` + +## Números de línea, destacados + +```html,linenos,hl_lines=5 7-9 +<!doctype html> +<html lang="es"> +<head> + <meta charset="utf-8"> + <title>Ejemplo de documento HTML5</title> +</head> +<body> + <p>Prueba</p> +</body> +</html> +``` + +## 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 + +<abbr title="Graphics Interchange Format">GIF</abbr> es un formato de imagen de mapa de bits. + +H<sub>2</sub>O + +X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> + +Pulse <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Supr</kbd></kbd> para finalizar la sesión. + +La mayoría de las <mark>salamandras</mark> son nocturnas y cazan insectos, gusanos y otras criaturas pequeñas. + +----- +<!-- Note: There must be a blank line between every two lines of the footnote definition. --> + +\[^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 + +<form name="contact" method="POST" > + <p><label for="name">Name</label> + <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name." /> + </p> + <p><label for="email">Email Address</label> + <input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address." /> + </p> + <p><label for="message">Message</label> + <textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea> + </p> + <div id="success"></div> + <p><button type="submit" id="sendMessageButton">Send</button></p> + <br> + <!-- Select --> + <label for="fruit">Fruit</label> + <select id="fruit" required> + <option value="" selected>Select a fruit…</option> + <option>Banana</option> + <option>Watermelon</option> + <option>Apple</option> + <option>Orange</option> + <option>Mango</option> + </select> + <!-- Radios --> + <fieldset> + <legend>Size</legend> + <label for="small"> + <input type="radio" id="small" name="size" value="small" checked> + Small + </label> + <label for="medium"> + <input type="radio" id="medium" name="size" value="medium"> + Medium + </label> + <label for="large"> + <input type="radio" id="large" name="size" value="large"> + Large + </label> + <label for="extralarge"> + <input type="radio" id="extralarge" name="size" value="extralarge" disabled> + Extra Large + </label> + </fieldset> + <!-- Checkboxes --> + <fieldset> + <label for="terms"> + <input type="checkbox" id="terms" name="terms"> + I agree to the Terms and Conditions + </label> + <label for="terms_sharing"> + <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked> + I agree to share my information with partners + </label> + </fieldset> + <!-- Switches --> + <fieldset> + <label for="switch"> + <input type="checkbox" id="switch" name="switch" role="switch"> + Publish on my profile + </label> + <label for="switch_disabled"> + <input type="checkbox" id="switch_disabled" name="switch_disabled" disabled checked> + Publish on my profile my accomplishments + </label> + </fieldset> + <br> + <!-- Search --> + <p><input type="search" id="search" name="search" placeholder="Search" title="Search"></p> + <!-- File browser --> + <label for="file">File browser + <input type="file" id="file" name="file"> + </label> + <!-- Range slider --> + <label for="range">Range slider + <input type="range" min="0" max="100" value="50" id="range" name="range"> + </label> + <!-- Date --> + <label for="date">Date + <input type="date" id="date" name="date"> + </label> + <!-- Time --> + <label for="time">Time + <input type="time" id="time" name="time"> + </label> + <!-- Color --> + <label for="color">Color + <input type="color" id="color" name="color" value="#0eaaaa"> + </label> +</form> 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 `<h1>`—`<h6>` suivants représentent six niveaux d'en-têtes de section. -`<h1>` est le niveau de section le plus élevé alors qu'il `<h6>` est le plus bas. +Les éléments HTML `<h1>`—`<h6>` suivants représentent six niveaux d'en-têtes de section. `<h1>` est le niveau de section le plus élevé alors qu'il `<h6>` 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 `<figure></figure>` pour qu'elles puissent défiler horizontalement. + <figure> | **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 `<figure></figure>` 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 | </figure> + *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. <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>D La plupart <mark>salamanders</mark> sont nocturnes et chassent les insectes, les vers et autres petites créatures. ---- +----- <!-- Note: There must be a blank line between every two lines of the footnote definition. --> -[^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 `<h1>`—`<h6>` elements represent six levels of section -headings. `<h1>` is the highest section level while `<h6>` is the lowest. +The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` 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 `<figure></figure>` so they can scroll horizontally. + <figure> | **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 `<figure></figure>` 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 | </figure> + *revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.* # Foldable Text @@ -188,16 +180,14 @@ H<sub>2</sub>O X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> -Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the -session. +Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session. -Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and -other small creatures. +Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures. ---- +----- <!-- Note: There must be a blank line between every two lines of the footnote definition. --> -[^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. + +<!-- more --> + +## 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. + <!-- more --> ## 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. + <!-- more --> ## 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. + +<!-- more --> + +## 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 `<picture>` 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 `<img>` 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 `<video>` en lugar de gifs permite reducir el tamaño de los archivos, +lo cual es especialmente importante en regiones donde Internet es más lento o +menos fiable. + +### Utilización + +```rs +{{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} +``` + +### Salida + +```html +{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} +``` + +{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} + +## Audio + +El shortcode `audio` toma una matriz `sources` de cadenas y devuelve una etiqueta +`<audio>`. Cada cadena de la matriz `sources` debe ser una ruta a un archivo de audio +de un tipo diferente (`ogg`, `mp3`, `flac`, `wav`, etc). +El navegador reproducirá el primer tipo que admita, por lo que colocarlos en orden de menor a mayor tamaño utilizará el menor ancho de banda si ese es su objetivo. + +- `sources` es un array de rutas de archivos. (obligatorio) +- `class` establece una clase para el audio. +- `caption` establece el texto del título debajo del audio. +- `autoplay` cuando se establece, reproduce automáticamente el audio al cargar. +- `loop` cuando se establece, reproduce el audio en bucle. +- `muted` cuando se establece, establece el audio silenciado inicialmente. + +*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 +{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}} +``` + +### Salida + +```html +{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }} +``` + +{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }} + +### Uso + +```rs +{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="¡Son más de 9000!!") */}} +``` + +### Salida + +```html +{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="¡Son más de 9000!") }} +``` + +{{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }} diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md index 77cc21c..acd9374 100644 --- a/content/overview-rich-content/index.fr.md +++ b/content/overview-rich-content/index.fr.md @@ -1,8 +1,8 @@ +++ date = 2021-05-15T15:00:00Z -description = "Une brève description des Shortcodes personnalisés pour Zola qui implémentent des éléments html modernes : vidéo, image, gif, audio." +description = "Une brève description des shortcodes personnalisés pour Zola qui mettent en œuvre des éléments html modernes : vidéo, image, gif, audio." draft = false -title = "Contenu riche" +title = "Un contenu riche" [extra] keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" @@ -18,135 +18,165 @@ tags = [ "Shortcodes", ] +++ -Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark. `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture. +Plusieurs shortcodes personnalisés sont inclus pour améliorer CommonMark. `video` les shortcodes `image`, `gif` et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans vos écrits. <!-- more --> ## Vidéo -- `sources` sont un tableau de chemins de fichiers vidéo. (obligatoire) +- `sources` est un tableau de chemins d'accès aux fichiers vidéo. (obligatoire) - `class` définit une classe pour la vidéo. - `caption` définit le texte de la légende sous la vidéo. - `w` définit la largeur de la vidéo. - `h` définit la hauteur de la vidéo. -- `autoplay` lorsqu'il est défini sur "true", lit automatiquement la vidéo au chargement. -- `loop` lorsqu'il est défini sur "true", lit la vidéo en boucle. -- `muted` lorsqu'il est défini sur "true", règle le son initialement coupé. +- `autoplay` lorsque cette option est activée, la vidéo s'affiche automatiquement au chargement. +- `loop` lorsque cette option est activée, la vidéo est lue en boucle. +- `muted` lorsque cette option est activée, le son est initialement coupé. +- `playsinline` lorsque cette option est activée, la vidéo est lue en mode intégré plutôt qu'en mode plein écran sur les navigateurs mobiles. -** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) ** +*les sources peuvent être le même chemin, le chemin relatif ou le chemin racine, comme le [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* -**Cours optionnels:** +**Classes optionnelles :** - `ci` peut être utilisé pour centrer l'image. - `fr` peut être utilisé pour faire flotter l'image à droite. -- `fl` peut être utilisé pour faire flotter l'image vers la gauche. +- `fl` peut être utilisé pour faire flotter l'image à gauche. - `b1` peut être utilisé pour ajouter une bordure de 1px. -### Usage +### Utilisation + ```rs {{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} ``` -### Sortir + +### Sortie + ```html {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} ``` + {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} -### Usage +### Utilisation + ```rs {{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") */}} ``` -### Sortir + +### Sortie + ```html {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }} ``` + {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }} ## Image Le shortcode `image` renvoie une balise `<picture>` avec plusieurs sources. -Chaque chaîne du tableau `sources` doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc.). - La dernière image du tableau `sources` est utilisée pour créer une balise `<img>` sur laquelle le navigateur pourra s'appuyer si les autres formats ne sont pas encore pris en charge. +Chaque chaîne du tableau `sources` doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc). +La dernière image du tableau `sources` est utilisée pour créer une balise `<img>` sur laquelle le navigateur peut se rabattre si les autres formats ne sont pas encore pris en charge. -- `sources` sont un tableau de chemins de fichiers image. (obligatoire) +- `sources` est un tableau de chemins d'accès aux fichiers d'images. (obligatoire) - `class` définit une classe pour l'image. - `caption` définit le texte de la légende sous l'image. - `w` définit la largeur de l'image. - `h` définit la hauteur de l'image. -** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) ** +*les sources peuvent être le même chemin, le chemin relatif ou le chemin racine, comme le [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* -**Cours optionnels:** +**Classes optionnelles :** - `ci` peut être utilisé pour centrer l'image. - `fr` peut être utilisé pour faire flotter l'image à droite. -- `fl` peut être utilisé pour faire flotter l'image vers la gauche. +- `fl` peut être utilisé pour faire flotter l'image à gauche. - `b1` peut être utilisé pour ajouter une bordure de 1px. -### Usage +### Utilisation + ```rs -{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") */}} +{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") */}} ``` -### Sortir + +### Sortie + ```html -{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }} +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }} ``` -{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }} + +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }} ## GIF -Le `gif` shortcode est exactement le même que le [shortcode vidéo][#video]. - La seule différence est qu'il possède automatiquement les propriétés supplémentaires: `autoplay`, `loop`, `muted`, `playsinline`. +Le shortcode `gif` est exactement le même que le [shortcode vidéo](#video). +La seule différence est qu'il possède automatiquement les propriétés supplémentaires : `autoplay`, `loop`, `muted`, `playsinline`. -L'utilisation de la `<video>` balise à la place des gifs permet de réduire la taille des fichiers, ce qui est particulièrement important dans les régions où Internet est plus lent ou moins fiable. +L'utilisation de la balise `<video>` à la place des gifs permet de réduire la taille des fichiers, +, ce qui est particulièrement important dans les régions où l'internet est plus lent ou +moins fiable. + +### Utilisation -### Usage ```rs {{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} ``` -### Sortir + +### Sortie + ```html {{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} ``` + {{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} -## l'audio +## Audio -Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<audio>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier audio d'un type différent (`ogg`, `mp3`, `flac`, `wav`, etc). Le navigateur jouera le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si tel est votre objectif. +Le shortcode `audio` prend un tableau de chaînes `sources` et renvoie une balise +`<audio>`. Chaque chaîne du tableau `sources` doit être un chemin vers un fichier audio +d'un type différent (`ogg`, `mp3`, `flac`, `wav`, etc). +Le navigateur lira le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si c'est votre objectif. -- `sources` est un tableau de chemins de fichiers. (obligatoire) +- `sources` est un tableau de chemins d'accès aux fichiers. (obligatoire) - `class` définit une classe pour l'audio. - `caption` définit le texte de la légende sous l'audio. -- `autoplay` lorsqu'il est défini, lit automatiquement l'audio au chargement. -- `loop` lorsqu'il est défini, lit l'audio en boucle. -- `muted` lorsqu'il est défini, définit le son initialement coupé. +- `autoplay` lorsque cette option est activée, l'audio s'affiche automatiquement au chargement. +- `loop` lorsque cette option est activée, l'audio est lu en boucle. +- `muted` lorsqu'il est défini, met l'audio en sourdine au départ. -** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) ** +*les sources peuvent être le même chemin, un chemin relatif ou le chemin de la racine, comme le [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* -**Cours optionnels:** +**Classes optionnelles :** - `ci` peut être utilisé pour centrer l'image. - `fr` peut être utilisé pour faire flotter l'image à droite. -- `fl` peut être utilisé pour faire flotter l'image vers la gauche. +- `fl` peut être utilisé pour faire flotter l'image à gauche. - `b1` peut être utilisé pour ajouter une bordure de 1px. -### Usage +### Utilisation + ```rs {{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}} ``` -### Sortir + +### Sortie + ```html {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }} ``` + {{ audio(sources=["over9000.ogg", "over9000.mp3"]) }} -### Usage +### Utilisation + ```rs {{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="It's Over 9000!!") */}} ``` -### Sortir + +### Sortie + ```html {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="It's Over 9000!!") }} ``` + {{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }} diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md index c33b7cd..6049768 100644 --- a/content/overview-rich-content/index.md +++ b/content/overview-rich-content/index.md @@ -34,7 +34,7 @@ Several custom shortcodes are included to augment CommonMark. `video`, `image`, - `muted` when set, sets the audio muted initially. - `playsinline` when set, plays the video embeded instead of fullscreen on mobile browsers. -** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) ** +*sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode)* **Optional Classes:** @@ -44,23 +44,31 @@ Several custom shortcodes are included to augment CommonMark. `video`, `image`, - `b1` can be used to add a 1px border. ### Usage + ```rs {{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} ``` + ### Output + ```html {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} ``` + {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} ### Usage + ```rs {{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") */}} ``` + ### Output + ```html {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }} ``` + {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }} ## Image @@ -76,7 +84,7 @@ Each string in the `sources` array should be a path to an image file of a differ - `w` sets the width of the image. - `h` sets the height of the image. -** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) ** +*sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode)* **Optional Classes:** @@ -86,13 +94,17 @@ Each string in the `sources` array should be a path to an image file of a differ - `b1` can be used to add a 1px border. ### Usage + ```rs {{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") */}} ``` + ### Output + ```html {{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }} ``` + {{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }} ## GIF @@ -105,13 +117,17 @@ which is especially important in regions where internet is slower or less reliable. ### Usage + ```rs {{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} ``` + ### Output + ```html {{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} ``` + {{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} ## Audio @@ -128,7 +144,7 @@ The browser will play the first type it supports, so placing them in order of si - `loop` when set, plays the audio on a loop. - `muted` when set, sets the audio muted initially. -** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) ** +*sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode)* **Optional Classes:** @@ -138,21 +154,29 @@ The browser will play the first type it supports, so placing them in order of si - `b1` can be used to add a 1px border. ### Usage + ```rs {{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}} ``` + ### Output + ```html {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }} ``` + {{ audio(sources=["over9000.ogg", "over9000.mp3"]) }} ### Usage + ```rs {{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="It's Over 9000!!") */}} ``` + ### Output + ```html {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="It's Over 9000!!") }} ``` + {{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }} diff --git a/content/overview-showdata.es.md b/content/overview-showdata.es.md new file mode 100644 index 0000000..4e7db9e --- /dev/null +++ b/content/overview-showdata.es.md @@ -0,0 +1,35 @@ ++++ +date = 2021-05-09T15:00:00Z +description = "Una breve descripción de un Shortcode personalizado para Zola que implementa la carga y visualización de datos externos." +draft = false +title = "Código corto Showdata" + +[extra] +keywords = "Data, Load, External, Shortcodes" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Data", + "Shortcodes", +] ++++ +El shortcode `showdata` puede cargar y mostrar datos de una fuente externa a través de la función [load_data()](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola. + +<!-- more --> + +Estos son los parámetros, actualmente se requieren los 3. + +- `src` ruta o url al archivo (si es url, debe incluir el prefijo http(s)://). +- `type` el tipo de archivo a cargar. [tipos soportados](https://www.getzola.org/documentation/templates/overview/#load-data) +- `key` el campo de los datos que desea mostrar. + +## Uso + +Este tema requiere la versión {{ showdata(src="../theme.toml" type="toml" key="min_version") }} o posterior de Zola. + +## Salida + +Este tema requiere la versión {{ showdata(src="../theme.toml" type="toml" key="min_version") }} o posterior de Zola. diff --git a/content/overview-showdata.fr.md b/content/overview-showdata.fr.md index 2b89bf7..ebbb1e1 100644 --- a/content/overview-showdata.fr.md +++ b/content/overview-showdata.fr.md @@ -1,5 +1,5 @@ +++ -date = 2021-05-04T15:00:00Z +date = 2021-05-09T15:00:00Z description = "Une brève description d'un shortcode personnalisé pour Zola qui implémente le chargement et l'affichage de données externes." draft = false title = "Code court Showdata" @@ -23,7 +23,7 @@ Le shortcode `showdata` peut charger et afficher des données provenant d'une so Ce sont les paramètres, actuellement tous les 3 sont requis. - `src` chemin ou URL du fichier (si URL, doit inclure le préfixe http(s)://). -- `type` le type de fichier à charger. ([supported types](https://www.getzola.org/documentation/templates/overview/#load-data)) +- `type` le type de fichier à charger. [supported types](https://www.getzola.org/documentation/templates/overview/#load-data) - `key` le champ dans les données que vous souhaitez afficher. ## Usage diff --git a/content/overview-showdata.md b/content/overview-showdata.md index 092836b..6fec6b0 100644 --- a/content/overview-showdata.md +++ b/content/overview-showdata.md @@ -1,5 +1,5 @@ +++ -date = 2021-05-04T15:00:00Z +date = 2021-05-09T15:00:00Z description = "A brief description of a custom Shortcode for Zola that implements loading and displaying external data." draft = false title = "Showdata Shortcode" @@ -23,7 +23,7 @@ The `showdata` shortcode can load and display data from an external source via Z These are the parameters, currently all 3 are required. - `src` path or url to file (if url, must include the http(s):// prefix). -- `type` the type of file to load. ([supported types](https://www.getzola.org/documentation/templates/overview/#load-data)) +- `type` the type of file to load. [supported types](https://www.getzola.org/documentation/templates/overview/#load-data) - `key` the field in the data that you want to display. ## Usage diff --git a/content/pages/offline.es.md b/content/pages/offline.es.md new file mode 100644 index 0000000..dc8e02d --- /dev/null +++ b/content/pages/offline.es.md @@ -0,0 +1,9 @@ ++++ +draft = false +path = "es/offline" +template = "pages.html" +title = "Modo sin conexión" ++++ +## Modo sin conexión + +Lo sentimos, no se ha encontrado caché y parece que estás desconectado, se requiere una conexión. diff --git a/content/pages/offline.pt.md b/content/pages/offline.pt.md new file mode 100644 index 0000000..5309e8a --- /dev/null +++ b/content/pages/offline.pt.md @@ -0,0 +1,9 @@ ++++ +draft = false +path = "pt/offline" +template = "pages.html" +title = "Modo off-line" ++++ +## Modo off-line + +Desculpe, nenhum cache foi encontrado e parece que você está off-line. É necessária uma conexão. diff --git a/content/video-streaming-sites/_index.es.md b/content/video-streaming-sites/_index.es.md index 18f2173..3cbd3c9 100644 --- a/content/video-streaming-sites/_index.es.md +++ b/content/video-streaming-sites/_index.es.md @@ -1,7 +1,6 @@ +++ render = false -transparent = true template = "pages.html" +transparent = true +++ - Esta es una página sobre códigos cortos para sitios de transmisión de video. diff --git a/content/video-streaming-sites/_index.fr.md b/content/video-streaming-sites/_index.fr.md index ca9371c..cb82a05 100644 --- a/content/video-streaming-sites/_index.fr.md +++ b/content/video-streaming-sites/_index.fr.md @@ -1,7 +1,6 @@ +++ render = false -transparent = true template = "pages.html" +transparent = true +++ - Ceci est une page sur les shortcodes pour les sites de streaming vidéo. diff --git a/content/video-streaming-sites/_index.md b/content/video-streaming-sites/_index.md index 0a7bb7f..dcb7e4b 100644 --- a/content/video-streaming-sites/_index.md +++ b/content/video-streaming-sites/_index.md @@ -1,7 +1,6 @@ +++ render = false -transparent = true template = "pages.html" +transparent = true +++ - This is a page about shortcodes for video streaming sites. diff --git a/content/video-streaming-sites/overview-embed-streamable.es.md b/content/video-streaming-sites/overview-embed-streamable.es.md index 2b71674..a7e96f1 100644 --- a/content/video-streaming-sites/overview-embed-streamable.es.md +++ b/content/video-streaming-sites/overview-embed-streamable.es.md @@ -28,12 +28,14 @@ Zola tiene muchos shortcodes, y nuevos son facilmente añadidos, este ejemplo mu {{/* streamable(id="92ok4") */}} ``` -- `id`: el id del vídeo (obligatorio) -- `class`: una clase para añadir al <div> que rodea al iframe (opcional) -- `title`: establecer el título alt para el iframe (opcional, por defecto "Streamable") +- `id` - el id del vídeo (obligatorio) +- `class` - una clase para añadir al <div> que rodea al iframe (opcional) +- `title` - establecer el título alt para el iframe (opcional, por defecto "Streamable") ### Salida + ```html {{ streamable(id="92ok4") }} ``` + {{ streamable(id="92ok4") }} diff --git a/content/video-streaming-sites/overview-embed-streamable.fr.md b/content/video-streaming-sites/overview-embed-streamable.fr.md index b48ec16..4b4ad81 100644 --- a/content/video-streaming-sites/overview-embed-streamable.fr.md +++ b/content/video-streaming-sites/overview-embed-streamable.fr.md @@ -28,8 +28,8 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem {{/* streamable(id="92ok4") */}} ``` -- `id`: l'identifiant de la vidéo (obligatoire) -- `class`: une classe à ajouter au <div> entourant l'iframe (optionnel) +- `id` - l'identifiant de la vidéo (obligatoire) +- `class` - une classe à ajouter au <div> entourant l'iframe (optionnel) - `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Streamable") ### Output @@ -37,4 +37,5 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem ```html {{ streamable(id="92ok4") }} ``` + {{ streamable(id="92ok4") }} diff --git a/content/video-streaming-sites/overview-embed-streamable.md b/content/video-streaming-sites/overview-embed-streamable.md index 68d6add..f9a2fa6 100644 --- a/content/video-streaming-sites/overview-embed-streamable.md +++ b/content/video-streaming-sites/overview-embed-streamable.md @@ -28,8 +28,8 @@ Zola has many shortcodes, and new are easily added, this example shows streamabl {{/* streamable(id="92ok4") */}} ``` -- `id`: the video id (mandatory) -- `class`: a class to add to the <div> surrounding the iframe (optional) +- `id` - the video id (mandatory) +- `class` - a class to add to the <div> surrounding the iframe (optional) - `title` - set alt title for the iframe (optional, defaults to "Streamable") ### Output @@ -37,4 +37,5 @@ Zola has many shortcodes, and new are easily added, this example shows streamabl ```html {{ streamable(id="92ok4") }} ``` + {{ streamable(id="92ok4") }} diff --git a/content/video-streaming-sites/overview-embed-vimeo.es.md b/content/video-streaming-sites/overview-embed-vimeo.es.md new file mode 100644 index 0000000..99a91af --- /dev/null +++ b/content/video-streaming-sites/overview-embed-vimeo.es.md @@ -0,0 +1,45 @@ ++++ +date = 2021-05-07T15:00:00Z +description = "Artículo de ejemplo que muestra un shortcode personalizado de Zola para incrustar vídeos de Vimeo en tus páginas." +draft = false +title = "Incrustar Vimeo" + +[extra] +keywords = "Video, Shortcodes, Embed, Embedded, Vimeo" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Shortcodes", + "Video", +] ++++ +Zola tiene muchos shortcodes, y los nuevos se añaden fácilmente, este ejemplo muestra vimeo. + +<!-- more --> + +## Vimeo + +### Uso + +```rs +{{/* vimeo(id="514402648") */}} +``` + +- `id` - el id del video (obligatorio) +- `class` - una clase para añadir al \<div\> que rodea el iframe (opcional) +- `autoplay` - cuando se establece en "true", el vídeo se muestra automáticamente al cargarse (opcional) +- `loop` - cuando se establece en "true", el vídeo se reproduce en bucle (opcional) +- `noautopause` - cuando se establece en "true", el vídeo no se autopausa (opcional) +- `title` - establecer título alternativo para el iframe (opcional, por defecto "Vimeo") +- `cookie` - establece "true" si quieres cookies de seguimiento, de lo contrario, por defecto es false. + +### Salida + +```html +{{ vimeo(id="514402648") }} +``` + +{{ vimeo(id="514402648") }} diff --git a/content/video-streaming-sites/overview-embed-vimeo.fr.md b/content/video-streaming-sites/overview-embed-vimeo.fr.md index 5c18de1..684fb76 100644 --- a/content/video-streaming-sites/overview-embed-vimeo.fr.md +++ b/content/video-streaming-sites/overview-embed-vimeo.fr.md @@ -28,11 +28,11 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem {{/* vimeo(id="514402648") */}} ``` -- `id`: l'identifiant de la vidéo (obligatoire) -- `class`: une classe à ajouter au <div> entourant l'iframe (optionnel) -- `autoplay`: lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif) -- `loop`: lorsqu'il est défini sur "true", la vidéo est lue en boucle (optionnel) -- `noautopause`: lorsqu'il est défini sur "true", la vidéo ne s'arrêtera pas automatiquement (optionnel) +- `id` - l'identifiant de la vidéo (obligatoire) +- `class` - une classe à ajouter au <div> entourant l'iframe (optionnel) +- `autoplay` - lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif) +- `loop` - lorsqu'il est défini sur "true", la vidéo est lue en boucle (optionnel) +- `noautopause` - lorsqu'il est défini sur "true", la vidéo ne s'arrêtera pas automatiquement (optionnel) - `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Vimeo") - `cookie` - défini sur "true" si vous voulez des cookies de suivi, sinon il est par défaut sur false. @@ -41,4 +41,5 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem ```html {{ vimeo(id="514402648") }} ``` + {{ vimeo(id="514402648") }} diff --git a/content/video-streaming-sites/overview-embed-vimeo.md b/content/video-streaming-sites/overview-embed-vimeo.md index e36b6f6..cfc00de 100644 --- a/content/video-streaming-sites/overview-embed-vimeo.md +++ b/content/video-streaming-sites/overview-embed-vimeo.md @@ -28,11 +28,11 @@ Zola has many shortcodes, and new are easily added, this example shows vimeo. {{/* vimeo(id="514402648") */}} ``` -- `id`: the video id (mandatory) -- `class`: a class to add to the <div> surrounding the iframe (optional) -- `autoplay`: when set to "true", the video autoplays on load (optional) -- `loop`: when set to "true", the video plays on a loop (optional) -- `noautopause`: when set to "true", the video will not autopause (optional) +- `id` - the video id (mandatory) +- `class` - a class to add to the <div> surrounding the iframe (optional) +- `autoplay` - when set to "true", the video autoplays on load (optional) +- `loop` - when set to "true", the video plays on a loop (optional) +- `noautopause` - when set to "true", the video will not autopause (optional) - `title` - set alt title for the iframe (optional, defaults to "Vimeo") - `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false. @@ -41,4 +41,5 @@ Zola has many shortcodes, and new are easily added, this example shows vimeo. ```html {{ vimeo(id="514402648") }} ``` + {{ vimeo(id="514402648") }} diff --git a/content/video-streaming-sites/overview-embed-youtube.es.md b/content/video-streaming-sites/overview-embed-youtube.es.md new file mode 100644 index 0000000..db6764f --- /dev/null +++ b/content/video-streaming-sites/overview-embed-youtube.es.md @@ -0,0 +1,44 @@ ++++ +date = 2021-05-08T15:00:00Z +description = "Artículo de ejemplo que muestra un shortcode personalizado de Zola para incrustar vídeos de Youtube en tus páginas." +draft = false +title = "Incrustar Youtube" + +[extra] +keywords = "Video, Shortcodes, Embed, Embedded, Youtube" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Shortcodes", + "Video", +] ++++ +Zola tiene muchos shortcodes, y nuevos son facilmente añadidos, este ejemplo muestra youtube. + +<!-- more --> + +## Youtube + +### Uso + +```rs +{{/* youtube(id="32gyFIWecuw") */}} +``` + +- `id` - el id del video (obligatorio) +- `playlist` - el id de la lista de reproducción (opcional) +- `class` - una clase para añadir al \<div\> que rodea el iframe (opcional) +- `autoplay` - cuando se establece en "true", el vídeo se muestra automáticamente al cargarse (opcional) +- `title` - establecer el título alt para el iframe (opcional, por defecto "Youtube") +- `cookie` - establecer a "true" si desea cookies de seguimiento, de lo contrario, por defecto a false. + +### Salida + +```html +{{ youtube(id="32gyFIWecuw") }} +``` + +{{ youtube(id="32gyFIWecuw") }} diff --git a/content/video-streaming-sites/overview-embed-youtube.fr.md b/content/video-streaming-sites/overview-embed-youtube.fr.md index 7c09443..bd85d9b 100644 --- a/content/video-streaming-sites/overview-embed-youtube.fr.md +++ b/content/video-streaming-sites/overview-embed-youtube.fr.md @@ -28,10 +28,10 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem {{/* youtube(id="32gyFIWecuw") */}} ``` -- `id`: l'identifiant de la vidéo (obligatoire) -- `playlist`: l'identifiant de la playlist (optionnel) -- `class`: une classe à ajouter au <div> entourant l'iframe (optionnel) -- `autoplay`: lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif) +- `id` - l'identifiant de la vidéo (obligatoire) +- `playlist` - l'identifiant de la playlist (optionnel) +- `class` - une classe à ajouter au <div> entourant l'iframe (optionnel) +- `autoplay` - lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif) - `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Youtube") - `cookie` - défini sur "true" si vous voulez des cookies de suivi, sinon il est par défaut sur false. @@ -40,4 +40,5 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem ```html {{ youtube(id="32gyFIWecuw") }} ``` + {{ youtube(id="32gyFIWecuw") }} diff --git a/content/video-streaming-sites/overview-embed-youtube.md b/content/video-streaming-sites/overview-embed-youtube.md index 55c92e1..86a83b9 100644 --- a/content/video-streaming-sites/overview-embed-youtube.md +++ b/content/video-streaming-sites/overview-embed-youtube.md @@ -28,10 +28,10 @@ Zola has many shortcodes, and new are easily added, this example shows youtube. {{/* youtube(id="32gyFIWecuw") */}} ``` -- `id`: the video id (mandatory) -- `playlist`: the playlist id (optional) -- `class`: a class to add to the <div> surrounding the iframe (optional) -- `autoplay`: when set to "true", the video autoplays on load (optional) +- `id` - the video id (mandatory) +- `playlist` - the playlist id (optional) +- `class` - a class to add to the <div> surrounding the iframe (optional) +- `autoplay` - when set to "true", the video autoplays on load (optional) - `title` - set alt title for the iframe (optional, defaults to "Youtube") - `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false. @@ -40,4 +40,5 @@ Zola has many shortcodes, and new are easily added, this example shows youtube. ```html {{ youtube(id="32gyFIWecuw") }} ``` + {{ youtube(id="32gyFIWecuw") }} |