quinta tema hugo

Quint: Essência do Minimalismo

Quint é um tema Hugo minimalista projetado para evocar uma sensação limpa e arejada, enfatizando clareza e facilidade de leitura. Possui elegantes banners de imagem integrados e um design leve, tornando-o ideal para exibir seu conteúdo no centro do palco.

Confira o repositório do site de demonstração, que você também pode usar como modelo inicial para um novo site. (Psiu... há um botão de implantação no Netlify com um clique.)

Demonstração ao vivo aqui.

Características

• Design Minimalista : Focado na legibilidade do conteúdo com o mínimo de distrações.

• Modos claro e escuro : troca automática de tema que respeita as configurações do navegador/dispositivo do visualizador.

• Layout responsivo : fica ótimo em dispositivos móveis e desktop.

• Banners de imagens incluídos : vem com lindos banners de imagens minimalistas que dão o tom ao seu site. Substitua-os ou adicione os seus próprios a qualquer momento.

• Pesquisa de site : pesquisa integrada em seu site estático usando Lunr.js.

• Ícones sociais : links configuráveis ​​para suas mídias sociais no rodapé.

Início rápido

Para começar a usar o Quint, você precisa ter o Hugo instalado em sua máquina. Para mais informações sobre a instalação do Hugo, consulte a documentação oficial do Hugo.

Para obter um guia passo a passo para criar um novo site com Hugo, leia o Início rápido.

Etapa 1: instale o tema

Com o Hugo instalado, adicione Quint ao diretório de temas do seu site. Na raiz do seu site, execute:

 submódulo git adicionar https://github.com/victoriadrake/hugo-theme-quint.git temas/quint

Etapa 2: adicione o tema à sua configuração

Abra o arquivo de configuração do seu site Hugo ( hugo.toml , hugo.yaml ou hugo.json ) e atualize o parâmetro theme para usar quint :

Para hugo.toml :

 tema = "quint"

Para hugo.yaml :

 tema: "quinto"

Etapa 3: configurar

Quint parece ótimo fora da caixa. Opcionalmente, copie os valores de configuração de yoursite/themes/quint/hugo.toml para a configuração do seu site ( yoursite/hugo.toml ) para personalizar ainda mais o Quint.

Etapa 4: execute o servidor

Execute o Hugo para gerar seu site e inicializar o servidor. Na raiz do seu site, execute:

 servidor hugo

Navegue até http://localhost:1313 em seu navegador para ver seu site em ação com o tema Quint.

Obtenha atualizações

Para baixar a versão mais recente do Quint, execute:

 atualização do submódulo git --remote temas/quint

Personalização

Quint foi projetado para ser simples de personalizar.

CSS

Adicione facilmente seus próprios arquivos CSS personalizados nomeando-os na configuração do Hugo:

 [params]css = ["css/custom.css"] # Suas substituições CSS personalizadas, armazenadas em yoursite/static/

Layouts

Você pode substituir qualquer layout usando um arquivo com o mesmo nome no diretório do projeto. Por exemplo, o arquivo yoursite/layouts/partials/contact.html substituirá yoursite/themes/quint/layouts/partials/contact.html .

Adicione ou remova seções da página inicial substituindo o arquivo yoursite/themes/quint/layouts/index.html . Basta criar uma cópia deste arquivo no diretório do seu projeto ( yoursite/layouts/index.html ) e remover ou adicionar quaisquer partial que desejar.

Banners de imagem

Se uma página ou postagem não especificar uma image no cabeçalho, Quint exibirá um lindo banner de imagem escolhendo uma imagem aleatória no diretório themes/quint/static/images .

Isso é feito escolhendo um número aleatório de 1 a 10, que corresponde ao nome de um arquivo de imagem. Você pode adicionar a esta coleção ou substituir qualquer imagem que desejar. Basta atualizar o número aleatório máximo para corresponder ao número de imagens que você possui.

 [params]numImages = 12 # Número de imagens aleatórias para escolher para banners (em temas/quint/static/images)

Contribuindo

Contribuições para Quint são bem-vindas! Sinta-se à vontade para enviar problemas ou receber solicitações no GitHub para melhorar a funcionalidade ou documentação do tema.

Quer algumas ideias para começar? Aqui está uma lista rápida de recursos que eu adoraria ver adicionados:

• Botões de cópia de bloco de código

• Destaque de sintaxe Chroma de Hugo

• Gerador de ativos do Hugo com pipeline, impressão digital, agrupamento e minificação

• Suporte multilíngue

• Navegação estrutural

Licença

Este tema é lançado sob a licença MIT. Para obter mais detalhes, consulte o arquivo LICENSE.

Atribuição

• Quint usa a excelente fonte Open Sauce.

• Maquete do dispositivo criada em deviceframes.com.