hugo dream plus
Yume
Este tema é uma versão atualizada do tema dos sonhos de Yue Yang e contém toneladas de novos recursos como:
Este tema pode ser usado para dois propósitos:
Este projeto segue o Código de Conduta do Covenant Colaborador. Ao participar, você deve defender este código. Por favor, relate um comportamento inaceitável a [email protected].
Instalação
Começando
Documentação
Quase terminado
Contribuindo
Licença
O tema pode ser instalado executando os seguintes comandos na pasta do site Hugo .
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveDepois que o tema for instalado com sucesso, você terá que fazer um pouco de ajuste do tema para conhecer seu gosto.
Dentro da pasta exampleSite , você encontrará os arquivos de configuração, cards.toml e posts.toml que podem ser usados para ajustar o tema.
Você deve usar esses arquivos de configuração como base para o seu site, pois eles cuidam das declarações variáveis necessárias , que você pode editar de acordo com suas necessidades.
Defina -se através das seguintes variáveis de configuração em params na tabela author , como mostrado:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "Depois disso, preencha as variáveis sociais no final do arquivo de configuração. Este tema suporta os seguintes sites sociais: (os exemplos são dados)
| Link social | Variável | Exemplo de inicialização |
|---|---|---|
| Github | Github | github = "username" |
email = "[email protected]" | ||
twitter = "username" | ||
facebook = "username" | ||
| YouTube | YouTube | youtube = "username" |
| Médio | médio | medium = "username" |
linkedin = "username" | ||
| Stackoverflow | Stackoverflow | stackoverflow = "number/username" |
| Codepen | codepen | codepen = "username" |
reddit = "username" |
Essas variáveis devem estar na tabela [social] do config.toml ou seu equivalente a YAML ou JSON .
[ social ]
github = " UtkarshVerma "Quando isso terminar, escreva a seção " About Me " do seu site em Markdown, conforme indicado aqui: erro e páginas.
Como afirmado anteriormente, esse tema tem duas visualizações, visualização de cartões e visualização de postagens . O tipo de renderização de visão depende do tipo de conteúdo que você alimenta para sonhar Plus . Portanto:
cards na pasta /content ativa a visualização do cartão .posts na pasta /content ativa a exibição de postagem .A variável
contentTypeagora foi descontinuada.
Uma distinção clara entre a visualização é que a visualização do cartão não suporta postagens, mas redireciona para o link especificado, enquanto a visualização do post . Você pode testá -los visitando meus sites (declarados acima) que os usam. Além disso, a criação de postagem/cartão é feita de maneira diferente para as duas visualizações. É o seguinte:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationDepois disso, basta abrir seu cartão/post de marcação e fornecer os parâmetros para o cartão/post.
Existem duas maneiras diferentes de configurar o pano de fundo deste tema. Essas configurações são mutuamente exclusivas entre si.
Para definir uma cor de fundo específica, faça -o através da variável color . Se você deseja definir uma combinação aleatória de cores como seu plano de fundo, basta deixar a variável de cor sem seleção .
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent Especifique a imagem que você deseja definir como plano de fundo através da matriz images . Se você preferir um único fundo de imagem, basta fornecer um único valor à matriz. Por exemplo:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background O fornecimento de várias imagens para a matriz images permite o recurso de fundo da imagem aleatória do Dream Plus, que acalma o plano de fundo dentro da matriz fornecida toda vez que o site estiver recarregado. Você também pode desfocar o plano de fundo até certo ponto através da variável blur .
Todas as variáveis de configuração de plano de fundo devem ser colocadas dentro da tabela
backroundemparams
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "As capas para cada cartão ou cartão são processadas pelo Dream Plus usando o processamento de imagens Hugo para tempos de carregamento de sites mais rápidos. Os caminhos de pesquisa para o arquivo de capa estão conforme declarado abaixo:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
Especificando a imagem da capa através do FrontMatter agora foi preterida. As capas de cartão agora podem ser definidas através da tecla de capa frontmatter atravéscover. No entanto, o processamento da imagem não será aplicável a tais capas. Além disso, as tampas do FrontMatter são priorizadas em relação aos recursos da imagem , portanto, para fazer as capas de recursos de imagem renderizam, você terá que remover a tecla de tampa do FrontMatter primeiro.
Você também pode modificar o processo de processamento de imagem através da variável coverArgs em [params.features] . Os argumentos aprovados devem ser para a função .Resize , já que é isso que o Dream Plus utiliza. Por exemplo,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image Você pode configurar seu site com base no dispositivo cliente usando a variável JS isMobile . É true quando o dispositivo cliente é um celular e vice -versa.
Este tema suporta a personalização total de páginas sobre sobre e erros . Essas páginas podem ser personalizadas através dos arquivos about.md e 404.md O Dream Plus lê os arquivos indicados acima como texto simples de marcação e os renderiza. Depois de terminar de escrever os arquivos e modificá -los de acordo com suas necessidades, cole -os na pasta content do seu site Hugo. Se você não deseja que essas páginas sejam construídas por Hugo e servidas com seus próprios links, como <website>.<domain>/about <website>.<domain>/404 Em seguida, você pode dizer a Hugo para ignorá -los através da variável ignoreFiles em seu arquivo config.toml da seguinte maneira:
ignoreFiles = [ " content/404.md " , " content/about.md " ] Você também pode definir um favicon personalizado para o seu site através da variável de configuração favicon em params . Por exemplo,
[params]
favicon = "/images/defaultFav.ico"
O script de site curto.st foi implementado neste tema. Para usá -lo, você precisará configurá -lo através da tabela shortest em params .
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define Se você deseja controlar a quantidade de postagens/cartões que uma página possui, pode fazê -lo usando a variável de configuração paginate .
paginate = 4 # Defaults to 10 Além disso, as tags, quando ativadas, não serão exibidas no cabeçalho e na barra lateral por padrão. Somente as 8 principais tags (em termos de artigo) são exibidas lá para evitar congestionamentos. No entanto, ele pode ser substituído usando a variável tagLimit da tabela [params.tag] .
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsExistem outras configurações menores também. Você pode configurá -los referindo -se aos comentários dentro do arquivo de configuração.
A documentação para este repositório está atualmente sob trabalho e é adicionada ao wiki deste repositório. As contribuições do wiki são bem -vindas. Sinta -se à vontade para me perguntar sobre os recursos desse tema para isso.
Depois de terminar as configurações, você está pronto para ir. Então, teste seu site usando:
hugo serverSeu site agora deve estar disponível localmente em http: // localhost: 1313 para fins de teste.
Para testar o site de exemplo, você precisará especificar explicitamente o arquivo de configuração para Hugo. Isso é feito da seguinte maneira:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlEncontrei algo interessante para adicionar a esse tema, ou melhor, um? Bug? Deixe -me saber sobre isso através do rastreador de problemas. Solicitações de tração também são bem -vindas. Para obter instruções mais detalhadas sobre como contribuir, consulte contribuindo.md
Este tema é lançado sob a licença do MIT .
