Uiterlijk

Standaard gebruikt een site met dit thema de standaard lettertypen, kleuren en het algemene uiterlijk. Het standaardschema voldoet echter niet voor iedereen, maar maak je geen zorgen: je kunt de standaardinstellingen van het thema eenvoudig aanpassen, zoals kleurenschema’s, lettertypen en syntaxisaccentuering.

Favicons

HBS genereert iconen in meerdere formaten op basis van het bestand assets/favicon.webp (hogere prioriteit) of assets/favicon.png. Sla je eigen faviconafbeelding op onder hetzelfde pad om de standaard te overschrijven.

Je moet ook het maskeericoon assets/safari-pinned-tab.svg overschrijven.

De statische iconen static/images/icons/icon-{size}.png hebben hogere prioriteit voor achterwaartse compatibiliteit.

Aangepaste Formaten

Je kunt de gewenste formaten wijzigen via het params-bestand.

 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}

Achtergrondafbeelding

1# Gebruik dezelfde afbeelding voor lichte en donkere modus.
2backgroundImage = ['/images/bg.png']
3
4# Gebruik verschillende afbeeldingen voor lichte en donkere modus.
5backgroundImage = ['/images/bg-light.png', '/images/bg-dark.png']

Kleurenschema’s

HBS biedt een ruim aanbod aan kleurenschema’s: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.

Beschikbare Kleurenschema’s

De kleurenschema-kiezer op het instellingenpaneel is gebaseerd op de parameter palettes.

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

Je kunt de kleurenschema-kiezer ook uitschakelen door de parameter palettes in te stellen op een lege array [].

Standaard Kleurenschema

1palette = "indigo"

Je moet de browsercache wissen na het wijzigen van het standaardkleurenschema.

Kleurenschemakleur Aanpassen

1$palette-blue: darkblue;

Na het aanpassen van de SCSS-variabelen in assets/main/scss/_variables.scss wordt de kleur van het blue-schema gewijzigd naar darkblue. Zie SCSS-variabelen voor meer details.

Lettertypen

Letterfamilie

We geven geen specifiek lettertype op, zodat system-ui in de meeste browsers wordt gebruikt.

Je kunt eenvoudig andere weblettertypen gebruiken, zoals Google Fonts. Laten we het Roboto-lettertype als voorbeeld nemen.

Importeer eerst het lettertype en overschrijf daarna de variabele body-font-family in 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}

Syntaxisaccentuering

Het thema vereist dat de volgende opmaakparameters zijn ingesteld op specifieke waarden.

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

Zie ook Highlight configureren.

Stijl

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

Zie ook Alle ondersteunde stijlen.

Iconen

HBS gebruikt een aangepaste FontAwesome v5-iconenset die alleen de door het thema gebruikte iconen bevat om de omvang van het icoonbestand te verkleinen.

Iconen Toevoegen

Gezien de behoefte aan gebruikersdefined iconen biedt HBS een aangepaste icoonfunctie. Maak het bestand assets/icons/custom.js aan in de hoofdmap van de site en importeer de gewenste iconen.

 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;

Verwijder het commentaarteken // om dit te activeren.

@fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons en @fortawesome/free-brands-svg-icons vertegenwoordigen respectievelijk Solid-, Regular- en Brand-iconen.

JS-variabelen

JS-variabelen gebruiken camelCase; de bijbehorende klassenamen zijn in kleine letters en gescheiden door een koppelteken.

Gebruik

Afhankelijk van het type icoon verschillen de klassevoorvoegsels:

Met de eerder geïmporteerde iconen als voorbeeld:

Als het icoon niet correct wordt weergegeven, controleer dan of het voorvoegsel juist is.

Icoonkleur

Je kunt de CSS-kleurklassen of het style-attribuut gebruiken voor de kleur van het icoon.

Bij gebruik in configuraties, front matter, enzovoort moet je de code citeren/escapen, anders kan de YAML/TOML/JSON-parsing mislukken. Bijvoorbeeld:

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