Añadiendo

Añadiendo contenido a nuestro sitio web

Creando contenido: markdown

Para crear nuevo contenido vamos a generar páginas de texto con formato markdown (Hablamos más abajo sobre el tema) Podemos consultar las siguientes referencias para el texto en markdown:

Este metalenguaje o lenguaje con marcas es muy utilizado en la documentación técnica .

Es importante aprender a utilizarla con cierta flexibilidad

Creando páginas de contenido

Lo primero establecemos la organización de nuestros contenidos

# Sitio Web

## Sección 1
 directorio
### _index.md (fichero indice de sección 1)
### Tema 1 de la sección 2 (fichero md)
### Tema 1 de la sección 2 (fichero md)
## Sección 2
### _index.md (fichero indice de sección 2)
### Tema 1 de la sección 2 (fichero md)
### Tema 1 de la sección 2 (fichero md)
### Tema 1 de la sección 2 (fichero md)
## Seccion 3 
### ....
## ...

Observamos cómo usamos diferentes directorios para crear nuestra organización de nuestro contenido.

Cada directorio corresponderá a una sección

Dentro de cadg _index.md sección puede haber un fichero cuyo contenido se visualizará cuando seleccionemos el directorio concreto. Por ejemplo para el contenido del curso podría tener una organización como se muestra en la imagen siguiente:

# DWES

## Introducción al desarrollo web
## Sitios estáticos
### Teoría
### Práctica

## PHP
- [Web de referencia](https://php.net)
### Sintaxis básica
### Arrays y formularios
### PHP orientado a objetos
### Bases de datos
#### Repaso de sql y concetos de BD
#### Mysqli en php
### Laravel
- [Web de referencia](https://laravel.com/docs/8.x)
#### Uso de un framework en la programación web
#### Rutas

Creando ficheros y secciones

Usaremos el CLI de hugo (línea de comandos) para crear ficheros de contenido y/o secciones

hugo new [seccion]/fichero.md

La sección puede ser un directorio o varios (subdirectorios anidados)

Los ficheros se crean en la carpeta content del directorio raíz del proyecto

El fichero creado tendrá un contenido según quede especificado en el fichero patrón ubicado en la carpeta archetypes/default.md. Podemos añadir otro fichero de patrón.

Creando un fichero md

hugo new docs/prueba.md

Genera un fichero con el siguiente contenido

---
title: "Prueba"
date: 2021-10-04T19:39:33+02:00
draft: false
---

Las páginas en el directorio content

  • Las páginas ubicadas directamente en el directorio content serán páginas globales o bundles pages: contacto, about, datos relevantes.

La forma de organizar las secciones dependerá de nuestra visión del sitio y en cualquier caso deben de ser páginas relacionadas con el tema de la sección: teoría, prácticas ,….

Como hemos comentado Cada directorio puede (debería) de tener un fichero llamado _index.md (el fichero índice de la sección).

Creando ficheros con realearn

En el caso de la plantilla que estamos usando (ver documentación ), clasifica las páginas de dos tipos, las que son cabecera de un tema o sección (_index.md) y las que tienen contenido de las mismas.

Para crear las páginas de un tipo u otro, tiene una serie de argumentos

Ejemplo de cómo hacerlo con relearn

  • Para crear una página que es cabecera de capítulo (creamos la sección teoría y el fichero _index.md)

  • Para crear un fichero dentro de la sección teoría

 hugo new  01_teoria/tema1.md

En este tema tenemos una archtype que es el 

chapter
que va a constituir una introducción a una sección ( 
El fichero _index.md
) ```shell hugo new --kind chapter 01_teoria/_index.md ```

Front matter

https://gohugo.io/content-management/front-matter/ Cuando generamos contenidos, los ficheros creados vemos que en la cabecera o primeras líneas pueden tener metainformación Esta información va entre tres líneas y constituye lo que se llama el front matter de la página En esta sección daremos valores a variables que luego se pueden utilizar.

De los diferentes valores, nos interesa ver alguno que suele estar en el archtypes y suelen aparecer por defecto:

  • title será el título que va a tener esta página para referenciarse en los diferentes menús
  • weight es una de las formas de ordenar las páginas y secciones.
  • draft Indica si la página es borrador true o no. En caso de ser borrador nos e visualizará.
  • description Es una descripcion que aparecerá en la página principal o index de esta sección. Aparecerá para cada página, salvo que se especifique que no lo queramos. visualizará.

La información del fichero creado anteriormente corresponde al Front matter, el cual es aportado por el fichero base o patrón ubicado en la carpeta archetypes

content
└── blog        <-- Sección, porque es el primer nivel bajo content/  
    |   ├── funny-cats
    │   ├── mypost.md
    │   └── kittens         <-- Sección porque contiene _index.md
    │       └── _index.md
    └── tech                <-- Sección porque contiene _index.md
        └── _index.md

Repaso

  • Lo que precede al contenido
  • Sintaxis especial
  • Hay unas variables predefinidas pero el usuario puede crear nuevas.
  • Se genera según el archetype de la sección. Por defecto _default.md
  • Se pueden pasar valores por defecto a las páginas que descienden de una sección. Por ejemplo si ponemos en content/blog/_index.md
title = 'Blog'
[cascade]
  banner = 'images/typewriter.jpg'

Esta página y todas las que descienden de la sección blog devuelven images/typewriter.jpg en .Params.banner a no ser que tengan su propio banner o un ancestro más cercano lo modifique.

Referencias

Taxonomías

https://gohugo.io/content-management/taxonomies

Una taxonomía es una categorización que nos permite clasificar contenido.

Por ejemplo, en una web de Películas podríamos tener actores, directores, estudios, géneros, años, premios … A continuación se muestra un breve ejemplo, pero esta parte no la vamos a incluir en nuestro ejemplo.

Por defecto Hugo añade las taxonomías categories y tags. Se pueden añadir más en config

[taxonomies]
  category = 'categories'
  tag = 'tags'

Si se quiere deshabilitar:

disableKinds = ['taxonomy', 'term']

En frontmatter

categories:
- Personal
- Trabajo
tags:
- software
- html

Markdown

  • Muy importante

Práctica