download do código-fonte de hugo toigian - download do código-fonte de hugo toigian

hugo toigian

Outras categorias

1.0.0

Baixar

Hugo Toigian

Um tema Hugo mínimo com Tailwind CSS

Toigian - Tối giản (vietnamita): minimalista (inglês)
Isenção de responsabilidade : não sou um desenvolvedor front-end, apenas um cara que gosta de fazer ajustes, então meu código pode não ser bonito/limpo. Tento aprender Tailwind CSS e o resultado é hugo-toigian.

0. Vitrine
1. Recursos
2. Pré-requisitos
3. Instalação
3. Configuração
- 3.1. Configuração do site
- 3.2. Configuração de página
4. Códigos de acesso
5. Personalização
6. Contribuindo
7. Créditos

0. Vitrine

Essas capturas de tela podem estar desatualizadas. Dê uma olhada no site de demonstração para ver as novidades.

Escuro	Luz

1. Recursos

Design minimalista ( tối giản ). Altamente inspirado em mellow.dev.
Use a paleta de cores elegante e minimalista Rosé Pine.
Customizável.
Suporta modo claro/escuro.
Contadores aninhados para cabeçalho.
Índice flutuante lateral.
Códigos de acesso úteis.
Suporte para comentários.
Destaque de sintaxe: use solução do lado do servidor (Chroma, hugo integrado), adicionei estilos Rosé Pine ao Chroma, para que tudo fique na mesma vibração.

2. Pré-requisitos

git , npm instalado.
Uma versão mínima "estendida" do Hugo v0.93.0 e superior.

snap install hugo --channel=extended

O PostCSS de Hugo Pipe requer que o pacote JavaScript postcss-cli seja instalado no ambiente ( npm install -g postcss postcss-cli ) junto com qualquer plugin PostCSS usado (por exemplo, npm install -g autoprefixer ). Se você estiver usando o pacote Hugo Snap, PostCSS e plugin(s) precisam ser instalados localmente no diretório do site Hugo, por exemplo, npm install postcss-cli sem o sinalizador -g.

3. Instalação

Vá para o diretório raiz do seu site Hugo ou crie um novo site com:

hugo new site hugo-example-site
cd hugo-example-site
git init

Adicione o tema.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Instale módulos Nodejs.

 cd themes/hugo-toigian
npm install

Por fim, atualize o tema em seu arquivo de configuração config.toml no diretório raiz do seu site Hugo.

 theme = " hugo-toigian "

Execute o servidor para ver uma prévia ao vivo dele.

hugo server -DF --disableFastRender

Crie páginas estáticas

hugo --environment production --minify

3. Configuração

3.1. Configuração do site

Existem algumas opções de configuração que você pode adicionar ao arquivo config.toml.

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. Configuração de página

Você pode especificar parâmetros adicionais no início de páginas individuais.

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. Códigos de acesso

Confira os códigos de acesso.

5. Personalização

Parciais: Existem parciais de layout disponíveis para você substituir facilmente componentes do tema em layouts/partials/ .

Parcial vazio	Colocação	Uso
`layouts/partials/custom/head.html`	Antes de fechar a tag `<head>`	Adicionar CSS/JS personalizado
`layouts/partials/custom/content-before.html`	Antes do conteúdo da página
`layouts/partials/custom/content-after.html`	Depois do conteúdo da página
`layouts/partials/font.html`		Importar fontes personalizadas

Personalização extra:

Arquivo	Descrição
`assets/css/custom.css`	Personalize ou substitua estilos CSS

Por exemplo, se você não gosta da fonte escolhida (Inconsolata) e deseja usar a sua própria escolha, siga estes passos:

Crie layouts/partials/font.html para importar suas fontes:

 <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>

Crie assets/css/custom.css :

 // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. Contribuindo

Como você já sabe, não sou desenvolvedor front-end. Portanto, se você encontrar algo errado ou quiser fazer melhorias, não hesite em abrir um issue/pull request.

Os objetivos principais são: