Además de todos los shortcodes predeterminados de Hugo, Blowfish añade algunos adicionales para funcionalidad extra.

Alert

#

alert muestra su contenido como una caja de mensaje estilizada dentro de tu artículo. Es útil para llamar la atención sobre información importante que no quieres que el lector se pierda.

La entrada está escrita en Markdown, así que puedes formatearla como desees.

Ejemplo 1: Sin parámetros

{{< alert >}}
**¡Advertencia!** ¡Esta acción es destructiva!
{{< /alert >}}

Ejemplo 2: Parámetro sin nombre

{{< alert "twitter" >}}
No olvides [seguirme](https://twitter.com/nunocoracao) en Twitter.
{{< /alert >}}

Ejemplo 3: Parámetros con nombre

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
¡Esto es un error!
{{< /alert >}}

Admonition

#

Las admonitions te permiten insertar llamativos cuadros de aviso en tu contenido.

Las admonitions sirven un propósito similar al shortcode alert pero se implementan mediante hooks de renderizado de Hugo. La diferencia clave es la sintaxis: las admonitions usan sintaxis Markdown, haciéndolas más portables entre diferentes plataformas, mientras que los shortcodes son específicos de Hugo. La sintaxis se parece a las alertas de GitHub:

> [!NOTE]
> Una admonition de tipo Note.

> [!TIP]+ Título personalizado
> Una admonition plegable con título personalizado.

El signo de alerta (+ o -) es opcional para controlar si la admonition está plegada o no. Ten en cuenta que el signo de alerta solo es compatible con Obsidian.

Article

#

Article incrustará un solo artículo en un archivo markdown. El link al archivo debe ser el .RelPermalink del archivo a incrustar. Ten en cuenta que el shortcode no mostrará nada si hace referencia a su página padre. Nota: si estás ejecutando tu sitio web en una subcarpeta como Blowfish (es decir, /blowfish/), incluye esa ruta en el enlace.

Ejemplo:

{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}}

Welcome to Blowfish

3 mins

New Docs

Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.

Badge

#

badge muestra un componente de insignia estilizado que es útil para mostrar metadatos.

Ejemplo:

{{< badge >}}
¡Nuevo artículo!
{{< /badge >}}

Button

#

button muestra un componente de botón estilizado que puede usarse para resaltar una acción principal. Tiene tres variables opcionales href, target y rel que pueden usarse para especificar la URL, el destino y la relación del enlace.

Ejemplo:

{{< button href="#button" target="_self" >}}
Llamada a la acción
{{< /button >}}

Carousel

#

carousel se usa para mostrar múltiples imágenes de manera interactiva y visualmente atractiva. Esto permite al usuario deslizarse a través de múltiples imágenes mientras solo ocupa el espacio vertical de una. Todas las imágenes se muestran usando el ancho completo del componente padre y la relación de aspecto que establezcas con un valor predeterminado de 16:9.

Ejemplo 1: Relación de aspecto 16:9 y lista de imágenes detallada

{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}

Previous Next

Ejemplo 2: Relación de aspecto 21:9 y lista de imágenes con regex

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}

Previous Next

Chart

#

chart usa la biblioteca Chart.js para incrustar gráficos en artículos usando datos estructurados simples. Soporta varios estilos de gráficos diferentes y todo se puede configurar desde el shortcode. Simplemente proporciona los parámetros del gráfico entre las etiquetas del shortcode y Chart.js hará el resto.

Consulta la documentación oficial de Chart.js para detalles sobre la sintaxis y tipos de gráficos soportados.

