Kijk en Voel

Standaard heeft een site die dit thema gebruikt de standaardlettertypen, kleuren en algemene uitstraling. Het standaardschema kan echter niet iedereen tevreden stellen, maar maak je geen zorgen, je kunt eenvoudig de standaardinstellingen van het thema, zoals paletkleuren, lettertypen en syntaxisaccentuering, overschrijven.

Favicons

HBS genereert pictogrammen in meerdere formaten op basis van het bestand assets/favicon.webp (hogere prioriteit) of assets/favicon.png. Sla gewoon uw eigen favicon-afbeelding op als hetzelfde pad om de standaardinstellingen te overschrijven.

U moet ook het maskerpictogram assets/safari-pinned-tab.svg negeren.

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

Aangepaste formaten

U kunt de gewenste formaten wijzigen via het bestand 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}

Achtergrondafbeelding

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

Paletten

HBS biedt een groot aantal paletten: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.

Beschikbare paletten

De paletkiezer op het instellingenpaneel is gebaseerd op de parameter palettes.

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

U kunt de paletkiezer ook uitschakelen door de parameter palettes in te stellen op een lege array [].

Standaardpalet

1palette = "indigo"

U moet de browsercache leegmaken nadat u het standaardpalet hebt gewijzigd.

Paletkleur negeren

1$palette-blue: darkblue;

Na het wijzigen van de SCSS-variabelen op assets/main/scss/_variables.scss, wordt de kleur van het blue-palet gewijzigd in darkblue. Kijk op SCSS-variabelen voor meer informatie.

Lettertypen

Lettertypefamilie

We specificeren geen lettertype, zodat system-ui in de meeste browsers zal worden gebruikt.

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

Allereerst importeren we het lettertype en overschrijven we vervolgens de body-font-family variabele 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

Voor het thema moeten de volgende opmaakparameters worden ingesteld op specifieke waarden.

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

Zie ook Configureer Hoogtepunt.

Stijl

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

Zie ook Alle ondersteunde stijlen.

Pictogrammen

HBS gebruikt een aangepaste LettertypeAwesome v5-pictogrammenset die alleen de pictogrammen bevat die door het thema worden gebruikt om de pictogrambestandsgrootte te verkleinen.

Pictogrammen toevoegen

Gezien de behoefte aan door de gebruiker gedefinieerde pictogrammen, biedt HBS een aangepaste pictogramfunctie. U hoeft alleen maar een assets/icons/custom.js-bestand in de hoofdmap van de site aan te maken en de gewenste pictogrammen te importeren.

 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;

Om dit te laten werken, moet u het commentaar verwijderen, dat wil zeggen het voorvoegsel // verwijderen.

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

JS-variabelen

JS-variabelen krijgen een naam met camelCase, en hun corresponderende klassenamen zijn kleine letters en van elkaar gescheiden door een horizontale lijn.

Gebruik

Afhankelijk van het type pictogram zijn hun klassevoorvoegsels ook verschillend, de bijbehorende relatie is als volgt:

Neemt de eerder geïmporteerde pictogrammen als voorbeeld:

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

Pictogramkleur

U kunt de kleur-CSS-hulpprogramma’s of het style-attribuut opgeven voor het instellen van de pictogramkleur.

Wanneer u het gebruikt in configuraties, front matter enzovoort, moet u de code citeren/escapen, anders kan het parseren van YAML/TOML/JSON mislukken. Bijvoorbeeld

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