Crear un tema

Creación de un nuevo tema

Documentación:

Creación de un nuevo tema

$ hugo new theme <THEME_NAME>
$ hugo new theme basico

themes/basico/
├── LICENSE
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│
├── footer.html
│
├── head.html
│
└── header.html
├── static
│ ├── css
│ └── js
└── theme.toml

Content blocks y partials

themes/basico/layouts/_default/baseof.html

<!DOCTYPE html>
<html>
  {{- partial "head.html" . -}}
  <body>
  {{- partial "header.html" . -}}
    <div id= "content" >
    {{- block "main" . }}{{- end }}
    </div>
  {{- partial "footer.html" . -}}
  </body>
</html>

themes/basico/layouts/partials/head.html

<head>
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1" >
<title>{{ .Site.Title }}</title>
</head>

themes/basico/layouts/partials/header.html

<header>
<h1>{{ .Site.Title }}</h1>
</header>
<nav>
<a href= "/" >Acme</a>
<a href= "/viajes" >Viajes</a>
<a href= "/contacto" >Contacto</a>
<a href= "/acercade" >Acerca de</a>
</nav>

themes/basico/layouts/partials/footer.html

<footer>
  <small>Copyright {{now.Format "2022"}} Yo.</small>
</footer>

themes/basico/layouts/index.html

Para Home Page con el contenido que encuentre en content/_index.md

{{ define "main" }}
{{ .Content }}
{{ end }}

themes/basico/layouts/_default/single.html

Páginas individuales

{{ define "main" }}
<h2>{{ .Title }}</h2>
{{ .Content }}
{{ end }}

Algo de estilo

basic_theme/portfolio/themes/basico/static/css/style.css


.container {
margin: 0 auto;
width: 80%;
}


nav, footer {
background-color: #333;
color: #fff;
text-align: center;
}

nav {
display: flex;
flex-direction: column;
}
nav > a {
flex: 1;
text-align: center;
text-decoration: none;color: #fff;
}

@media only screen and (min-width: 768px) {
nav { flex-direction: row; }
}

Modificamos el partial head.html para incluir el css

<head>
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1" >
<title>{{ .Site.Title }}</title>

<link rel= "stylesheet" href= "{{ " css /  style .  css "   |  relURL  }}" >
...

themes/basico/layouts/_default/list.html

Para listas de páginas

{{ define "main" }}
<h2>{{ .Title }}</h2>
<ul>
{{ range .Pages }}
<li><a href= "{{ .RelPermalink }}" >{{ .Title }}</a></li>
{{ end }}
</ul>
{{ end }}

{{ range .Pages }} itera sobre las páginas que se encuentran en el directorio actual (sección).

Tareas

Crear un repositorio con esta tema en github
- Luego podremos añadir el tema con git submodule add https://github.com/<url_del_tema>.git themes/basico
Mueve la navegación a un nuevo partial
Modifica el tema para que use boostrap. Más fácil usando el CDN de bootstrap.
Crea un tema especial para los viajes. Tendrá que incluir un mapa con Leaflet https://leafletjs.com/examples/quick-start/
- El mapa irá en el html de la página (no en el .md)
- Tendremos que introducir las coordenadas de los viajes en el .md (frontmatter)

Última modificación September 15, 2023: update (ef292d9)