Ejemplo:

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomate', 'Arándano', 'Plátano', 'Lima', 'Naranja'],
  datasets: [{
    label: '# de votos',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

Puedes ver ejemplos adicionales de Chart.js en la página de ejemplos de gráficos.

Code Importer

#

Este shortcode permite importar código de fuentes externas fácilmente sin copiar y pegar.

Ejemplo:

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}

{{ $url := .Get "url" }}
{{ with resources.GetRemote (urls.Parse $url) }}
  {{ .Content | markdownify }}
{{ else }}
  {{ warnf "mdimporter shortcode: unable to fetch %q: %s" $url .Position }}
{{ end }}

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" >}}

enableRobotsTXT = true
summaryLength = 0

buildDrafts = false
buildFuture = false

enableEmoji = true

Codeberg Card

#

codeberg te permite enlazar rápidamente un repositorio de Codeberg a través de la API de Codeberg, proporcionando actualizaciones en tiempo real sobre estadísticas como estrellas y forks.

Ejemplo 1:

{{< codeberg repo="forgejo/forgejo" >}}

Figure

#

Blowfish incluye un shortcode figure para añadir imágenes al contenido. El shortcode reemplaza la funcionalidad base de Hugo para proporcionar beneficios de rendimiento adicionales.

Cuando una imagen proporcionada es un recurso de página, será optimizada usando Hugo Pipes y escalada para proporcionar imágenes apropiadas para diferentes resoluciones de dispositivos. Si se proporciona un asset estático o una URL a una imagen externa, se incluirá tal cual sin ningún procesamiento de imagen por Hugo.

El shortcode figure acepta seis parámetros:

Blowfish también soporta la conversión automática de imágenes incluidas usando la sintaxis estándar de Markdown. Simplemente usa el siguiente formato y el tema se encargará del resto:

![Texto alternativo](image.jpg "Pie de imagen")

Ejemplo:

{{< figure
    src="abstract.jpg"
    alt="Obra de arte abstracta púrpura"
    caption="Foto de [Jr Korpa](https://unsplash.com/@jrkorpa) en [Unsplash](https://unsplash.com/)"
    >}}

<!-- O -->

![Obra de arte abstracta púrpura](abstract.jpg "Foto de [Jr Korpa](https://unsplash.com/@jrkorpa) en [Unsplash](https://unsplash.com/)")

Forgejo Card

#

forgejo te permite enlazar rápidamente un repositorio de Forgejo a través de la API de Forgejo, proporcionando actualizaciones en tiempo real sobre estadísticas como estrellas y forks.

Ejemplo 1:

{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}

Gallery

#

gallery te permite mostrar múltiples imágenes a la vez, de manera responsive con diseños más variados e interesantes.

Para añadir imágenes a la galería, usa etiquetas img para cada imagen y añade class="grid-wXX" para que la galería pueda identificar el ancho de columna para cada imagen. Los anchos disponibles por defecto empiezan en 10% y van hasta 100% en incrementos de 5%. Por ejemplo, para establecer el ancho al 65%, establece la clase a grid-w65. Además, también están disponibles anchos para 33% y 66% para construir galerías de 3 columnas. También puedes aprovechar los indicadores responsive de Tailwind para tener una cuadrícula responsive.

Ejemplo 1: Galería normal

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}

Ejemplo 2: Galería responsive

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{< /gallery >}}

Gist

#

El shortcode gist te permite incrustar un GitHub Gist directamente en tu contenido especificando el usuario del Gist, el ID y opcionalmente un archivo específico.

Ejemplo 1: Incrustar Gist completo

{{< gist "octocat" "6cad326836d38bd3a7ae" >}}

Ejemplo 2: Incrustar archivo específico del Gist

{{< gist "rauchg" "2052694" "README.md" >}}

Gitea Card

#

gitea te permite enlazar rápidamente un repositorio de Gitea a través de la API de Gitea, proporcionando actualizaciones en tiempo real sobre estadísticas como estrellas y forks.

Ejemplo 1:

{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}

GitHub Card

#

github te permite enlazar rápidamente un repositorio de GitHub, mostrando y actualizando en tiempo real las estadísticas sobre él, como el número de estrellas y forks.

Ejemplo 1:

{{< github repo="nunocoracao/blowfish" showThumbnail=true >}}

nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML

2423

628

GitLab Card

#

gitlab te permite enlazar rápidamente un Proyecto de GitLab (la jerga de GitLab para repositorio). Muestra estadísticas en tiempo real sobre él, como el número de estrellas y forks. A diferencia de github, no puede mostrar el lenguaje de programación principal de un proyecto. Finalmente, se puede proporcionar una URL de instancia de GitLab personalizada, siempre que el endpoint api/v4/projects/ esté disponible, haciendo este shortcode compatible con la mayoría de los despliegues auto-alojados / empresariales.

Ejemplo 1:

{{< gitlab projectID="278964" >}}

Hugging Face Card

#

huggingface te permite enlazar rápidamente un modelo o dataset de Hugging Face, mostrando información en tiempo real como el número de likes y descargas, junto con el tipo y descripción.

Nota: Usa el parámetro model o dataset, no ambos.

Ejemplo 1 (Modelo):

{{< huggingface model="google-bert/bert-base-uncased" >}}

Ejemplo 2 (Dataset):

{{< huggingface dataset="stanfordnlp/imdb" >}}

Icon

#

icon muestra un icono SVG y toma el nombre del icono como único parámetro. El icono se escala para coincidir con el tamaño del texto actual.

Ejemplo:

{{< icon "github" >}}

Salida:

Los iconos se rellenan usando pipelines de Hugo, lo que los hace muy flexibles. Blowfish incluye varios iconos integrados para redes sociales, enlaces y otros propósitos. Consulta la página de ejemplos de iconos para una lista completa de los iconos soportados.

