Hugo Theme PaperMod Obrazy !

Dodawanie metryki z godzinami

Dodałem tabelę na stronie Wyzwania i będzie na początku wystarczająca aby dodawać LogBook z przepracowanymi godzinami w Challange. Tabela będzie zawierała link do Post z numerem np #6. Nie zawsze będę tworzył post gdyż całe 2h poświęce na zadanie.

Wysyłanie Odpowiedzi na JobOffer

Dodatkowo pomyślałem że mogę wysyłać odpowiedz na Juniorskie oferty pracy Front-End oraz inne pokrewne ale związane z IT vacanty. Przy okazji robię rozeznanie co się dzieje na rynku IT. Znów jest dużo ofert Junior.

Dodawanie obrazów do Theme i kwestie renderowania

Jest więcej wiedzy na temat dodwawania do Hugo obrazów. Można statycznie przez szablony oraz można użyć techniki bundle. Temat do rozwinięcia poniżej kilka przydatnych zasobów.

Paper Mod - Cover IMG

Post Cover Image
In post's page-variables add :

cover:
  image: "<image path/url>"
  # can also paste direct link from external site
  # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
  alt: "<alt text>"
  caption: "<text>"
  relative: false # To use relative path for cover image, used in hugo Page-bundles
When you include images in the Page Bundle, multiple sizes of the image will automatically be provided using the HTML5 srcset field.

To reduce generation time and size of the site, you can disable this feature using

params:
  cover:
    responsiveImages: false
To enable hyperlinks to the full image size on post pages, use

params:
  cover:
    linkFullImages: true

Hugo Image proccessing

Hugo Render hooks

Zasoby PaperMod

PaperMod to wszechstronny szablon dla Hugo, który oferuje wiele zasobów i opcji konfiguracyjnych, umożliwiając dostosowanie wyglądu i funkcjonalności strony do własnych potrzeb. Oto niektóre z zasobów i opcji konfiguracyjnych dostępnych w PaperMod:

  • Motywy kolorystyczne: Możliwość wyboru różnych motywów kolorystycznych, aby dopasować wygląd strony do preferencji użytkownika.
  • Układ strony: Konfigurowalne układy strony, takie jak układ z jedną kolumną, dwoma kolumnami, itp.
  • Nagłówki i stopki: Opcje dostosowywania nagłówków i stopek, w tym dodawanie własnych logo, linków do mediów społecznościowych i innych elementów.
  • Menu nawigacyjne: Możliwość tworzenia i dostosowywania menu nawigacyjnych, aby ułatwić użytkownikom poruszanie się po stronie.
  • Widżety: Dodawanie różnych widżetów, takich jak listy najnowszych postów, kategorie, tagi, itp.
  • Obsługa obrazów: Zaawansowane opcje przetwarzania obrazów, w tym responsywne obrazy, linki do pełnych rozmiarów obrazów, itp.
  • Render hooks: Możliwość dostosowywania sposobu renderowania różnych elementów strony za pomocą render hooks.
  • SEO i analityka: Wbudowane wsparcie dla SEO i integracji z narzędziami analitycznymi, takimi jak Google Analytics.

Dzięki tym zasobom i opcjom konfiguracyjnym, PaperMod pozwala na praktycznie dowolne dostosowanie szablonu do indywidualnych potrzeb i preferencji użytkownika. Oto link do strony GitHub AdityLang Git Hugo PaperMode twórcy szablonu.

Dodawanie obrazów zostało zaimplementowane.

Robi się to przez:

  • dodaj obraz do static/img a następnie code.
  • w moim przypadku static/img
  • trzeba pamiętać o finalnej ścieźce do obrazka
![Kodowanie](/img/code.jpg)

Kodowanie

Więcej o tej modyfikacji a także jak dodałem title do a href jest w post #40 40 Jak dodać title w a href Hugo.

40 Jak dodać title w a href Hugo

Dodatkowe flagi do CLI Hugo

Hugo version


hugo version

Moja v Hugo go v0.123.0-DEV-1891d5e6b5575e3abb7e0f80c3fbce1670f9bd5e windows/amd64 BuildDate=2024-02-01T07:18:11Z

Usuwanie public

Przed budowaniem witryny w trybie produkcyjnym, upewnij się, że katalog public jest czysty. Możesz to zrobić, usuwając zawartość katalogu public przed każdym budowaniem:


rm -rf public/* 

Dodatkowe błędy w konsoli

Uruchom polecenie budowania z dodatkowymi opcjami debugowania, aby uzyskać więcej informacji na temat błędów:


hugo --logLevel info --logLevel debug