Diferencia entre revisiones de «Usuario:ManuelRomero/hugo»

Revisión de 03:06 29 sep 2024

Docsy

Crear una librería con iconos

• Se prentende usar como si fueran iconos de font awesome

Crear la librería en la web y descargarla en local

• Acceo https://icomoon.io/ a https://icomoon.io/app/ y me logueo
• Previamente tengo preparada una carpeta en local con los iconos svg
  • Buscar pe en https://icons8.com/
• Subir los iconos SVG.
• Agruparlos en una fuente de iconos.
• Haz clic en "Generate Font" (PArte inferior derecha de la pantalla). para crear la fuente.
• Descarga el paquete generado, que incluirá los archivos de fuente (.woff, .ttf) y un archivo CSS para incluir en tu proyecto.
• Descargar el paquete con archivos CSS y de fuentes.

Incluir la fuente en tu proyecto Hugo

• Sube los archivos .woff, .ttf a la carpeta static/fonts/ de tu proyecto.
• sube el archivo CSS a static/css/ (por ejemplo, my-icons.css).
• Incluye el CSS en tu archivo hugo.toml:

Crear un nuevo sitio como submódulo

hugo new site sitio_nuevo

• En este caso voy a usar el tema docsy
• Tengo 3 formas de hacerlo:
• 1.- Clonando el tema directamente (no recomendado)
• 2.- Clonando el tema como un submodulo de git (recomendado)

  git init
  git submodule add  https://github.com/google/docsy.git themes/docsy

• 3.- Creando un modulo de go (el más recomendado)

imgproc

• Si quiero usar el shortdoce imgproc

Situación

tengo un fichero p.e objetivo.md dónde quiero usar una imagen llamada objetivo_general.png

Acción

Creo en content... un directorio llamado objetivo
en él creo un fichero llamado index.md con el contenido de objetivo.md
Igualmente copio la imagen objetivo_general.png
Establezco el recuros de la imagen en el frontmatter de index.md:

 ***********
resources:
- src: "objetivo.jpg"
---

markmap

• En el config.toml

# Para crear gráficos direccionales
[params.markmap]
    enable = true

• En el fichero md

```markmap
#raiz_1
##raiz_1_1
##raiz_1_2
##raiz_1_3
### raiz_1_3_1
### raiz_1_3_2
### raiz_1_3_2
....
```

emojin

• Común para todo hugo
• En el config.toml

# Para poder cargar emogin https://www.webfx.com/tools/emoji-cheat-sheet/
enableEmoji = true

• En el fichero md se incluye el nombre de emojin que podemos sacar del cheat sheet https://www.webfx.com/tools/emoji-cheat-sheet/

Errores. Solución usar el tema como módulo

• Me encuentro con este error

Error: Error building site: "/home/oem/hugo/web/content/es/_index.html:6:1": failed to extract shortcode: template for shortcode "blocks/cover" not found

Built in 5 ms (3/05/2023) SOLUCIÓN Agrego el tema como un módulo en el fichero config,toml o hugo.toml

[module]
  # uncomment line below for temporary local development of module
  # replacements = "github.com/google/docsy -> ../../docsy"
  [module.hugoVersion]
    extended = true
    min = "0.75.0"
  [[module.imports]]
    path = "github.com/google/docsy"
    disable = false
  [[module.imports]]
    path = "github.com/google/docsy/dependencies"
    disable = false

• Ahora cargo el módulo

hugo mod init  .

(: El punto final no estoy seguro. si haces un hugo serve también funciona la descarga del módulo/s (el tema))

Incluir librería de iconos

Crear una fuente de iconos personalizados

• Se trata de poder tener disponibles más iconos de los que nos ofrece font awesome.

Icoomon

Herramientas como Icomoon te permiten cargar tus íconos en formato SVG y generar una fuente de íconos que puedes utilizar con clases CSS, igual que con Font Awesome:

Acciones

1. Sube tus íconos a Icomoon.
2. Genera la fuente y descarga los archivos.
3. Incluye los archivos generados en tu proyecto.
4. Usa los íconos en HTML, similar a cómo lo harías con Font Awesome:

Subir iconos

Syna

Documentación

https://github.com/okkur/syna
https://about.okkur.org/syna/docs/

Instalación

 hugo new site main
 cd main
 cd themes
 git clone https://git.okkur.org/syna themes/syna

• Establecer el tema en config.toml.

 ....
 theme = 'syna'
 ....

Contenido

• En esta plantilla el contenido está basado en páginas y fragmentos o framgment'
• Ĉada página está formada por uno o varios fragmentos
• Para crear una página creamos un directorio con un fichero.
  • Si no hay secciones se llamará index.md.
  • Si hay secciones se llamará _index.md.

hugo new docencia_reglada/_index.md
hugo new myself/index.md

• Para crear páginas de contenido lo podemos hacer de dos formas:

1. Creando un grupo de páginas simple:single.
2. Creando lista de páginas list

Modo single

(MRM revisar esta sección)

• En este caso cada nueva sección va a ser un directorio y va a cointener un fichero llamado index.md que será el índice de la sección
• El directorio creado será el nombre del fragmento
• Cada nueva página deberá de referenciar el fragmento del que depende

vamos a agruparlas en directorios con un fichero index.md.

Modo list

(MRM revisar esta sección)

• El directorio creado será el nombre del fragmento
• Cada nueva página deberá de referenciar el fragmento del que depende

vamos a agruparlas en directorios con un fichero index.md.