Regardez Et Ressentez

Par défaut, un site utilisant ce thème a les polices, les couleurs et l’apparence générale par défaut. Cependant, le schéma par défaut ne peut pas satisfaire tout le monde, mais ne vous inquiétez pas, vous pouvez facilement remplacer les valeurs par défaut du thème, telles que les couleurs de la palette, les polices et la coloration syntaxique.

Icônes de favoris

HBS génère des icônes de plusieurs tailles en fonction du fichier assets/favicon.webp (priorité plus élevée) ou assets/favicon.png. Enregistrez simplement votre propre image de favicon sous le même chemin pour remplacer les valeurs par défaut.

Vous devrez également remplacer l’icône du masque assets/safari-pinned-tab.svg.

Les icônes statiques static/images/icons/icon-{size}.png ont une priorité plus élevée pour une compatibilité ascendante.

Tailles personnalisées

Vous pouvez modifier les tailles souhaitées via le fichier 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}

Image d’arrière-plan

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']

##Palettes

HBS propose de nombreuses palettes : blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.

Palettes disponibles

Le sélecteur de palette sur le panneau de configuration est basé sur le paramètre palettes.

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

Vous pouvez également désactiver le sélecteur de palette en définissant le paramètre palettes sur un tableau vide [].

Palette par défaut

1palette = "indigo"

Vous devrez vider le cache du navigateur après avoir modifié la palette par défaut.

Remplacer la couleur de la palette

1$palette-blue: darkblue;

Après avoir modifié les variables SCSS sur assets/main/scss/_variables.scss, la couleur de la palette blue sera changée en darkblue. Veuillez consulter le Variables SCSS pour plus de détails.

Polices

Famille de polices

Nous ne spécifions aucune police, de sorte que system-ui sera utilisé dans la plupart des navigateurs.

Vous pouvez facilement utiliser d’autres polices Web, telles que Polices Google. Prenons la police Roboto comme exemple.

Tout d’abord, nous importons la police, puis remplaçons la variable body-font-family dans 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}

Mise en évidence de la syntaxe

Le thème nécessite que les paramètres de balisage suivants soient définis sur des valeurs spécifiques.

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

Voir aussi Configurer la surbrillance.

Style

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

Voir aussi Tous les styles pris en charge.

Icônes

HBS utilise un jeu d’icônes FontAwesome v5 personnalisé qui contient uniquement les icônes utilisées par le thème pour réduire la taille du fichier d’icônes.

Ajouter des icônes

Compte tenu du besoin d’icônes définies par l’utilisateur, HBS fournit une fonctionnalité d’icône personnalisée, il suffit de créer un fichier assets/icons/custom.js à la racine du site et d’importer les icônes souhaitées.

 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;

Pour que cela fonctionne, vous devez décommenter, c’est-à-dire supprimer le préfixe //.

Littéralement, @fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons et @fortawesome/free-brands-svg-icons représentent respectivement les icônes Solid, Regular et Brand.

Variables JS

Les variables JS sont nommées en utilisant camelCase, et leurs noms de classe correspondants sont en minuscules et séparés les uns des autres par une ligne horizontale.

Utilisation

Selon le type d’icône, leurs préfixes de classe sont également différents, la relation correspondante est la suivante :

Prend comme exemple les icônes précédemment importées :

Si l’icône ne s’affiche pas correctement, veuillez vérifier que le préfixe est correct.

Couleur de l’icône

Vous pouvez soit spécifier les utilitaires CSS de couleur, soit l’attribut style pour définir la couleur de l’icône.

Lorsque vous l’utilisez dans des configurations, des préambules, etc., vous devez citer/échapper le code, sinon l’analyse YAML/TOML/JSON pourrait échouer. Par exemple,

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