Projecto

[manuelpaulotandu]

Construindo um site e tema hugo com Bootstrap
Primeiro passo é baixar o hugo do site principal . E então vamos criar um site e um tema em branco.

$ hugo new site willschenk-hugo-bootstrap
$ cd willschenk-hugo-bootstrap
$ hugo new theme mytheme
Edite o arquivo gerado config.toml para que ele aponte para este novo tema.

baseURL = 'https://suzano.github.io/willschenk-hugo-bootstrap/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'mytheme'
relativeURLs = true
Eu gosto de configurar todos os sites de conteúdo para que as urls sejam relativas para que eu possa hospedar em subdiretórios e afins. Finalmente, vamos iniciar o servidor:

$ hugo server --watch --verbose --buildDrafts --cleanDestinationDir
Layouts, blocos e parciais

Primeiro vamos começar com o layout base em themes/mytheme/layouts/_default/baseof.html:

{{- partial "head.html" . -}} {{- partial "header.html" . -}} {{- block "main" . }}{{- end }} {{- partial "footer.html" . -}} Este é o layout base _default para tudo no site. Você pode ter layouts específicos para diferentes tipos de conteúdo, mas este é o fallback que vamos definir para quando nada mais for especificado. Dentro disso, definimos alguns partials e blocks. Você pode pensar em parciais como submodelos incluídos que podemos usar tanto para estrutura quanto como um local conveniente para substituir a estrutura de um tema quando você deseja fazer grandes personalizações e blocks são substituídos pelos dados do conteúdo do seu site, portanto, são mais bem pensados ​​como as partes em que o modelo é preenchido com dados.

O material {{ }} é a linguagem de templates go, então se você quiser realmente descobrir como isso funciona, você acabará se encontrando nos documentos da linguagem golang, que às vezes é um pouco intenso. A principal coisa a lembrar é que para cada página que é renderizada no site é passada em um objeto HugoPage que é onde você precisa extrair todos os dados. Então, se você quer saber o que está disponível para você, é aí que você começa a procurar.

Cabeça

Dentro themes/mytheme/layouts/partials/head.html, adicione bootstrap e os vários pedaços de grandiosidade necessários para isso.

<title>{{ .Title }}</title> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

{{ range .AlternativeOutputFormats -}}
{{ printf <link rel="%s" type="%s+%s" href="%s" title="%s" /> .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }}
{{ end -}}

Isso configura o bootstrap para carregar do CDN, além de adicionar um link ao feed rss gerado. Aqui podemos ver algumas outras coisas. Uma é que estamos configurando o <title>using {{ .Title }}. Podemos querer mudar isso mais tarde, mas o que isso significa é que estamos usando o atributo title da página atual para definir o título e, se você quiser incluir algo dos dados .Site, é aqui que você deve colocar a lógica.

A outra coisa aqui é a range função. Em termos práticos, estamos colocando rss links de descoberta, mas o que isso literalmente está fazendo é fazer um loop sobre a AlternativeOutputFormats fatia dentro da página range é o idioma de loop golang, que é como um for loop, mas melhor.

Rodapés

Vamos colocar algumas dessas variáveis ​​no rodapé para ajudar a depurar um pouco. É themes/mytheme/layouts/partials/footer.html aqui que vamos expor as variáveis ​​da página hugo para sabermos o que está acontecendo

Hugo Variables for current page

Name	{{ .Name }}
Kind	{{ .Kind }}
Type	{{ .Type }}
List Page	.Pages
IsPage	{{ .IsPage }}
IsHome	{{ .IsPage }}
Next	{{ .Next }}
Prev	{{ .Prev }}
Section	{{ .CurrentSection }}

Modelos de página

Agora vamos definir um único template básico, que será usado para renderizar um único objeto, não uma coleção de nada. Vamos demonstrar isso inicialmente com a página de índice themes/mytheme/layouts/_default/single.html:

{{ define "main" }}

This from the single page template

{{ end }} E saiu o primeiro rascunho do template index.html para o site. Vamos colocar um pequeno jumbotron em themes/mytheme/layouts/index.html:

{{ define "main" }}

This could be the title

Here's some description stuff

There's also other things that are super nice

{{ end }} Neste ponto, você deve ser capaz de ver a página de índice quando for para http://localhost:1313 (Se hugo não criou um header.html parcial vazio, a compilação pode falhar, então vá para a próxima seção se você não não tem isso.)

Cabeçalho e menus

No config.toml nível superior do seu site (fora do tema) vamos definir alguns itens de menu. Em seguida, usaremos esses dados para preencher o cabeçalho.

