Schauen Und Fühlen

Standardmäßig verfügt eine Website, die dieses Design verwendet, über die Standardschriftarten, -farben und das allgemeine Erscheinungsbild. Allerdings kann das Standardschema nicht jeden zufriedenstellen, aber keine Sorge, Sie können die Theme-Standardeinstellungen wie Palettenfarben, Schriftarten und Syntaxhervorhebung problemlos überschreiben.

Favoriten

HBS generiert Symbole in mehreren Größen basierend auf der Datei assets/favicon.webp (höhere Priorität) oder assets/favicon.png. Speichern Sie einfach Ihr eigenes Favicon-Bild unter demselben Pfad, um die Standardeinstellungen zu überschreiben.

Sie müssen auch das Maskensymbol assets/safari-pinned-tab.svg überschreiben.

Die statischen Symbole static/images/icons/icon-{size}.png haben aus Gründen der Abwärtskompatibilität eine höhere Priorität.

Benutzerdefinierte Größen

Sie können die gewünschten Größen über die Datei params ändern.

 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}

Hintergrundbild

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 bietet zahlreiche Paletten: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.

Verfügbare Paletten

Die Palettenauswahl im Einstellungsfeld basiert auf dem Parameter palettes.

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

Sie können die Palettenauswahl auch deaktivieren, indem Sie den Parameter palettes auf ein leeres Array [] setzen.

Standardpalette

1palette = "indigo"

Sie müssen den Browser-Cache leeren, nachdem Sie die Standardpalette geändert haben.

Palettenfarbe überschreiben

1$palette-blue: darkblue;

Nach der Änderung der SCSS-Variablen auf assets/main/scss/_variables.scss wird die Farbe der blue-Palette in darkblue geändert. Weitere Informationen finden Sie im SCSS-Variablen.

Schriftarten

Schriftfamilie

Wir geben keine Schriftart an, sodass system-ui in den meisten Browsern verwendet wird.

Sie können problemlos andere Web-Schriftarten verwenden, z. B. Google-Schriftarten. Nehmen wir als Beispiel die Schriftart Roboto.

Zuerst importieren wir die Schriftart und überschreiben dann die Variable 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}

Syntaxhervorhebung

Für das Design müssen die folgenden Markup-Parameter auf bestimmte Werte festgelegt werden.

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

Siehe auch Hervorhebung konfigurieren.

Stil

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

Siehe auch Alle unterstützten Stile.

Symbole

HBS verwendet einen benutzerdefinierten FontAwesome v5-Symbolsatz, der nur die vom Thema verwendeten Symbole enthält, um die Größe der Symboldatei zu reduzieren.

Symbole hinzufügen

Da benutzerdefinierte Symbole erforderlich sind, bietet HBS eine Funktion für benutzerdefinierte Symbole. Erstellen Sie einfach eine assets/icons/custom.js-Datei im Stammverzeichnis der Site und importieren Sie die gewünschten Symbole.

 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;

Damit dies funktioniert, müssen Sie den Kommentar entfernen, d. h. das Präfix // entfernen.

Wörtlich stehen @fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons und @fortawesome/free-brands-svg-icons für die Symbole Solid, Regular und Brand.

JS-Variablen

JS-Variablen werden mit camelCase benannt, und ihre entsprechenden Klassennamen sind in Kleinbuchstaben geschrieben und durch eine horizontale Linie voneinander getrennt.

Nutzung

Abhängig von der Art des Symbols sind auch ihre Klassenpräfixe unterschiedlich. Die entsprechende Beziehung ist wie folgt:

Nimmt als Beispiel die zuvor importierten Symbole:

Wenn das Symbol nicht richtig angezeigt wird, überprüfen Sie bitte, ob das Präfix korrekt ist.

Symbolfarbe

Sie können entweder die Farb-CSS-Dienstprogramme oder das style-Attribut zum Festlegen der Symbolfarbe angeben.

Wenn Sie es in Konfigurationen, im Titelblatt usw. verwenden, sollten Sie den Code in Anführungszeichen/Escapezeichen setzen müssen, da sonst die YAML/TOML/JSON-Analyse möglicherweise fehlschlägt. Zum Beispiel,

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