Jak korzystać z szablonów wbudowanych w Hugo: przewodnik krok po kroku

Opublikowany: 2024-11-27

Hugo to potężny generator witryn statycznych, który umożliwia programistom i twórcom treści szybkie tworzenie szybkich i skalowalnych witryn internetowych. Jedną z podstawowych funkcji Hugo jest system szablonów, który pomaga w strukturyzowaniu treści i dostosowywaniu wyglądu i stylu witryny. Jeśli dopiero zaczynasz korzystać z Hugo lub chcesz efektywniej wykorzystać jego możliwości w zakresie szablonów, ten przewodnik krok po kroku pokaże Ci, jak korzystać z szablonów wbudowanych w Hugo.

Czym są szablony w Hugo?

Szablony w Hugo to pliki definiujące sposób renderowania treści w Twojej witrynie. Składają się z kodu HTML, CSS i specyficznego dla Hugo, co pozwala dostosować układ witryny. Szablonów można używać do różnych celów, takich jak tworzenie nagłówków, stopek, pojedynczych stron, list i nie tylko.

Znaczenie pola wyboru problemu, które nie jest wyświetlane

Hugo ma wbudowane szablony, które są częścią struktury motywów, a także umożliwia tworzenie niestandardowych szablonów dla większej elastyczności. Szablony te są stosowane automatycznie na podstawie typu treści, struktury adresu URL i innych zmiennych, co ułatwia zarządzanie złożonymi witrynami.

Krok 1: Zainstaluj Hugo i utwórz nową witrynę

Zanim zagłębisz się w szablony, musisz najpierw zainstalować Hugo i skonfigurować swoją witrynę. Oto jak to zrobić:

  1. Zainstaluj Hugo :
    • Jeśli nie zainstalowałeś Hugo, postępuj zgodnie z oficjalnym przewodnikiem instalacji dla swojego systemu operacyjnego: Instalowanie Hugo.
  2. Utwórz nową witrynę Hugo :
    • Uruchom następującą komendę w terminalu, aby utworzyć nową witrynę:
       hugo new site mysite
    • Spowoduje to utworzenie nowego katalogu o nazwie mysite z podstawową strukturą plików dla Twojego projektu Hugo.

Krok 2: Dodaj motyw

Hugo współpracuje z motywami, aby zarządzać sposobem wyświetlania treści. Możesz użyć istniejącego motywu z Hugo Themes lub utworzyć niestandardowy. Dla uproszczenia użyjmy motywu z biblioteki motywów Hugo.

  1. Dodaj motyw :
    • Możesz dodać motyw, klonując go do katalogu themes/ . Na przykład użyjmy motywu „Ananke”:
       git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  2. Skonfiguruj motyw :
    • Otwórz plik config.toml i ustaw motyw:
       theme = "ananke"

Krok 3: Zrozumienie struktury szablonu Hugo

System szablonów Hugo opiera się na języku szablonów Go. Szablony są podzielone na kilka kategorii w zależności od ich przeznaczenia:

  • Szablony podstawowe : są to nadrzędne szablony otaczające treść. Często zawierają wspólne sekcje, takie jak nagłówki, stopki i nawigacja.
  • Szablony treści : definiują sposób wyświetlania poszczególnych typów treści (np. wpisów na blogu, stron, sekcji).
  • Szablony list : te szablony kontrolują sposób prezentacji grup treści (np. listy wpisów na blogu).
  • Szablony częściowe : są to mniejsze fragmenty, które można ponownie wykorzystać (np. pasek nawigacyjny lub stopka), które są zawarte w głównych szablonach.

Wspólne katalogi szablonów

  • layouts/ : Zawiera wszystkie pliki układów, takie jak index.html , single.html itp.
  • themes/ : zawiera szablony dołączone do wybranego motywu.
  • content/ : Przechowuje pliki zawartości (zwykle zapisane w Markdown).

Krok 4: Utwórz szablon