[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "/about/"

[[menu.main]]
identifier = "posts"
name = "Posts"
url = "/posts/"
Em seguida, adicione um cabeçalho em themes/mytheme/layouts/partials/header.html. Vamos usar uma barra de navegação bootstrap e retirar os itens do menu da configuração do site.

{{.Site.Title}}

{{ $currentPage := . }} {{ range .Site.Menus.main }}
• {{ .Name }}
{{ end }}

Há alguns conceitos novos aqui, o primeiro é {{ "/" | relURL }} que é uma função auxiliar para transformar uma variável em algo que possa torná-la mais palatável para o usuário. Neste caso, estou apenas traduzindo / para um relativeURL, que em subpáginas terá algo como ../../index.html ou qualquer outra coisa.

{{ $currentPage := . }} está definindo uma variável, então vamos nos referir ao contexto externo quando estivermos range abaixo. Os range links sobre todos os itens do menu. O objeto que . se refere às alterações dentro do range para ser o item atual sobre o qual ele está iterando, portanto, para fazer comparações com o currentPage nesse caso, precisamos dar um nome a ele := é muito golang.

Também são declarações if, que estamos usando para determinar se incluímos a classe active no link. Observe onde está o operador, ou seja, or vem primeiro e os dados vêm depois. Tão límpido!

Adicionando conteúdo de postagem

Vamos agora adicionar alguns posts básicos.

$ hugo new posts/sample_post.md
Se você não iniciou o hugo com -D, você precisará ter certeza de que o sinalizador de rascunho não é verdadeiro para que ele apareça.

---

title: "Sample Post"
date: 2018-10-19T16:04:51-04:00
draft: false

One of the things I'm very interested in is writing words and seeing them on the page.
Isso é bastante padrão na maioria dos geradores de sites estáticos com a matéria da frente na parte superior e a remarcação na parte inferior.

Modelos de lista

Crie uma visualização de modelo de lista em themes/mytheme/layouts/_default/list.html:

{{ define "main" }}

{{ .Type | humanize }}

{{ range .Pages }}

{{ .Date.Format "Jan 2, 2006" }}

{{ if .Draft }}DRAFT: {{end}}{{ .Title | markdownify }}

{{ end }}

{{ end }} Estamos usando uma função hugo humanize para capitalizar o tipo de objeto que estamos olhando e um monte de classes de utilitário bootstrap para alinhar e mostrar apenas a data publicada em telas maiores.

A string .Date.Format de formato é realmente estranha – não tenho certeza se realmente a entendi, mas espera-se que o ano seja 2006 para que as coisas façam sentido. Isso é parte da maneira como o material de formatação de data de go subjacente do hugo funciona.

Agora clicamos em postagens na barra de navegação, você deve ver a lista de postagens. Mas quando clicamos na própria página, você notará que temos o texto “This from the single page template”. Então vamos atualizar esse themes/mytheme/layouts/_default/single.html modelo agora:

{{ define "main" }}

{{ .Title | markdownify}}

{{ .Content }}

{{ end }} Adicionando tags

Já que mencionamos as tags acima, vamos em frente e adicionar essa taxonomia ao nosso tema. Outro tipo comum de taxonomia são as categorias. Vamos em frente e adicionar isso ao theme.toml:

tags = ["tags"]
Reinicie seu servidor hugo para ver a mágica!

Vamos adicionar algumas tags ao nosso primeiro arquivo sample_post.md:

---

title: "Sample Post"
date: 2018-10-19T16:10:36-04:00
draft: false
tags: [ "one", "two" ]

This is the first paragraph of what I'd like to say.
E depois crie outro post

$ hugo new posts/sample_post_the_second.md
E preencha com:

---

title: "Sample Post The Second"
date: 2018-10-19T16:54:29-04:00
draft: false
tags: ["two"]

This is the second amazing post that will blow your mind!
Novo permite adicionar tags ao nosso menu para que possamos colocá-lo na barra de navegação. Também especificaremos os pesos do menu para corrigir o pedido. Isso é feito na configuração do site config.toml onde estamos configurando como este site específico usou o tema que estamos definindo.

[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "/about/"
weight = 100

[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/tags/"
weight = 110

[[menu.main]]
identifier = "posts"
name = "Posts"
url = "/posts/"
weight = 120
Finalmente, vamos adicionar alguma lógica ao nosso tema theme/mytheme/partials/header.html. Você pode substituir a coisa toda.

{{.Site.Title}}

{{ $currentPage := . }} {{ range .Site.Menus.main }} {{ if not (eq .Identifier "tags") }}
• {{ .Name }}
{{ else }}
• {{ .Name }}
  {{ range $name, $taxonomy := $currentPage.Site.Taxonomies.tags }} {{ with $.Site.GetPage (printf "/tags/%s" $name) }} {{ $name }} {{ end }} {{ end }}
{{ end }} {{ end }}