Se pueden añadir iconos personalizados proporcionando tus propios assets de iconos en el directorio assets/icons/ de tu proyecto. El icono puede luego referenciarse en el shortcode usando el nombre del archivo SVG sin la extensión .svg.

Los iconos también pueden usarse en partials llamando al partial icon.

KaTeX

#

El shortcode katex puede usarse para añadir expresiones matemáticas al contenido de artículos usando el paquete KaTeX. Consulta la referencia en línea de funciones TeX soportadas para la sintaxis disponible.

Para incluir expresiones matemáticas en un artículo, simplemente coloca el shortcode en cualquier lugar del contenido. Solo necesita incluirse una vez por artículo y KaTeX renderizará automáticamente cualquier markup en esa página. Se soportan tanto la notación en línea como la notación en bloque.

La notación en línea puede generarse envolviendo la expresión con los delimitadores \( y \). Alternativamente, la notación en bloque puede generarse usando los delimitadores $$.

Ejemplo:

{{< katex >}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

Consulta la página de ejemplos de notación matemática para más ejemplos.

Keyword

#

El componente keyword puede usarse para resaltar visualmente ciertas palabras o frases importantes, por ejemplo, habilidades profesionales, etc. El shortcode keywordList puede usarse para agrupar múltiples elementos keyword. Cada elemento puede tener las siguientes propiedades.

La entrada está escrita en Markdown, así que puedes formatearla como desees.

Ejemplo 1:

{{< keyword >}} *Super* habilidad {{< /keyword >}}

Ejemplo 2:

{{< keywordList >}}
{{< keyword icon="github" >}} Lorem ipsum dolor. {{< /keyword >}}
{{< keyword icon="code" >}} Habilidad **importante** {{< /keyword >}}
{{< /keywordList >}}

{{< keyword >}} Habilidad *independiente* {{< /keyword >}}

Lead

#

lead se usa para dar énfasis al inicio de un artículo. Puede usarse para estilizar una introducción o para destacar una información importante. Simplemente envuelve cualquier contenido Markdown en el shortcode lead.

Ejemplo:

{{< lead >}}
Cuando la vida te da limones, haz limonada.
{{< /lead >}}

List

#

List mostrará una lista de artículos recientes. Este shortcode requiere un valor límite para restringir la lista. Además, soporta un where y un value para filtrar artículos por sus parámetros. Ten en cuenta que este shortcode no mostrará su página padre pero contará para el valor límite.

Ejemplo #1:

{{< list limit=2 >}}

Reciente

Bienvenido a Blowfish

3 mins

Nuevo Documentación

n9o.xyz ↗ ↖

Sitio Personal Theme Author

Ejemplo #2:

{{< list title="Muestras" cardView=true limit=6 where="Type" value="sample" >}}

Samples

LTR/RTL

#

ltr y rtl te permiten mezclar tus contenidos. Muchos usuarios de idiomas RTL quieren incluir partes del contenido en LTR. Usando este shortcode podrás hacerlo, y al aprovechar % como el delimitador más externo en el shortcode Hugo shortcodes, cualquier markdown dentro se renderizará normalmente.

Ejemplo:

- Esta es una lista markdown.
- Por defecto dirección LTR
{{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{% /rtl %}}

• Esta es una lista markdown.
• Por defecto dirección LTR

Markdown Importer

#

Este shortcode te permite importar archivos markdown de fuentes externas. Esto es útil para incluir contenido de otros repositorios o sitios web sin tener que copiar y pegar el contenido.

Ejemplo:

{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

Hi there 👋

#

🧠 Principal PM @ Docker (AI, agents, infra) · Creator of Blowfish · Ex-founder · Mentor & advisor

• 🚀 Personal blog - n9o.xyz

• 🐡 Creator and maintainer of Blowfish @ Blowfish page

• 🐳 Principal Product Manager @ Docker - working on cagent

• 📚 mentoring @ mentorcruise

Mermaid

#

mermaid te permite dibujar diagramas y visualizaciones detalladas usando texto. Usa Mermaid por debajo y soporta una amplia variedad de diagramas, gráficos y otros formatos de salida.

Simplemente escribe tu sintaxis Mermaid dentro del shortcode mermaid y deja que el plugin haga el resto.

Consulta la documentación oficial de Mermaid para detalles sobre la sintaxis y tipos de diagramas soportados.

Ejemplo:

{{< mermaid >}}
graph LR;
A[Limones]-->B[Limonada];
B-->C[Ganancia]
{{< /mermaid >}}

graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

Puedes ver ejemplos adicionales de Mermaid en la página de ejemplos de diagramas y diagramas de flujo.

Swatches

#

swatches muestra un conjunto de hasta tres colores diferentes para mostrar elementos de color como una paleta de colores. Este shortcode toma los códigos HEX de cada color y crea los elementos visuales para cada uno.

Ejemplo

{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

Salida

Tabs

#

El shortcode tabs se usa comúnmente para presentar diferentes variantes de un paso en particular. Por ejemplo, puede usarse para mostrar cómo instalar VS Code en diferentes plataformas.

Ejemplo

{{< tabs >}}

    {{< tab label="Windows" >}}
    Instalar usando Chocolatey:

    ```pwsh
    choco install vscode.install
    ```

    o instalar usando WinGet

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{< /tab >}}

    {{< tab label="macOS" >}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{< /tab >}}

    {{< tab label="Linux" >}}
    Ver [documentación](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
    {{< /tab >}}

{{< /tabs >}}

Salida

choco install vscode.install

winget install -e --id Microsoft.VisualStudioCode

brew install --cask visual-studio-code

Timeline

#

El timeline crea una línea de tiempo visual que puede usarse en diferentes casos de uso, por ejemplo, experiencia profesional, logros de un proyecto, etc. El shortcode timeline se basa en el sub-shortcode timelineItem para definir cada elemento dentro de la línea de tiempo principal. Cada elemento puede tener las siguientes propiedades.

Ejemplo:

{{< timeline >}}

{{< timelineItem icon="github" header="Encabezado" badge="Prueba badge" subheader="Subencabezado" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
{{< /timelineItem >}}


{{< timelineItem icon="code" header="Otro gran encabezado" badge="fecha - presente" subheader="Gran subencabezado" >}}
Con código HTML
<ul>
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="INCREÍBLE" >}}
Con otros shortcodes
{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
{{< /timelineItem >}}

{{< timelineItem icon="code" header="Otro gran encabezado">}}
{{< github repo="nunocoracao/blowfish" >}}
{{< /timelineItem >}}

{{< /timeline >}}

1. header

   badge test

   subheader

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
2. Another Awesome Header

   date - present

   Awesome Subheader

   Con código HTML

   • Café
   • Té
   • Leche
3. Shortcodes

   AWESOME

   Con otros shortcodes

   
4. Another Awesome Header

   

   nunocoracao/blowfish

   Personal Website & Blog Theme for Hugo

   HTML

   2423

   628

TypeIt

#

TypeIt es la herramienta JavaScript más versátil para crear efectos de máquina de escribir en el planeta. Con una configuración sencilla, te permite escribir cadenas simples o múltiples que hacen saltos de línea, se borran y reemplazan entre sí, e incluso puede manejar cadenas que contienen HTML complejo.

Blowfish implementa un subconjunto de las características de TypeIt usando un shortcode. Escribe tu texto dentro del shortcode typeit y usa los siguientes parámetros para configurar el comportamiento deseado.

Ejemplo 1:

{{< typeit >}}
Lorem ipsum dolor sit amet
{{< /typeit >}}

Ejemplo 2:

{{< typeit
  tag=h1
  lifeLike=true
>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{< /typeit >}}

Ejemplo 3:

{{< typeit
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
"Francamente, querida, me importa un bledo." Lo que el viento se llevó (1939)
"Le haré una oferta que no podrá rechazar." El Padrino (1972)
"Toto, tengo la sensación de que ya no estamos en Kansas." El Mago de Oz (1939)
{{< /typeit >}}

Youtube Lite

#

Un atajo para incrustar videos de YouTube usando la biblioteca lite-youtube-embed. Esta biblioteca es una alternativa ligera a las incrustaciones estándar de YouTube, y está diseñada para ser más rápida y eficiente.

Ejemplo 1:

{{< youtubeLite id="SgXhGb-7QbU" label="Demo de Blowfish-tools" >}}

Ejemplo 2:

Puedes usar todos los parámetros del reproductor de YouTube para la variable params, como se demuestra a continuación:

Este video comenzará después de 130 segundos (2m10)

{{< youtubeLite id="SgXhGb-7QbU" label="Demo de Blowfish-tools" params="start=130" >}}

Este video no tendrá controles de interfaz, comenzará a los 130 segundos y se detendrá 10 segundos después.

Para concatenar múltiples opciones como se muestra a continuación, necesitas añadir el carácter & entre ellas.

{{< youtubeLite id="SgXhGb-7QbU" label="Demo de Blowfish-tools" params="start=130&end=10&controls=0" >}}

Más información puede encontrarse en el repo de GitHub de youtubeLite y la página de parámetros del reproductor de YouTube.