Przyjrzyjmy się, jak utworzyć i zmodyfikować szablon strony.

  1. Utwórz nowy plik zawartości :
    • Aby utworzyć nową stronę (np. wpis na blogu), użyj następującego polecenia:
       hugo new posts/my-first-post.md
    • Spowoduje to utworzenie nowego pliku Markdown wewnątrz content/posts/ z frontem (YAML lub TOML) i symbolem zastępczym dla Twojej treści.
  2. Utwórz szablon dla pojedynczych stron :
    • W katalogu layouts utwórz plik o nazwie single.html wewnątrz layouts/_default/ . Będzie to kontrolować sposób wyświetlania poszczególnych stron treści.
       <!-- layouts/_default/single.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
    • Ten szablon wyświetli tytuł i treść każdej pojedynczej strony, którą utworzysz.
  3. Utwórz szablon listy :
    • Podobnie możesz utworzyć szablon listy do wyświetlania wielu elementów treści (np. listy postów). Utwórz plik list.html w katalogu layouts/_default/ .
       <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

Krok 5: Dostosowywanie szablonów

Możesz ulepszyć swoje szablony dzięki bogatemu zestawowi funkcji szablonów Hugo. Możesz na przykład dołączyć niestandardowy CSS, zapętlić zmienne lub sformatować daty:

  • Dodawanie CSS : Możesz połączyć plik CSS ze swoim szablonem:
     <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
  • Formatuj daty : Użyj funkcji date , aby wyświetlić daty w określonym formacie:
     <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>

Krok 6: Udostępnij i wyświetl podgląd swojej witryny

Po przygotowaniu szablonów i dodaniu treści możesz wyświetlić podgląd swojej witryny lokalnie:

 hugo server

Przejdź do http://localhost:1313 aby wyświetlić swoją witrynę.

Często zadawane pytania dotyczące szablonów Hugo

1. Do czego służy katalog „layouts” w Hugo?

Katalog layouts to miejsce, w którym przechowujesz wszystkie pliki szablonów w Hugo. Służy do definiowania sposobu, w jaki różne typy treści (np. posty, strony, listy) będą renderowane w interfejsie Twojej witryny. Szablony są uporządkowane według typu i lokalizacji, np. single.html w przypadku poszczególnych stron z zawartością i list.html w przypadku list zawartości.

2. Czy mogę tworzyć własne niestandardowe szablony w Hugo?

Tak, możesz tworzyć niestandardowe szablony w Hugo. Umieszczając szablony w katalogu layouts , możesz tworzyć wyspecjalizowane szablony dla określonych typów treści, sekcji, a nawet unikalnych sposobów wyświetlania treści. Hugo umożliwia także nadpisanie domyślnych szablonów z wybranego motywu.

3. Jak Hugo obsługuje pliki treści i szablony?

Hugo korzysta z systemu, w którym pliki treści (zapisane w Markdown lub w innych formatach) są łączone w pary z szablonami w celu określenia sposobu ich wyświetlania. Kiedy tworzysz treść (np. wpis na blogu), Hugo automatycznie wyszukuje odpowiedni szablon (np. single.html ) i renderuje treść przy użyciu tego szablonu. Hugo obsługuje także organizację treści w sekcje, w których można używać różnych szablonów.

4. Czym są szablony częściowe w Hugo?

Szablony częściowe to komponenty lub fragmenty kodu HTML, które można ponownie wykorzystać, i które można dołączyć do innych szablonów. Na przykład nagłówek, stopkę lub menu nawigacyjne można utworzyć jako części i uwzględnić w różnych szablonach przy użyciu elementu {{ partial "header.html" . }} składnia. Pomaga to w utrzymaniu zasad DRY (nie powtarzaj się) i ułatwia zarządzanie witryną.

5. Czy mogę używać szablonów Hugo z niestandardowym motywem?

Tak, możesz używać niestandardowych motywów w Hugo. Możesz stworzyć własny motyw lub skorzystać z istniejącego z repozytorium motywów Hugo. Jeśli używasz istniejącego motywu, możesz zastąpić jego szablony, dodając własne szablony w katalogu layouts , co pozwala modyfikować określone części motywu bez zmiany całej struktury.

Wykonując poniższe kroki i poznając system szablonów Hugo, możesz tworzyć potężne, konfigurowalne witryny internetowe. Niezależnie od tego, czy korzystasz z wbudowanych szablonów, czy tworzysz własne, Hugo zapewnia elastyczność i szybkość niezbędną do łatwego tworzenia witryn statycznych.