Wygląd strony i inne takie

Kolory

Konfiguracja serwisu zawarta jest w katalogu config/_default/.

Każdy z plików odpowiada za inny fragment konfiguracji:

• hugo.yaml zawiera ustawienia globalne i ogólne dotyczące systemu Hugo;
• languages.yaml to definicje używanych na stronach języków;
• menus.yaml (i ewentualnie menus.en.yaml,…) to definicja menu;
• module.yaml — to wersja oprogramowania (jest ona ściągana z serwerów GitHub w miarę potrzeby)
• params.yaml specyficzne dla frameworku Hugo Blox parametry.

W pliku config/_default/params.yamlmożna zmieniać:

• kolory strony
• użyty krój czcionek
• wielkość fontu.

I parę innych ustawień. Wygląda to tak:

appearance:
  theme_day: minimal
  theme_night: minimal
  font: minimal
  font_size: L

Kolorystyka strony wynika z szablonu użytego szablonu. Standardowo jest to minimal. Inne dostępne szablony to:

• 1950s (tylko light)
• apogee (tylko dark)
• coffee (tylko light)
• cyberpunk (light i dark)
• dark (tylko dark)
• earth (tylko light)
• forest (tylko light)
• minimal (light i dark)
• mr_robot (tylko dark)
• ocean (tylko light)
• rose (tylko light)
• strawberry (tylko light)

Wygląd tych szablonów można obejrzeć na stronie dokumentacji.

Rozróżnienie theme_day/theme_night wnika z obecnie panujących tendencji: ciemne szablony zużywają nieco mniej energii na urządzeniach mobilnych. Niestety jest kłopot z ilustracjami — zwłaszcza logo źle znosi zmianę szablonu z jasnego na ciemny¹.

Nie każdy z szablonów obsługuje motyw ciemny.

Można przygotować swój własny szablon biorąc za wzór szablon minimal

# Theme metadata
name = "Minimal"

[light]
  # Primary
  primary = "#1565c0"

  # Menu
  menu_primary = "#fff"
  menu_text = "#34495e"
  menu_text_active = "#2962ff"
  menu_title = "#2b2b2b"

  # Home sections
  home_section_odd = "rgb(255, 255, 255)"
  home_section_even = "rgb(247, 247, 247)"

[dark]
  # Primary
  primary = "#bbdefb"

  link = "#bbdefb"
  link_hover = "#bbdefb"

Kolory definiowane są tak jak kolory HTML.

Zawartość trzeba zmodyfikować według swoich upodobań i zmodyfikowany plik wstawić do kartoteki data/themes/zapisując pod wybraną własną nazwą o rozszerzeniu toml. nazwy tej używamy w pliku params.yaml.

Fonty

Zdefiniowane szablony fontów to:

• Minimal (modern)
• Classic
• Rose (traditional serif)
• Mr Robot (futuristic)
• Cyberpunk (hacker style)
• Native: use device fonts for maximum performance

Plik definiujący fonty minimal wygląda tak:

# Font style metadata
name = "Minimal"

# Optional Google font URL
google_fonts = "family=Montserrat:wght@400;700&family=Roboto+Mono&family=Roboto:wght@400;700"

# Font families
heading_font = "Montserrat"
body_font = "Roboto"
nav_font = "Roboto"
mono_font = "Roboto Mono"

Można go zmienić i podobnie jak w przypadku szablonu kolorów umieścić pod wybraną nazwą w kartotece data/fonts/.

Sugeruję żeby zacząć od zdefiniowanych szablonów i wybrać coś co odpowiada.

Wielkość czcionek

Dostępne są następujące rozmiary: xs, s, m, l, xl.

Sposób dokonywania zmian opisuje dokumentacja.

Nagłówek

Kolejny parametry wpływające na wygląd strony to nagłówek czyli poniższa część pliku params.yaml:

header:
  navbar:
    enable: true
    align: l
    show_logo: true
    show_language: false
    show_day_night: true
    show_search: true
    highlight_active_link: true

Znaczenie parametrów opisane jest w dokumentacji. Są mniej/więcej samoobjaśniające.

Strony wielojęzyczne

Jednym z parametrów wymienionych wcześniej jest show_kanguage: false. Dotyczy ono budowania serwisu wielojęzycznego. Jest to stosunkowo proste.

Po pierwsze trzeba zdefiniować język podstawowy strony (w pliku) hugo.yaml

defaultContentLanguage: pl

linia ta definiuje podstawowy język strony.

Kolejny parametr w tym pliku to:

defaultContentLanguageInSubdir: false

O powyższym za chwilę…

W pliku languages.yaml mamy coś takiego:

# Default language
pl:
  languageCode: pl-pl
 #contentDir: content/pl

Określa się kod języka podstawowego.

Jeżeli chcemy zdefiniować kolejne języki dodajemy linię (w przypadku angielskiego):

en:
  languageCode: en-us

(choć być może powinno być en lub en-gb). Kody ISO znaleźć można na przykład na stronie.

Parametr defaultContentLanguageInSubdir: mówi jak mają wyglądać adresy URL wersji językowych czy tak (moja strona główna)

http://myszka.kmim.wm.pwr.edu.pl/

czy może tak

http://myszka.kmim.wm.pwr.edu.pl/pl/

gdyby było defaultContentLanguageInSubdir: true.

Angielskojęzyczna wersja strony jest w „podkartotece”

http://myszka.kmim.wm.pwr.edu.pl/en/

Strony katedry zorganizowane są taki właśnie sposób:

• polska

  https://nowy.kmim.wm.pwr.edu.pl/pl/
  

• angielska

  https://nowy.kmim.wm.pwr.edu.pl/en/
  

Natomiast samo tworzenie zawartości wielojęzycznej jest stosunkowo poste. Gdy serwis nie jest wielki nie ma potrzeby rozdzielać zawartości w jednym języku od zawartości w innym. Tworząc plik index.md pamiętamy, że zawiera on treść w języku domyślnym, odpowiadająca mu treść po angielsku będzie w pliku index.en.md.

Na tych stronach, które mają zawartość w innych językach — uaktywni się przełącznik języka (O ile tylko show_language: true.

Trzeba tylko jeszcze przygotować alternatywną wersję menu.

Menu

Za menu odpowiada plik menus.yaml w kartotece config/_default/i ewentualnie menus.en.yaml.

W przypadku mojej strony wygląda on tak

main:
  - name: Home
    url: '#about'
    weight: 10
  - name: Aktualności
    url: '#posts'
    weight: 20
  - name: Projekty
    url: 'project'
    weight: 30
  - name: LaTeX
    url: latex
    weight: 35
  - name: Dydaktyka
    url: 'dydaktyka'
    weight: 40
  - name: Publikacje
    url: 'publication'
    weight: 50
  - name: Kontakt
    url: '#contact'
    weight: 60

Parametr weight: określa kolejność pozycji. Parametr url: adres zawartości na stronie. Gdy jest on poprzedzony znakiem # — odnosi się do sekcji na stronie głównej (o tym później) opisanej w pliku content/_index.md.

Można tworzyć menu rozwijane — o tym też później.