hugo theme charlolamode

charlola.mode

Este tema do site é baseado na estrutura Hugo. Esta é uma modificação dos modelos de papel e papel hugo. É rápido e fácil de usar com o design mínimo e as funções mais básicas.

Confira meu site para ver um exemplo semelhante: www.cmart1n.com

Link para o tema Hugo: https://themes.gohugo.io/themes/hugo-theme-charlolamode/.

Características

1. Personalize sua página inicial com ...

   • Título da página
   • Seu nome
   • Descrição
   • Ícones sociais
   • Botões

2. Mude a cor de todos os elementos, como fundo, texto, ícones ...

3. Se você clicar em uma guia, verá uma lista de postagens.

   • Postagens podem ser visualizadas com imagens
   • A postagem pode levar a um link externo

Início rápido

1. Instale Hugo
2. Instale o git

Abra seu terminal ou linha de comando

1. Crie uma nova pasta 'Quickstart'

 hugo new site quickstart

2. Vá para esta pasta

 cd quickstart

3. Inicialize um repositório Git vazio no diretório atual

 git init

4. Clone este repositório em sua pasta

 git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

5. Exclua o config.toml

 rm config.toml

6. Adicionar tema em um novo arquivo config.yml

 echo "theme: charlolamode" >> config.yml

7. Inicie o servidor de desenvolvimento de Hugo para visualizar o site localmente.

 hugo server

Depois que o servidor local é iniciado, você poderá ver seu site. Se o seu webbrowser não aparecer automaticamente, abra seu navegador e digite http: // localhost: 1313. Agora você pode começar a modificar esta página no diretório. Se você salvar novas alterações, este site atualizará e renderizará automaticamente a modificação.

Abra o código do Visual Studio para editar seu blog

3. Abra seu editor favorito como o Código do Visual Studio

Configuração básica

O config.yml é seu melhor amigo. Você pode modificar e adicionar informações, como ...

• Título da página
• Seu nome
• Descrição
• Ícones sociais
• Botões

Dê uma olhada no charlolamode/config.yml para referência. Existem exemplos comentados que mostram como adicionar facilmente guias e ícones sociais como LinkedIn, Twitter, YouTube, Instagram. Copie o conteúdo em seu config.yml, que substituirá o config.yml do tema.

Alterar a imagem do perfil

Para adicionar sua foto de perfil, substitua o perfil.png na pasta estática/imagens . Certifique -se de tirar uma imagem com um rosto feliz :)

Adicione guias

No config.yml, você pode adicionar novas guias ao lado de 'Artigos' e 'Contato'. Uncomment 'categoria' para conferir.

NOTA Se você adicionar uma nova guia no config.yml, precisará fazer o seguinte:

1. Adicione uma nova pasta no diretório 'Conteúdo' com o mesmo nome da nova guia.
2. Copie _index.md de artigos para nova pasta.

Adicione novo conteúdo

Se você gosta de pressionar o novo conteúdo, crie um novo arquivo de marcação na nova pasta. Encontre um exemplo em conteúdo/artigos/artigo.md .

Mudar de cores

Dê uma olhada nos ativos/css/núcleo/tema-var.css para brincar com as cores.

Desativar o 'modo de perfil'

Para exibir o conteúdo do artigo na página inicial, em vez de informações de perfil, defina o seguinte em Params: em config.yml

 profileMode: 
    enabled: false

Com o conteúdo do artigo movido para a página inicial, a remoção da entrada principal do menu para artigos pode ser desejável:

 menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

Obrigado!

Investi meu próprio tempo para construir isso e é completamente de graça. Se este modelo economizará tempo, fique à vontade para apoiar esta página com uma doação de café :)

Eu adoraria receber feedback, enviar uma mensagem via LinkedIn!

Site online

Para pressionar o seu site on -line, use o Azure Static Web ou o Netflify. Eu uso o Azure Static Web.