hugo theme fiber

Um tema Hugo para os minimalistas. Fiber usa JavaScript e CSS mínimos para que seu site carregue mais rápido! Também possui uma interface limpa que é ótima para os olhos!!

Índice

• Instalação
  • Usando Submódulo
  • Baixando diretamente o tema
• Características
  • Pronto para SEO
  • Códigos de acesso
    • ASCIINema
    • Posso usar
  • Clique para copiar o código
  • Lindas notas
• Capturas de tela
• Configuração do tema
  • Listagem de conteúdo na página inicial
    • Lista de blogs, notas etc.
    • Listando conteúdo personalizado
  • Destaque de código
  • Itens do cardápio
  • Título do site
• Escrevendo conteúdo
  • Escrevendo notas
  • Matéria inicial

Instalação

Existem duas maneiras de usar esse tema em qualquer site baseado em Hugo.

1. Usando submódulos Git (recomendado)
2. Baixando o tema diretamente para <hugo-site-root>/themes/

Usando Submódulo

1. Crie seu site usando hugo new site SITE_NAME
2. cd para SITE_NAME
3. Inicialize um repositório git: git init . Isso é necessário porque precisamos adicionar um submódulo git.
4. Adicione o submódulo executando git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
5. Agora, inicie o servidor Hugo localmente usando hugo serve

Se houver uma atualização no repositório do tema, você pode extraí-la usando git submodule update --remote

Baixando diretamente o tema

Use este método se você não puder usar o Git por algum motivo.

1. Baixe e extraia seu conteúdo para SITE_ROOT/themes/hugo-theme-fiber/ .
2. Inicie o hugo localmente executando hugo serve no terminal.

Características

Pronto para SEO

Este tema é carregado com SEO básico, bem como com dados JSON-LD mínimos de Schema.org

Códigos de acesso

Além dos códigos de acesso prontos para uso, ele possui alguns outros códigos de acesso úteis que às vezes podem ser úteis.

ASCIINema

Incorporar um elenco AsciiNema. Shortcode a ser usado: {{< asciinema id="id of a public cast" >}}

Posso usar

Este shortcode mostra os dados mais recentes do site caniuse.com. Útil para desenvolvedores web. Exemplo:

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

Clique para copiar o código

Os visitantes do site podem copiar o conteúdo de qualquer bloco de código com apenas um clique. Isso não quebrará os recuos do código!

Lindas notas

Qualquer coisa que você colocar dentro de content/notes receberá anotações aproximadas. Isso torna mais fácil reconhecer coisas importantes nas notas.

As anotações aproximadas são controladas usando tags como strong , em e strikethrough . Para gerar uma nova entrada notes , primeiro você deve criar o diretório content/notes . Em seguida, use hugo new notes/file-name.md para gerar uma nota. Este arquivo conteria informações sobre como anotar coisas com as tags mencionadas acima.

Capturas de tela

Configuração do tema

Listagem de conteúdo na página inicial

A página inicial pode ser configurada de duas maneiras diferentes. Você pode listar sua seção favorita/mais importante no diretório content .

Ou coloque conteúdo personalizado dentro dele.

Ou você pode fazer as duas coisas! Certifique-se de criar um arquivo content/_index.md que tenha um title de propriedade dentro de fromtmatter. Esta propriedade title é útil para SEO. Exemplo:

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

Lista de blogs, notas etc.

Para criar uma listagem de conteúdo na página inicial, você precisa definir uma variável chamada mainSections no arquivo config.toml . Exemplo:

[ params ]
mainSections = [ " posts " ]

Listando conteúdo personalizado

Para listar o conteúdo personalizado, basta colocá-lo dentro content/_index.md com o frontmatter apropriado.

Destaque de código

Por padrão, Hugo não usaria nenhuma classe. Mas isso não funcionaria para este tema, pois alguns dos recursos dependem disso.

Você precisa usar classes para codeblocks. Veja como você faria isso:

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

Itens do cardápio

Por padrão, há apenas um item de menu no menu superior. Para adicionar mais itens lá, é necessário definir itens de menu dentro de config.toml . A seguir está um exemplo do config.toml do meu site:

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

Título do site

O título do site é controlado pelos seguintes parâmetros em config.toml :

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

Escrevendo conteúdo

Escrevendo notas

Notes é um tipo especial codificado neste tema. Conteúdos desse tipo receberiam anotações aproximadas (o que facilita o gerenciamento de notas).

Gere uma página de notas usando o comando hugo new notes/your-filename.md para aprender como usar anotações aproximadas na página de notas.

O modelo para notas gentis está incluído.

Matéria inicial

Este tema usa frontmatter para lidar com descrições de postagens personalizadas e meta-imagem para SEO. Se não conseguir encontrar meta.image e meta.description , ele retornará para /images/default-meta-image.png e .Summary respectivamente.

Use esses dois campos no frontmatter assim:

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->