Ressources und Seitenorganisation (Bundletype)

Ressourcen sind Bilder, Dokumente, Scriptdateien, usw. Ressourcen werden zum einen lokal unterhalb des Inhaltsverzeichnisses content\... abgelegt. Zum anderen werden Ressourcen auch global im Verzeichnis themes\... zur Verfügung gestellt.

Bundletype

Der Umgang mit Ressource ist abhängig von der verwendeten Seitenorganisation dem sog. BundleType. In einem Gohugo-Projekt werden Webseiten durch Seitenpakete (Bundle) organisiert. Ein Seitenpaket ist ein Verzeichnis, das Inhalte und Ressourcen einkapselt. Es gibt zwei Arten der Seitenorganisation, Leaf (Blatt) und Branch (Zweig). Die Seitenvariable {{ .Page.BundleType }} liefert die Art der Seitenorganisation zurück oder nichts, wenn die Seite kein Bundle ist. Hauptmerkmal eines Bundle ist die index-Datei im Verzeichnis.

Globale Theme-Ressourcen

Themenressourcen werden im Themenverzeichnis themes\<themes-name>\assets\ gespeichert. Diese Resourcen stehen global zur Verfügung und können einzelne Dateien oder ganze Verzeichnisse sein.

 themes/
  └── <themesname>
      └── assets
          ├── Foto01.jpg
          ├── Foto02.jpg
          ├── sass
          │   ├── main.scss
          │   └── base.sass
          └── images
              ├── FotoX.jpg
              ├── FotoY.jpg
              └── FotoZ.jpg

Der Zugriff auf die Ressourcen in Html-Dateien erfolgt mit folgenden Funktionen:

• resources.Get - findet den Dateinamen, der in Hugos Assets-Dateisystem angegeben ist und erstellt ein Ressourcenobjekt, das für weitere Transformationen verwendet werden kann.
• resources.GetRemote - wie resources.Get nur für URL’s
• resources.Match - ruft alle Ressourcen ab, die mit dem angegebenen Basispfad übereinstimmen.
• resources.GetMatch - findet die erste Ressource, die mit dem angegebenen Muster übereinstimmt, oder nil, wenn keine gefunden wird.

Hier ein paar Beispiele.

 // Beispiel Match **.jpg findet alle jpg-Files unterhalb von assets
 // ================================================================
 {{ with resources.Match "**.jpg" }}
	{{ range . }}
		{{ .Permalink }} {{ .Width }} {{ .Height }}
		<img src={{ .Permalink }}>
	{{ end }}	
 {{ end }}
   
   
   
 // Beispiel Get für Einzeldatei
 // ============================
 {{ $image := resources.Get "images/FotoX.jpg" }}
 {{ $image := $image.Fit "300x400" }}
 <img src={{ $image.Permalink }} >

 {{ $image := $image.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
 <img src={{ $image.Permalink }}>
   

Lokale Resources

Lokale Ressourcen bzw. Seitenressourcen werden im Seitenverzeichnis content\... abgelegt.

 content/
  └── category
      ├── thema-1
      │   ├── index.md
      │   ├── article01.md
      │   ├── article02.md
      │   ├── info.pdf
      │   ├── Blume.jpg
      │   ├── FotoX.jpg
      │   └── FotoZ.jpg
      └── thema-2

Um lokale Ressourcen einzubinden wird die Seitenvariable .Page.Parent voran gestellt.

Methoden

Mit der Methode Resources.Get wird eine Ressource angesprochen.

 {{ $image := .Page.Parent.Resources.Get "Blume.jpg" }}
 {{ with $image }}
    	{{ $image.RelPermalink }}">
 {{ end }}
   

Die Methode Resources.Match hingegen spricht alle Ressourcen im Seitenverzeichnis an.

 {{ with .Page.Parent.Resources.Match "**.jpg" }}
 	{{ range . }}
		{{ .RelPermalink }}
	{{ end }}
 {{- end -}}
   

Eigenschaften (Properties)

Globale wie lokale Ressourcen haben die gleichen Befehle für die Abfrage von Eigenschaften.

Bei einem ResourceType=image werden noch Exifdaten ausgegeben.

Eigenschaft Content

Der Inhalt einer Ressource kann mit der Content-Eigenschaft direkt in Html integriert werden. Am Beispiel einer Bilddatei aus dem Ressourcenverzeichnis assets demonstriert der folgende Code wie eine Grafiken mittels einer Daten-URI direkt in statisches Html transformiert wird. Dazu müssen Hugo-Pipes genutzt werden.

 {{ with resources.GetMatch "images/**.jpg" }}
	<img src="data:{{ .MediaType }};base64,{{ .Content | base64Encode }}">
 {{ end }}
   

Als Ergebnis steht im Html-Seitenquelltext die Zeile:

  <img alt="Beispiel_Daten_URI" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABxCAYAAACQnewjAACAAElEQVR4nLT9d5 .....
   

Und natürlich das entsprechende Bild.

Stichworte (tags)

• dev
• gohugo
• markdown
• resources
• image