Além de todos os shortcodes padrão do Hugo, o Blowfish adiciona alguns extras para funcionalidades adicionais.

Alert

#

alert exibe seu conteúdo como uma caixa de mensagem estilizada dentro do seu artigo. É útil para chamar a atenção para informações importantes que você não quer que o leitor perca.

A entrada é escrita em Markdown, então você pode formatá-la como quiser.

Exemplo 1: Sem parâmetros

{{< alert >}}
**Aviso!** Esta ação é destrutiva!
{{< /alert >}}

Exemplo 2: Parâmetro não nomeado

{{< alert "twitter" >}}
Não esqueça de me [seguir](https://twitter.com/nunocoracao) no Twitter.
{{< /alert >}}

Exemplo 3: Parâmetros nomeados

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
Isto é um erro!
{{< /alert >}}

Admonition

#

Admonitions permitem que você insira caixas de chamada atraentes no seu conteúdo.

Admonitions servem um propósito similar ao shortcode alert, mas são implementadas via hooks de renderização do Hugo. A diferença principal é a sintaxe: admonitions usam sintaxe Markdown, tornando-as mais portáveis entre diferentes plataformas, enquanto shortcodes são específicos do Hugo. A sintaxe se assemelha aos alertas do GitHub:

> [!NOTE]
> Uma admonition do tipo Note.

> [!TIP]+ Título personalizado
> Uma admonition recolhível com título personalizado.

O sinal de alerta (+ ou -) é opcional para controlar se a admonition está recolhida ou não. Note que o sinal de alerta só é compatível com o Obsidian.

Article

#

Article incorporará um único artigo em um arquivo markdown. O link para o arquivo deve ser o .RelPermalink do arquivo a ser incorporado. Note que o shortcode não exibirá nada se estiver referenciando sua página pai. Nota: se você está executando seu site em uma subpasta como o Blowfish (ou seja, /blowfish/), inclua esse caminho no link.

Exemplo:

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

Welcome to Blowfish

3 minutos

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 exibe um componente de badge estilizado que é útil para exibir metadados.

Exemplo:

{{< badge >}}
Novo artigo!
{{< /badge >}}

Button

#

button exibe um componente de botão estilizado que pode ser usado para destacar uma ação principal. Tem três variáveis opcionais href, target e rel que podem ser usadas para especificar a URL, o destino e a relação do link.

Exemplo:

{{< button href="#button" target="_self" >}}
Chamada para ação
{{< /button >}}

Carousel

#

carousel é usado para exibir múltiplas imagens de forma interativa e visualmente atraente. Isso permite que um usuário deslize através de múltiplas imagens enquanto ocupa apenas o espaço vertical de uma. Todas as imagens são exibidas usando a largura total do componente pai e a proporção de aspecto que você definir, com um padrão de 16:9.

Exemplo 1: Proporção de aspecto 16:9 e lista de imagens detalhada

{{< 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

Exemplo 2: Proporção de aspecto 21:9 e lista de imagens com regex

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

Previous Next

Chart

#

chart usa a biblioteca Chart.js para incorporar gráficos em artigos usando dados estruturados simples. Suporta vários estilos de gráficos diferentes e tudo pode ser configurado a partir do shortcode. Simplesmente forneça os parâmetros do gráfico entre as tags do shortcode e o Chart.js fará o resto.

Consulte a documentação oficial do Chart.js para detalhes sobre sintaxe e tipos de gráficos suportados.

Exemplo:

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomate', 'Mirtilo', 'Banana', 'Limão', 'Laranja'],
  datasets: [{
    label: '# de votos',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

Você pode ver exemplos adicionais do Chart.js na página de exemplos de gráficos.

Code Importer

#

Este shortcode permite importar código de fontes externas facilmente sem copiar e colar.

Exemplo:

{{< 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 permite que você vincule rapidamente um repositório Codeberg através da API do Codeberg, fornecendo atualizações em tempo real sobre estatísticas como estrelas e forks.

Exemplo 1:

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

Figure

#

O Blowfish inclui um shortcode figure para adicionar imagens ao conteúdo. O shortcode substitui a funcionalidade base do Hugo para fornecer benefícios de desempenho adicionais.

Quando uma imagem fornecida é um recurso de página, ela será otimizada usando Hugo Pipes e escalada para fornecer imagens apropriadas para diferentes resoluções de dispositivos. Se um asset estático ou URL para uma imagem externa for fornecido, será incluído como está sem nenhum processamento de imagem pelo Hugo.

O shortcode figure aceita seis parâmetros:

O Blowfish também suporta conversão automática de imagens incluídas usando sintaxe Markdown padrão. Simplesmente use o seguinte formato e o tema cuidará do resto:

![Texto alternativo](image.jpg "Legenda da imagem")

Exemplo:

{{< figure
    src="abstract.jpg"
    alt="Arte abstrata roxa"
    caption="Foto por [Jr Korpa](https://unsplash.com/@jrkorpa) no [Unsplash](https://unsplash.com/)"
    >}}

<!-- OU -->

![Arte abstrata roxa](abstract.jpg "Foto por [Jr Korpa](https://unsplash.com/@jrkorpa) no [Unsplash](https://unsplash.com/)")

Forgejo Card

#

forgejo permite que você vincule rapidamente um repositório Forgejo através da API do Forgejo, fornecendo atualizações em tempo real sobre estatísticas como estrelas e forks.

Exemplo 1:

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

Gallery

#

gallery permite que você exiba múltiplas imagens de uma vez, de forma responsiva com layouts mais variados e interessantes.

Para adicionar imagens à galeria, use tags img para cada imagem e adicione class="grid-wXX" para que a galeria possa identificar a largura da coluna para cada imagem. As larguras disponíveis por padrão começam em 10% e vão até 100% em incrementos de 5%. Por exemplo, para definir a largura em 65%, defina a classe como grid-w65. Além disso, larguras para 33% e 66% também estão disponíveis para construir galerias de 3 colunas. Você também pode aproveitar os indicadores responsivos do Tailwind para ter uma grade responsiva.

Exemplo 1: Galeria 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 >}}

Exemplo 2: Galeria responsiva

{{< 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

#

O shortcode gist permite que você incorpore um GitHub Gist diretamente no seu conteúdo especificando o usuário do Gist, ID e opcionalmente um arquivo específico.

Exemplo 1: Incorporar Gist inteiro

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

Exemplo 2: Incorporar arquivo específico do Gist

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

Gitea Card

#

gitea permite que você vincule rapidamente um repositório Gitea através da API do Gitea, fornecendo atualizações em tempo real sobre estatísticas como estrelas e forks.

Exemplo 1:

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

GitHub Card

#

github permite que você vincule rapidamente um repositório GitHub, enquanto exibe e atualiza em tempo real as estatísticas sobre ele, como o número de estrelas e forks.

Exemplo 1:

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

nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML

2423

628

GitLab Card

#

gitlab permite que você vincule rapidamente um Projeto GitLab (jargão do GitLab para repositório). Ele exibe estatísticas em tempo real sobre ele, como o número de estrelas e forks. Diferente do github, não pode exibir a linguagem de programação principal de um projeto. Por fim, uma URL de instância GitLab personalizada pode ser fornecida, desde que o endpoint api/v4/projects/ esteja disponível, tornando este shortcode compatível com a maioria dos deployments auto-hospedados / empresariais.

Exemplo 1:

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

Hugging Face Card

#

huggingface permite que você vincule rapidamente um modelo ou dataset do Hugging Face, exibindo informações em tempo real como o número de likes e downloads, junto com tipo e descrição.

Nota: Use o parâmetro model ou dataset, não ambos.

Exemplo 1 (Modelo):

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

Exemplo 2 (Dataset):

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

Icon

#

icon exibe um ícone SVG e recebe o nome do ícone como seu único parâmetro. O ícone é escalado para corresponder ao tamanho do texto atual.

Exemplo:

{{< icon "github" >}}

Saída:

Os ícones são preenchidos usando pipelines do Hugo, o que os torna muito flexíveis. O Blowfish inclui vários ícones integrados para redes sociais, links e outros propósitos. Confira a página de exemplos de ícones para uma lista completa dos ícones suportados.

Ícones personalizados podem ser adicionados fornecendo seus próprios assets de ícones no diretório assets/icons/ do seu projeto. O ícone pode então ser referenciado no shortcode usando o nome do arquivo SVG sem a extensão .svg.

Ícones também podem ser usados em partials chamando o partial icon.

KaTeX

#

O shortcode katex pode ser usado para adicionar expressões matemáticas ao conteúdo de artigos usando o pacote KaTeX. Consulte a referência online de funções TeX suportadas para a sintaxe disponível.

Para incluir expressões matemáticas em um artigo, simplesmente coloque o shortcode em qualquer lugar do conteúdo. Ele só precisa ser incluído uma vez por artigo e o KaTeX renderizará automaticamente qualquer markup nessa página. Tanto a notação inline quanto em bloco são suportadas.

A notação inline pode ser gerada envolvendo a expressão com os delimitadores \( e \). Alternativamente, a notação em bloco pode ser gerada usando delimitadores $$.

Exemplo:

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

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

Confira a página de exemplos de notação matemática para mais exemplos.

Keyword

#

O componente keyword pode ser usado para destacar visualmente certas palavras ou frases importantes, por exemplo, habilidades profissionais, etc. O shortcode keywordList pode ser usado para agrupar múltiplos itens keyword. Cada item pode ter as seguintes propriedades.

A entrada é escrita em Markdown, então você pode formatá-la como quiser.

Exemplo 1:

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

Exemplo 2:

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

{{< keyword >}} Habilidade *independente* {{< /keyword >}}

Lead

#

lead é usado para dar ênfase ao início de um artigo. Pode ser usado para estilizar uma introdução ou para chamar a atenção para uma informação importante. Simplesmente envolva qualquer conteúdo Markdown no shortcode lead.

Exemplo:

{{< lead >}}
Quando a vida te der limões, faça limonada.
{{< /lead >}}

List

#

List exibirá uma lista de artigos recentes. Este shortcode requer um valor limite para restringir a lista. Além disso, suporta um where e um value para filtrar artigos por seus parâmetros. Note que este shortcode não exibirá sua página pai, mas ela contará para o valor limite.

Exemplo #1:

{{< list limit=2 >}}

Recente

Bem-vindo ao Blowfish

3 minutos

Novo Documentação

n9o.xyz ↗ ↖

Site Pessoal Theme Author

Exemplo #2:

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

Samples

LTR/RTL

#

ltr e rtl permitem que você misture seus conteúdos. Muitos usuários de idiomas RTL querem incluir partes do conteúdo em LTR. Usando este shortcode você poderá fazer isso, e ao aproveitar % como o delimitador mais externo no shortcode Hugo shortcodes, qualquer markdown dentro será renderizado normalmente.

Exemplo:

- Esta é uma lista markdown.
- Por padrão direção LTR
{{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{% /rtl %}}

• Esta é uma lista markdown.
• Por padrão direção LTR

Markdown Importer

#

Este shortcode permite que você importe arquivos markdown de fontes externas. Isso é útil para incluir conteúdo de outros repositórios ou sites sem ter que copiar e colar o conteúdo.

Exemplo:

{{< 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 permite que você desenhe diagramas e visualizações detalhadas usando texto. Ele usa o Mermaid por baixo e suporta uma ampla variedade de diagramas, gráficos e outros formatos de saída.

Simplesmente escreva sua sintaxe Mermaid dentro do shortcode mermaid e deixe o plugin fazer o resto.

Consulte a documentação oficial do Mermaid para detalhes sobre sintaxe e tipos de diagramas suportados.

Exemplo:

{{< mermaid >}}
graph LR;
A[Limões]-->B[Limonada];
B-->C[Lucro]
{{< /mermaid >}}

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

Você pode ver exemplos adicionais do Mermaid na página de exemplos de diagramas e fluxogramas.

Swatches

#

swatches exibe um conjunto de até três cores diferentes para mostrar elementos de cor como uma paleta de cores. Este shortcode recebe os códigos HEX de cada cor e cria os elementos visuais para cada uma.

Exemplo

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

Saída

Tabs

#

O shortcode tabs é comumente usado para apresentar diferentes variantes de uma etapa específica. Por exemplo, pode ser usado para mostrar como instalar o VS Code em diferentes plataformas.

Exemplo

{{< tabs >}}

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

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

    ou 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" >}}
    Veja a [documentação](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
    {{< /tab >}}

{{< /tabs >}}

Saída

choco install vscode.install

winget install -e --id Microsoft.VisualStudioCode

brew install --cask visual-studio-code

Timeline

#

O timeline cria uma linha do tempo visual que pode ser usada em diferentes casos de uso, por exemplo, experiência profissional, conquistas de um projeto, etc. O shortcode timeline depende do sub-shortcode timelineItem para definir cada item dentro da linha do tempo principal. Cada item pode ter as seguintes propriedades.

Exemplo:

{{< timeline >}}

{{< timelineItem icon="github" header="Cabeçalho" badge="Teste badge" subheader="Subcabeçalho" >}}
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="Outro ótimo cabeçalho" badge="data - presente" subheader="Ótimo subcabeçalho" >}}
Com código HTML
<ul>
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="INCRÍVEL" >}}
Com outros 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="Outro ótimo cabeçalho">}}
{{< 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

   Com código HTML

   • Café
   • Chá
   • Leite
3. Shortcodes

   AWESOME

   Com outros shortcodes

   
4. Another Awesome Header

   

   nunocoracao/blowfish

   Personal Website & Blog Theme for Hugo

   HTML

   2423

   628

TypeIt

#

TypeIt é a ferramenta JavaScript mais versátil para criar efeitos de máquina de escrever no planeta. Com uma configuração simples, permite que você digite strings simples ou múltiplas que fazem quebras de linha, apagam e substituem umas às outras, e pode até lidar com strings que contêm HTML complexo.

O Blowfish implementa um subconjunto das funcionalidades do TypeIt usando um shortcode. Escreva seu texto dentro do shortcode typeit e use os seguintes parâmetros para configurar o comportamento desejado.

Exemplo 1:

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

Exemplo 2:

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

Exemplo 3:

{{< typeit
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
"Francamente, minha querida, eu não dou a mínima." E o Vento Levou (1939)
"Vou fazer uma oferta que ele não pode recusar." O Poderoso Chefão (1972)
"Toto, tenho a sensação de que não estamos mais no Kansas." O Mágico de Oz (1939)
{{< /typeit >}}

Youtube Lite

#

Um atalho para incorporar vídeos do YouTube usando a biblioteca lite-youtube-embed. Esta biblioteca é uma alternativa leve aos embeds padrão do YouTube, e é projetada para ser mais rápida e eficiente.

Exemplo 1:

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

Exemplo 2:

Você pode usar todos os parâmetros do player do YouTube para a variável params, como demonstrado abaixo:

Este vídeo começará após 130 segundos (2m10)

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

Este vídeo não terá controles de interface, começará a 130 segundos e parará 10 segundos depois.

Para concatenar múltiplas opções como mostrado abaixo, você precisa adicionar o caractere & entre elas.

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

Mais informações podem ser encontradas no repo do GitHub do youtubeLite e na página de parâmetros do player do YouTube.