Mira Y Siente

De forma predeterminada, un sitio que utiliza este tema tiene las fuentes, los colores y la apariencia general predeterminados. Sin embargo, el esquema predeterminado no puede satisfacer a todos, pero no se preocupe, puede anular fácilmente los valores predeterminados del tema, como los colores de la paleta, las fuentes y el resaltado de sintaxis.

favicons

HBS genera iconos en varios tamaños según el archivo assets/favicon.webp (mayor prioridad) o assets/favicon.png. Simplemente guarde su propia imagen de favicon con la misma ruta para anular los valores predeterminados.

También deberás anular el icono de máscara assets/safari-pinned-tab.svg.

Los íconos estáticos static/images/icons/icon-{size}.png tienen mayor prioridad para compatibilidad con versiones anteriores.

Tamaños personalizados

Puede cambiar los tamaños que desee a través del archivo params.

 1[favicon]
 2  [[favicon.sizes]]
 3    size = '16x16'
 4  [[favicon.sizes]]
 5    size = '32x32'
 6  [[favicon.sizes]]
 7    size = '150x150'
 8  [[favicon.sizes]]
 9    rel = 'apple-touch-icon'
10    size = '180x180'
11  [[favicon.sizes]]
12    size = '192x192'

1favicon:
2  sizes:
3  - size: 16x16
4  - size: 32x32
5  - size: 150x150
6  - rel: apple-touch-icon
7    size: 180x180
8  - size: 192x192

 1{
 2   "favicon": {
 3      "sizes": [
 4         {
 5            "size": "16x16"
 6         },
 7         {
 8            "size": "32x32"
 9         },
10         {
11            "size": "150x150"
12         },
13         {
14            "rel": "apple-touch-icon",
15            "size": "180x180"
16         },
17         {
18            "size": "192x192"
19         }
20      ]
21   }
22}

Imagen de fondo

1# Use the same image on light and dark modes.
2backgroundImage = ['/images/bg.png']
3
4# Use different images on light and dark modes.
5backgroundImage = ['/images/bg-light.png', '/images/bg-dark.png']

Paletas

HBS proporciona una gran cantidad de paletas: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.

Paletas disponibles

El selector de paleta en el panel de configuración se basa en el parámetro palettes.

1palettes = ["blue", "blue-gray", "indigo"]

También puede desactivar el selector de paleta configurando el parámetro palettes en una matriz vacía [].

Paleta predeterminada

1palette = "indigo"

Deberá borrar el caché del navegador después de modificar la paleta predeterminada.

Anular color de paleta

1$palette-blue: darkblue;

Después de modificar las variables SCSS en assets/main/scss/_variables.scss, el color de la paleta blue se cambiará a darkblue. Consulte Variables SCSS para obtener más detalles.

Fuentes

Familia de fuentes

No especificamos ninguna fuente, por lo que system-ui se utilizará en la mayoría de los navegadores.

Puede utilizar otras fuentes web fácilmente, como Fuentes de Google. Tomemos como ejemplo la fuente Roboto.

En primer lugar, importamos la fuente y luego anulamos la variable body-font-family en assets/main/scss/_custom.scss:

1@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2:root {
3    --#{$prefix}body-font-family: 'Roboto', sans-serif;
4}

Resaltado de sintaxis

El tema requiere que los siguientes parámetros de marcado se establezcan en valores específicos.

• lineNos: true
• lineNumbersInTable: false
• noClasses: false

Véase también Configurar resaltado.

Estilo

1$ hugo gen chromastyles --style=solarized-dark > assets/main/scss/_highlight.scss

Véase también Todos los estilos compatibles.

Iconos

HBS utiliza un conjunto de íconos FuenteAwesome v5 personalizado que contiene solo los íconos utilizados por el tema para reducir el tamaño del archivo de íconos.

Agregar iconos

Teniendo en cuenta la necesidad de íconos definidos por el usuario, HBS proporciona una función de íconos personalizados, simplemente cree el archivo assets/icons/custom.js en la raíz del sitio e importe los íconos deseados.

 1// import { faClock } from '@fortawesome/free-solid-svg-icons';
 2// import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
 3// import { faAmazon, faGoogle } from '@fortawesome/free-brands-svg-icons';
 4
 5const icons = [
 6    // faClock,
 7    // faAddressBook,
 8    // faAmazon, faGoogle,
 9];
10export default icons;

Para que esto funcione, es necesario descomentar, es decir, eliminar el prefijo //.

Literalmente, @fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons y @fortawesome/free-brands-svg-icons representan íconos sólidos, regulares y de marca, respectivamente.

Variables JS

Las variables JS se nombran usando camelCase, y sus nombres de clase correspondientes están en minúsculas y separados entre sí por una línea horizontal.

Uso

Dependiendo del tipo de icono, sus prefijos de clase también son diferentes, la relación correspondiente es la siguiente:

Toma como ejemplo los íconos previamente importados:

Si el icono no se muestra correctamente, verifique que el prefijo sea correcto.

Color del icono

Puede especificar las utilidades CSS de color o el atributo style para configurar el color del icono.

Cuando lo use en configuraciones, portadas, etc., deberá citar/escapar el código; de lo contrario, el análisis de YAML/TOML/JSON puede fallar. Por ejemplo,

1---
2menu:
3  main:
4    params:
5      icon: '<i class="far fa-clock" style="color: blue"></i>'
6---