Para além de todos os shortcodes predefinidos do Hugo, o Blowfish adiciona alguns extras para funcionalidades adicionais.

Alert

#

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

A entrada é escrita em Markdown, pelo que pode formatá-la como desejar.

Exemplo 1: Sem parâmetros

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

Exemplo 2: Parâmetro não nomeado

{{< alert "twitter" >}}
Não te esqueças 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

#

As admonitions permitem-lhe inserir caixas de chamada atraentes no seu conteúdo.

As admonitions servem um propósito semelhante ao shortcode alert, mas são implementadas através de hooks de renderização do Hugo. A diferença principal é a sintaxe: as admonitions utilizam sintaxe Markdown, tornando-as mais portáveis entre diferentes plataformas, enquanto os shortcodes são específicos do Hugo. A sintaxe assemelha-se 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 num ficheiro markdown. O link para o ficheiro deve ser o .RelPermalink do ficheiro a incorporar. Note que o shortcode não apresentará nada se estiver a referenciar a sua página pai. Nota: se está a executar o seu site numa 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 apresenta um componente de badge estilizado que é útil para apresentar metadados.

Exemplo:

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

Button

#

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

Exemplo:

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

Carousel

#

carousel é utilizado para apresentar múltiplas imagens de forma interativa e visualmente atraente. Isto permite que um utilizador deslize através de múltiplas imagens enquanto ocupa apenas o espaço vertical de uma. Todas as imagens são apresentadas utilizando a largura total do componente pai e a proporção de aspeto que definir, com uma predefinição de 16:9.

Exemplo 1: Proporção de aspeto 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 aspeto 21:9 e lista de imagens com regex

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

Previous Next

Chart

#

chart utiliza a biblioteca Chart.js para incorporar gráficos em artigos utilizando dados estruturados simples. Suporta vários estilos de gráficos diferentes e tudo pode ser configurado a partir do shortcode. Basta fornecer 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 >}}

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-lhe vincular 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, será otimizada utilizando 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 tal 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 utilizando sintaxe Markdown padrão. Basta utilizar o seguinte formato e o tema tratará 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-lhe vincular 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-lhe apresentar múltiplas imagens de uma vez, de forma responsiva com layouts mais variados e interessantes.

Para adicionar imagens à galeria, utilize 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 predefiniçã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. Também pode aproveitar os indicadores responsivos do Tailwind para ter uma grelha 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-lhe incorporar um GitHub Gist diretamente no seu conteúdo especificando o utilizador do Gist, ID e opcionalmente um ficheiro específico.

Exemplo 1: Incorporar Gist inteiro

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

Exemplo 2: Incorporar ficheiro específico do Gist

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

Gitea Card

#

gitea permite-lhe vincular 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-lhe vincular rapidamente um repositório GitHub, enquanto apresenta 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-lhe vincular rapidamente um Projeto GitLab (jargão do GitLab para repositório). Apresenta estatísticas em tempo real sobre ele, como o número de estrelas e forks. Ao contrário do github, não consegue apresentar a linguagem de programação principal de um projeto. Por fim, pode ser fornecido um URL de instância GitLab personalizado, desde que o endpoint api/v4/projects/ esteja disponível, tornando este shortcode compatível com a maioria dos deployments auto-alojados / empresariais.

Exemplo 1:

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

Hugging Face Card

#

huggingface permite-lhe vincular rapidamente um modelo ou dataset do Hugging Face, apresentando informações em tempo real como o número de likes e downloads, juntamente com tipo e descrição.

Nota: Utilize 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 apresenta um ícone SVG e recebe o nome do ícone como único parâmetro. O ícone é escalado para corresponder ao tamanho do texto atual.

Exemplo:

{{< icon "github" >}}

Saída:

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

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

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

KaTeX

#

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

Para incluir expressões matemáticas num artigo, basta colocar o shortcode em qualquer lugar do conteúdo. Só precisa de ser incluído uma vez por artigo e o KaTeX renderizará automaticamente qualquer markup nessa página. Tanto a notação inline como 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 utilizando 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\)

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

Keyword

#

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

A entrada é escrita em Markdown, pelo que pode formatá-la como desejar.

Exemplo 1:

{{< keyword >}} *Super* competência {{< /keyword >}}

Exemplo 2:

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

{{< keyword >}} Competência *independente* {{< /keyword >}}

Lead

#

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

Exemplo:

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

List

#

List apresentará 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 pelos seus parâmetros. Note que este shortcode não apresentará a sua página pai, mas ela contará para o valor limite.

Exemplo #1:

{{< list limit=2 >}}

Recentes

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-lhe misturar os seus conteúdos. Muitos utilizadores de idiomas RTL querem incluir partes do conteúdo em LTR. Utilizando este shortcode poderá fazê-lo, e ao aproveitar % como o delimitador mais externo no shortcode Hugo shortcodes, qualquer markdown dentro será renderizado normalmente.

Exemplo:

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

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

Markdown Importer

#

Este shortcode permite-lhe importar ficheiros markdown de fontes externas. Isto é útil para incluir conteúdo de outros repositórios ou sites sem ter de 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-lhe desenhar diagramas e visualizações detalhadas utilizando texto. Utiliza o Mermaid por baixo e suporta uma ampla variedade de diagramas, gráficos e outros formatos de saída.

Basta escrever a sua sintaxe Mermaid dentro do shortcode mermaid e deixar 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]

Pode ver exemplos adicionais do Mermaid na página de exemplos de diagramas e fluxogramas.

Swatches

#

swatches apresenta 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 é comummente utilizado para apresentar diferentes variantes de uma etapa específica. Por exemplo, pode ser utilizado para mostrar como instalar o VS Code em diferentes plataformas.

Exemplo

{{< tabs >}}

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

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

    ou instalar utilizando WinGet

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

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

    {{< tab label="Linux" >}}
    Consulte 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 temporal visual que pode ser utilizada 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 temporal 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 excelente cabeçalho" badge="data - presente" subheader="Excelente subcabeçalho" >}}
Com código HTML
<ul>
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="FANTÁSTICO" >}}
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 excelente 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-lhe digitar 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 utilizando um shortcode. Escreva o seu texto dentro do shortcode typeit e utilize 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, não quero saber." E Tudo o Vento Levou (1939)
"Vou fazer-lhe uma oferta que ele não pode recusar." O Padrinho (1972)
"Toto, tenho a sensação de que já não estamos no Kansas." O Feiticeiro de Oz (1939)
{{< /typeit >}}

Youtube Lite

#

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

Exemplo 1:

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

Exemplo 2:

Pode utilizar 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á controlos de interface, começará aos 130 segundos e parará 10 segundos depois.

Para concatenar múltiplas opções como mostrado abaixo, precisa de 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 repositório GitHub do youtubeLite e na página de parâmetros do player do YouTube.