O Blowfish fornece um layout de página inicial totalmente flexível. Existem dois modelos principais para escolher com configurações adicionais para ajustar o design. Alternativamente, você também pode fornecer seu próprio modelo e ter controle total sobre o conteúdo da página inicial.
O layout da página inicial é controlado pela configuração homepage.layout no arquivo de configuração params.toml. Além disso, todos os layouts têm a opção de incluir uma lista de artigos recentes.
Layout Perfil#
O layout padrão é o layout de perfil, que é ótimo para sites pessoais e blogs. Ele coloca os detalhes do autor em primeiro plano, fornecendo uma imagem e links para perfis sociais.
As informações do autor são fornecidas no arquivo de configuração de idiomas. Consulte as seções Primeiros Passos e Configuração de Idioma para detalhes dos parâmetros.
Além disso, qualquer conteúdo Markdown fornecido no conteúdo da página inicial será colocado abaixo do perfil do autor. Isso permite flexibilidade extra para exibir uma biografia ou outro conteúdo personalizado usando shortcodes.
Para habilitar o layout Perfil, defina homepage.layout = "profile" no arquivo de configuração params.toml.
Layout Página#
O layout de página é simplesmente uma página de conteúdo normal que exibe seu conteúdo Markdown. É ótimo para sites estáticos e fornece muita flexibilidade.
Para habilitar o layout Página, defina homepage.layout = "page" no arquivo de configuração params.toml.
Layout Hero#
O layout hero combina ideias dos layouts de perfil e cartão. Este não apenas exibe informações sobre o autor do site, mas também carrega seu markdown abaixo dele.
Para habilitar o layout Hero, defina homepage.layout = "hero" e homepage.homepageImage no arquivo de configuração params.toml.
Layout Fundo#
O layout de fundo é uma versão mais suave do layout hero. Assim como no layout Hero, este também exibe informações sobre o autor do site e carrega seu markdown abaixo dele.
Para habilitar o layout Fundo, defina homepage.layout = "background" e homepage.homepageImage no arquivo de configuração params.toml.
Layout Cartão#
O layout de cartão é uma extensão do layout de página. Ele fornece o mesmo nível de flexibilidade, também exibindo seu conteúdo markdown e adiciona uma imagem de cartão para exibir conteúdo visual.
Para habilitar o layout Cartão, defina homepage.layout = "card" e homepage.homepageImage no arquivo de configuração params.toml.
Layout personalizado#
Se os layouts de página inicial integrados não forem suficientes para suas necessidades, você tem a opção de fornecer seu próprio layout personalizado. Isso permite que você tenha controle total sobre o conteúdo da página e essencialmente lhe dá uma tela em branco para trabalhar.
Para habilitar o layout personalizado, defina homepage.layout = "custom" no arquivo de configuração params.toml.
Com o valor de configuração definido, crie um novo arquivo custom.html e coloque-o em layouts/partials/home/custom.html. Agora, o que estiver no arquivo custom.html será colocado na área de conteúdo da página inicial do site. Você pode usar qualquer HTML, Tailwind ou funções de template Hugo que desejar para definir seu layout.
Para incluir artigos recentes no layout personalizado, use o partial recent-articles/main.html.
Como exemplo, a página inicial deste site usa o layout personalizado para permitir alternar entre os layouts de perfil e página. Visite o repositório GitHub para ver como funciona.
Artigos recentes#
Todos os layouts de página inicial têm a opção de exibir artigos recentes abaixo do conteúdo principal da página. Para habilitar isso, basta definir a configuração homepage.showRecent como true no arquivo de configuração params.toml.
Os artigos listados nesta seção são derivados da configuração mainSections que permite quaisquer tipos de conteúdo que você esteja usando em seu site. Por exemplo, se você tiver seções de conteúdo para posts e projects, você poderia definir esta configuração como ["posts", "projects"] e todos os artigos nessas duas seções seriam usados para preencher a lista de recentes. O tema espera que esta configuração seja um array, então se você usar apenas uma seção para todo o seu conteúdo, você deve definir assim: ["blog"].
Miniaturas#
O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se você está familiarizado com a estrutura de artigos do Hugo, basta colocar um arquivo de imagem (quase todos os formatos são suportados, mas recomendamos .png ou .jpg) que comece com feature* dentro da pasta do seu artigo. E é isso, o Blowfish poderá usar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais.
Aqui há um guia com mais informações e um exemplo se você quiser ver um exemplo.
Galeria de cartões#
O Blowfish também suporta exibir as listas padrão de artigos como galerias de cartões. Você pode configurar isso tanto para a seção de recentes na página inicial quanto para listas de artigos em todo o seu site. Para a página inicial, você pode usar homepage.cardView e homepage.cardViewScreenWidth; e para listas, use list.cardView e list.cardViewScreenWidth. Consulte a documentação de configuração para mais detalhes, e a página inicial para uma demonstração ao vivo.
