├Ś
Startseite RSS-Feed Info
i18n - Teil 2 von 3 aufeinander aufbauenden Anleitungen f├╝r das Erstellen einer Hugo multilingualen Website.

Hugo - Anleitung Teil 2 - i18n multilinguale Site erstellen

Part 2 Hugo i18n HowTo

i18n - Teil 2 von 3 Anleitungen f├╝r das Erstellen einer Hugo multilingualen Website. Der zweite Teil geht in die Tiefe der Theme-Entwicklung und zeigt die Programmierung der multilingualen Website. Mit den folgenden Themen: Eintr├Ąge im html und head Tag der baseof.html und Men├╝struktur in der hugo.toml, inklusiv der Navigation Partials nav.html und sidepanel.html.

baseof.html - der Rahmen f├╝r eine multilinguale Website

Die baseof.html muss man sich als Bilderrahmen um den Content vorstellen. Ein Basis Template das auf allen Webseiten benutzt wird. Dadurch erspart man sich das ewige wiederholen von Dingen, die bei jeder Webseite vorhanden sein m├╝ssen. Eine in HTML manuell erstellte Webseite muss bei jeder nachtr├Ąglichen ├änderung in allen bis dahin erstellten Webseiten ge├Ąndert werden.

In der Hugo Dokumentation - Base Templates and Blocks - wird das Einbinden von Content durch die Hugo Anweisung, von zum Beispiel {{ block "main" . }} erkl├Ąrt. Aber dazu sp├Ąter mehr.

Mein gek├╝rzter Sourcecode in der themes/tekki/layouts/_default/baseof.html sieht wie folgt aus:

<!doctype html>
<html lang="{{- .Site.Language.Lang -}}">
  <head>
    <meta charset="utf-8">
  
    {{ if eq .Params.sitemap_exclude true }}
    <meta name="robots" content="noindex, nofollow, noarchive">
    {{ else }}
    <meta name="robots" content="index, follow, archive">
    {{ end }}

    {{ if .IsHome }}
      <!-- Homepage -->
      <title>{{ .Site.Params.description }} - {{ .Site.Params.mydomain }}</title>
      {{ if .Site.Params.description }}
      <meta name="description" content="{{ .Site.Params.description }}">
      {{end}}
    {{ else }}
      <!-- Page, Blog Page -->
      <title>{{ .Title }} - {{ .Site.Params.mydomain }}</title>
      {{if .Description }}
        <meta name="description" content="{{ .Description }}">
      {{ else }
        <!-- Tags -->
        {{ if eq .Site.Language.Lang "de" }}
          {{ if eq .Title "Tags" }}
            <meta name="description" content="├ťbersicht der Tags von {{ .Site.Params.mydomain }}">
          {{ else }}
            <meta name="description" content="Das Tag #{{ .Title }} ist mit diversen Blogbeitr├Ągen verkn├╝pft.">
          {{ end }}
        {{ else }}
          {{ if eq .Title "Tags" }}
            <meta name="description" content="Overview of the tags from {{ .Site.Params.mydomain }}">
          {{ else }}
            <meta name="description" content="The tag #{{ .Title }} is linked to various blog posts.">
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}
  
    {{ if .IsTranslated }}
    {{ range .Translations }}
    <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
    {{ end }}
    {{ end }}
  </head>

  <body>
    {{ partial "header.html" . }}
    {{ partial "nav.html" . }}
    {{ partial "sidepanel.html" . }}
    <div id="content">
      {{ block "main" . }}{{ end }}
    </div>
    {{ partial "footer.html" . }}
  </body>
</html>

Den Sourceode habe ich wegen der ├ťbersichtlichkeit und Erkl├Ąrbarkeit auf die f├╝r i18n relevanten Eintr├Ąge gek├╝rzt. F├╝r die Erkl├Ąrungen habe ich die oben angezeigte baseof.html in entsprechende Code-Bl├Âcke aufgeteilt:

html lang=“de” oder “en”

Mit der Language Angabe wird die Sprache f├╝r die komplette Seite bestimmt. Damit signalisiert man Screenreadern in welcher Sprache sie die Ausgabe umsetzen sollen. Google nutzt dieses Attribut nicht f├╝r die Suche, sondern ermittelt die Hauptsprache einer Seite auf Basis von deren Inhalten.

Mit Site.Language.Lang wird die Sprache der aktuellen Seite ausgegeben. Diese globale Variable erstellt Hugo durch die Analyse der [languages] Parameter in der hugo.toml. Diesen Parameter habe ich im Teil 1, im Abschnitt - i18n Eintr├Ąge in der hugo.toml - beschrieben.

head - meta charset=“utf-8”

UTF-8 ist ein Zeichensatz der als Multibyte-Zeichenfolge auch Zeichen fern├Âstlicher Sprachen und Sprachen aus dem afrikanischen Raum darstellen kann. Die Standardzeichenkodierung in HTML-5 ist UTF-8. Ihr Sourcecode Editor muss das HTML-Dokument aber auch als UTF-8 speichern.

head - meta name=“robots” content=

    {{ if eq .Params.sitemap_exclude true }}
    <meta name="robots" content="noindex, nofollow, noarchive">
    {{ else }}
    <meta name="robots" content="index, follow, archive">
    {{ end }}

Wenn die aktuelle Webseite den Front Matter Parameter sitemap_exclude: true enth├Ąlt, werden Suchroboter angewiesen die Webseite nicht zu indexieren, ihr nicht zu folgen und sie nicht zu archivieren. Wenn dies nicht der Fall ist sollen sie dies alles tun.

Den Front Matter Parameter sitemap_exclude: true habe ich im ersten Teil der HowTo-Serie beschrieben - Was und wof├╝r sind _index.md Dateien? - Ungewollte Auswirkung auf die sitemap.xml

head - HTML-Tag title und Meta-Tag name=“description”

Im folgenden Abschnitt wird der Title und die Description f├╝r die aktuelle Webseite zusammengef├╝gt. Es gibt die Bereiche Homepage, Webseite und Tags. Jeder Bereich muss individuell erstellt werden.

  
    {{ if .IsHome }}
      <!-- Homepage -->
      <title>{{ .Site.Params.description }} - {{ .Site.Params.mydomain }}</title>
      {{ if .Site.Params.description }}
      <meta name="description" content="{{ .Site.Params.description }}">
      {{end}}
    {{ else }}
      <!-- Page, Blog Page -->
      <title>{{ .Title }} - {{ .Site.Params.mydomain }}</title>
      {{if .Description }}
        <meta name="description" content="{{ .Description }}">
      {{ else }
        <!-- Tags -->
        {{ if eq .Site.Language.Lang "de" }}
          {{ if eq .Title "Tags" }}
            <meta name="description" content="├ťbersicht der Tags von {{ .Site.Params.mydomain }}">
          {{ else }}
            <meta name="description" content="Das Tag #{{ .Title }} ist mit diversen Blogbeitr├Ągen verkn├╝pft.">
          {{ end }}
        {{ else }}
          {{ if eq .Title "Tags" }}
            <meta name="description" content="Overview of the tags from {{ .Site.Params.mydomain }}">
          {{ else }}
            <meta name="description" content="The tag #{{ .Title }} is linked to various blog posts.">
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}

Die Startseite hat einen anderen Titel und Beschreibung, als eine normale Webseite. Sie erh├Ąlt den Titel und die Beschreibung aus der hugo.toml. Bei der Webseite kommt der Titel und die Beschreibung aus den Front Matter Parametern der md Datei. Bei den Tags gibt es bei mir die Tag-Wolke und f├╝r ein einzelnes Tag eine Liste mit Beitr├Ągen. Dazu weiter unten mehr.

Das Benutzen und auseinanderhalten von globalen Variablen .Site.Params.description und Page / Front Matter Variablen .Description hat mich am Anfang mehrmals in eigene Fehler laufen lassen. Aber eigentlich, wenn man es dann verstanden hat, ist es einfach. Die Hugo Dokumentationen sind dazu sehr aussagekr├Ąftig:

Title und description der Startseite

    {{ if .IsHome }}
      <!-- Homepage -->
      <title>{{ .Site.Params.description }} - {{ .Site.Params.mydomain }}</title>
      {{ if .Site.Params.description }}
      <meta name="description" content="{{ .Site.Params.description }}">
      {{end}}
    {{ else }}

Wenn die aktuelle Webseite die Startseite ist, werden die Inhalte f├╝r description und title aus der hugo.toml ├╝bernommen. In .Site.Params.mydomain steht bei mir die Domain.

Title und description der Webseiten

    {{ else }}
      <!-- Page, Blog Page -->
      <title>{{ .Title }} - {{ .Site.Params.mydomain }}</title>
      {{if .Description }}
        <meta name="description" content="{{ .Description }}">
      {{ else }

Wenn die aktuelle Webseite nicht die Startseite ist, ist dies eine normale Webseite und der Titel und Description wird aus den Front Matter Variablen der Seite entnommen. Den Titel erweitere ich noch mit mydomain aus der hugo.toml, also der globalen, l├Ąnderspezifisch angepassten Variablen mit dem Domainnamen.

Title und description der Tags

      {{ else }
        <!-- Tags -->
        {{ if eq .Site.Language.Lang "de" }}
          {{ if eq .Title "Tags" }}
            <meta name="description" content="├ťbersicht der Tags von {{ .Site.Params.mydomain }}">
          {{ else }}
            <meta name="description" content="Das Tag #{{ .Title }} ist mit diversen Blogbeitr├Ągen verkn├╝pft.">
          {{ end }}
        {{ else }}
          {{ if eq .Title "Tags" }}
            <meta name="description" content="Overview of the tags from {{ .Site.Params.mydomain }}">
          {{ else }}
            <meta name="description" content="The tag #{{ .Title }} is linked to various blog posts.">
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}

Nun wird es etwas komplizierter. Wenn die aktuelle Webseite nicht die Startseite ist und der Front Matter Parameter .Description nicht vorhanden ist, werden aktuell Tags angezeigt.

Den Titel f├╝r die Tags habe ich schon bei den “normalen” Webseiten zusammengesetzt. Mit {{ if eq .Site.Language.Lang "de" }} unterscheide ich in welcher Sprache die Seite angezeigt wird. Der nun folgende Aufwand f├╝r meta name=description basiert auf unterschiedlichen Seiten. Mit {{ if eq .Title "Tags" }} wird meine Tag-Wolke abgefangen. Im else Zweig wird die Teaser-Liste mit dem jeweiligen Tag angezeigt.

SEO Tipp f├╝r das HTML-Tag title

Ein l├Ąngerer und genau beschreibender Titel gef├Ąllt Suchmaschinen besser als 1 oder 2 W├Ârter. In den Suchergebnissen werden von dem Titel nur 55 bis 60 Zeichen angezeigt. Der Rest wird abgeschnitten. Also sollte das Wichtige in diesen ersten 55 Zeichen stehen.

Quelle: MDN - Page titles and SEO

SEO Tipp f├╝r das Meta-Tag name=description

Google zeigt in der Ergebnisliste unterhalb der Titel-Links die Beschreibung aus dem Meta-Tag description an. Das Tag Description ist also sehr wichtig. Wenn man die Zeichenl├Ąnge der Texte auf der Ergebnisseite ├╝berpr├╝ft zeigt sich, dass ca. 160 Zeichen angezeigt werden. Selber beschr├Ąnke ich mich auf weniger als 140 Zeichen. Dadurch sollte gew├Ąhrleistet sein, dass auch alles was ich m├Âchte angezeigt wird.

Wenn eine Webseite auch in ├╝bersetzter Version vorhanden ist, sollte man einen alternativen Link f├╝r Suchmaschinen einbauen.

    {{ if .IsTranslated }}
    {{ range .Translations }}
    <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
    {{ end }}
    {{ end }}

Wenn die aktuelle Webseite ├╝bersetzt wurde, werden im range die alternativen Links zu den anderen Webseiten erstellt.

Google erkl├Ąrt den link rel= alternate umfangreich in der Google Search Central Dokumentation:

Google Search Central Dokumentation - Google ├╝ber lokalisierte Versionen deiner Seite informieren - HTML

body - Hugo’s block keyword

Im body wird der Content der Webseite durch {{ block "main" }} eingebunden. Es gibt auf dieser Ebene nichts multilingual-spezifisches. block wird in der - Hugo Dokumentation - Base Templates and Blocks - erkl├Ąrt:

 <body>
    {{ partial "header.html" . }}
    {{ partial "nav.html" . }}
    {{ partial "sidepanel.html" . }}
    <div id="content">
      {{ block "main" . }}
      {{end}}
    </div>
    {{ partial "footer.html" . }}
  </body>
</html>

Im Partial nav.html wird das Men├╝ erstellt. Das Men├╝ wird ab einer bestimmten Displaybreite mit der CSS-Anweisung display: none unsichtbar gemacht. Ansonsten stapeln sich die Men├╝punkte h├Ą├člich ├╝bereinander. Das Partial sidepanel.html ├╝bernimmt dann die Men├╝funktion. Aber dazu weiter unten mehr.

hugo.toml - Multilinguale Men├╝struktur

Da meine Men├╝struktur sehr ├╝bersichtlich ist, habe ich sie direkt in die hugo.toml eingef├╝gt. Die Men├╝-Dokumentation von Hugo besteht aus folgenden Dokumenten:

Nachfolgend meine multilingual relevanten Eintr├Ąge in der hugo.toml:

..
defaultContentLanguage = "de"
[languages]
  [languages.de]
    languageName = "Deutsch"
    weight = 1
    description = "Blog ├╝ber Hugo, Webdesign, CSS/SCSS, SEO, Tools"
    mydomain = "tekki-tipps.de"

    [[languages.de.menu.main]]
      url    = "/tags/"
      name   = "Tags"
      weight = 1
    [[languages.de.menu.main]]
      url    = "/datenschutz/"
      name   = "Datenschutz"
      weight = 10
    [[languages.de.menu.main]]
      url    = "/impressum/"
      name   = "Impressum"
      weight = 20
    [[languages.de.menu.main]]
      url    = "/kontakt/"
      name   = "Kontakt"
      weight = 30

  [languages.en]
    languageName = "English"
    weight = 2
    description = "Blog about Hugo, web design, CSS/SCSS, SEO, Tools"
    mydomain = "tekki-tipps.de/en"

    [[languages.en.menu.main]]
      url    = "/tags/"
      name   = "Tags"
      weight = 1
    [[languages.en.menu.main]]
      url    = "/data-protection/"
      name   = "Data Protection"
      weight = 10
    [[languages.en.menu.main]]
      url    = "/legal-notice/"
      name   = "Legal notice"
      weight = 20
    [[languages.en.menu.main]]
      url    = "/contact/"
      name   = "Contact"
      weight = 30

Die Men├╝inhalte f├╝r deutsch und englisch sind bis auf die Sprache identisch. Hugo ist sehr empfindlich was die Schreibweise der Men├╝punkt in den verschiedenen Sprachen angeht. Die Syntax [[languages.de.menu.main]] und [[languages.en.menu.main]] muss eingehalten werden.

Der Inhalt von url bezieht sich relativ zur baseURL in der hugo.toml. Der Eintrag url = “/tags/" resultiert bei mir in der deutschen Variante in https://tekki-tipps.de/tags/ und in der englische in https://tekki-tipps.de/en/tags/.

Die Variable name wird als Men├╝punkttext angezeigt. Durch die sprachliche Zuordnung wird in jeder Sprache der l├Ąnderspezifische Text angezeigt.

Die Reihenfolge der Men├╝punkte wird durch die Variable weight festgelegt und erfolgt aufsteigend.

i18n Men├╝ - Partial nav.html

Die Navigatiosleiste verschwindet auf dieser Website, wenn man auf der Seite nach unten scrollt. Das Hamburger-Icon nutze ich f├╝r ein Sidepanel, in dem ebenfalls das Men├╝ angezeigt wird. Sobald die Navigationsleiste nicht mehr angezeigt wird, rutscht der Hamburger-Button in die Headerleiste links neben mein Logo. Nachfolgend der Sourcecode f├╝r die Navigation themes/tekki/layouts/partial/nav.html:

<nav id="navigation-bar">
	<div class="container">
		<div class="navbutton">
			<button type="button" class="btn btn-link menu-hamburger openbtn" onclick="openNav()"><span>&#9776;</span> {{ T "Menu" }}</button>
		</div>
		<ul class="menulinks">
			{{ $currentPage := . }}
			{{ range .Site.Menus.main }}
				{{ $menu_item_url := .URL | relLangURL }}
				{{ $page_url := $currentPage.RelPermalink | relLangURL }}
				<li {{ if eq $menu_item_url $page_url }}class="active"{{ end }}>
					<a href="{{ $menu_item_url | absLangURL }}">{{ .Name }}</a>
				</li>
			{{ end }}
		</ul>
	</div>
</nav>

Hamburger-Button f├╝r das Sidepanel

Der Hamburger-Button, der richtige Name lautet im Unicode Trigram for Heaven Ôś░, wird durch die dezimale HTML-Kodierung &#9776; angezeigt. Wenn der Button angeklickt wird, wird die JavaScript Funktion openNav() aufgerufen. Dazu weiter unten mehr. Mit der Hugo T-Funktion wird ein String, in dem Fall - Men├╝ / Menu - in die aktuelle Sprache ├╝bersetzt. Mehr dazu im Teil 3 dieser HowTo-Reihe.

Zusammenstellen der Men├╝ Listenstruktur

Mit {{ range .Site.Menus.main }} wird in der aktuellen Sprache, dass Men├╝ main in der hugo.toml nach Men├╝eintr├Ągen durchsucht. “.Site” wird von Hugo als [languages.de] oder [languages.en] interpretiert. Danach wird in der Variablen $menu_item_url die l├Ąnderspezifische URL, f├╝r den in der Schleife durchsuchten Men├╝punkt gespeichert. Der Variablen $page_url wird die l├Ąnderspezifische URL der Webseite zugewiesen. Bei dem Zusammenf├╝gen des HTML-Tags li wird untersucht, ob die aktuelle Webseite mit der URL des Men├╝-Listenpunktes ├╝bereinstimmt. Wenn ja, dann wird die CSS-Klasse active zugewiesen. Danach wird der Link aufgebaut und der Name des Men├╝punktes eingef├╝gt.

CSS/SCSS - Partial nav.html

Die SCSS Anweisungen werde ich nicht besonders erl├Ąutern. Das ist Webdesign und geh├Ârt zum Handwerkszeug dazu. Falls Sie SCSS nicht verstehen, gibt es im Internet Websites die eine Konvertierung von SCSS in CSS anbieten.

In der CSS-ID navigation-bar und weiteren CSS-Klassen, weise ich den Wert einer Variablen, zum Beispiel var(–wk-container-bg); zu. Der Grund f├╝r die Zuweisung per Variablen ist der Darkmode meines Themes. Standardm├Ą├čig startet das Theme im Lightmode. Durch ein Theme Switcher Symbol - ganz oben, das Zweite von rechts - kann in den Dunkelmodus umgeschaltet werden.

Weiter unten wird der Breite des Containers, die Variable $site-width zugewiesen. In SCSS sind solche Zuweisungen m├Âglich und sorgen f├╝r Flexibilit├Ąt. Das SCSS wird bei mir in folgender Datei gespeichert - themes/tekki/assets/scss/layouts/basic.scss:

#navigation-bar {
	display: flex;
	width: 100%;
	margin-top: 5.5rem;
	background-color: var(--wk-container-bg);
	border-top: 1px dotted var(--wk-accent-border-color);
	border-bottom: 1px dotted var(--wk-accent-border-color);

	.container {
		display: flex;
		width: $site-width;
		background-color: var(--wk-container-bg);
	
		.navbutton {
			display: flex;
			padding-right: 1.0rem;

			.btn {
				border-radius: 0;
				color: var(--wk-link-color);
			}
			.btn:focus {
				box-shadow: none;
			}
			.btn-link {
				text-decoration: none;
			}
			span {
				padding-bottom: 0.1rem;
				padding-right: 0.3rem;
			}
			.menu-hamburger {
				margin-left: -1.5rem;
				padding-right: 1.0rem;
				border-right: 1px dotted var(--wk-accent-border-color);
				background-image: none;
			}
		}
		.menulinks {
			display: flex;
			flex-direction: row;
			list-style: none;
			margin: 0;
			padding: 0;

			a {
				float: left;
				display: block;
				color: var(--wk-link-color);
				text-align: center;
				padding: 15px;
				text-decoration: none;
			}
			.active {
				border-top: 2px solid red;
			}
		}
	}
}
// Responsive
//
@media (max-width: 767.8px) {
	#navigation-bar {
		.container {
			.menulinks {
				display: none;
			}
		}
	}
}
@media (max-width: 575.8px) {
	#navigation-bar {
		.container {
			width: 100%;

			.navbutton {
				.menu-hamburger {
					margin-left: -1.0rem;
				}
			}
		}
	}
}

Wenn die Navigationsleiste noch sichtbar ist, es wurde also noch nicht nach unten gescrollt, werden bis zu einer maximalen View-Breite von 767.8px die Men├╝punkte unsichtbar gemacht. Ansonsten w├╝rden sich die Men├╝punkte stapeln und das sieht nicht gut aus. Das Men├╝ ist ├╝ber das Sidepanel auch im Responsive Mode immer erreichbar.

Wie Sie die Responsive Anzeige ├╝berpr├╝fen k├Ânnen, habe ich in einem anderen Beitrag beschrieben - ├ťberpr├╝fen des responsive Viewport .

i18n Men├╝ - Partial sidepanel.html

Sourcecode: themes/tekki/layouts/partial/sidepanel.html:

<div id="tt-sidepanel" class="sidepanel">
	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">├Ś</a>
	<a href='{{ "/" | relLangURL }}'>{{ T "Startseite" }}</a>
	<ul class="menulinks">
		{{ $currentPage := . }}
		{{ range .Site.Menus.main }}
			{{ $menu_item_url := .URL | relLangURL }}
			{{ $page_url:= $currentPage.RelPermalink | relLangURL }}
			<li {{ if eq $menu_item_url $page_url }}class="active"{{ end }}>
				<a href="{{ $menu_item_url | absLangURL }}">{{ .Name }}</a>
			</li>
		{{ end }}
	</ul>
</div>

Der erste Link zeigt das Schlie├čen-Symbol an. Wenn der Link angeklickt wird, wird die JavaScript Funktion closeNav aufgerufen. Weiter unten dazu mehr. Der zweite Link ist f├╝r den Men├╝punkt Startseite zust├Ąndig. In der hugo.toml habe ich daf├╝r keinen Men├╝punkt eingetragen. Der Rest stimmt mit dem oben erkl├Ąrten Partial nav.html ├╝berein.

CSS/SCSS - Partial sidepanel.html

Sourcecode: themes/tekki/assets/scss/layouts/basic.scss:

.sidepanel {
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: var(--wk-container-bg-4);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 3.0rem 0 2.0rem;
  transition: 0.5s;

	a {
		display: block;
		padding: 0.5rem 0.5rem 0.5rem 1.0rem;
		text-decoration: none;
		font-size: 25px;
		color: var(--wk-accent-color-5);
		transition: 0.3s;
	}
	a:hover {
		color: #f1f1f1;
	}
	.closebtn {
		position: absolute;
		top: 0;
		right: 0.5rem;
		font-size: 36px;
		background-image: none;
	}
	.menulinks {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

JavaScript - Partial sidepanel.html

Sourcecode: themes/tekki/assets/wkjs/wk-1.0.js:

/* Set the width of the sidebar to 250px (show it) */
function openNav() {
  document.getElementById("tt-sidepanel").style.width = "250px";
}

/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
  document.getElementById("tt-sidepanel").style.width = "0";
}

Fazit

Wenn Sie ein fertiges Theme f├╝r Ihr Hugo Projekt einsetzen, werden Sie wahrscheinlich diese hier beschriebenen, tiefen Eingriffe nicht benutzen k├Ânnen. Trotzdem k├Ânnen einige Hinweise n├╝tzlich sein.

Wie ich im Teil 1 schon gesagt habe - dies ist mein Weg um eine multilinguale Website aufzubauen. Ich wollte vom Theme her nicht wieder abh├Ąngig sein. Es ist selbstverst├Ąndlich, dass wenn Theme Autoren ein Theme nicht mehr weiterentwickeln wollen, sie die Freiheit haben den Service einzustellen. Da ich dies selber erlebt habe, programmiere ich meine Themes lieber selber.

Teil 3 dieser Reihe ist in Arbeit. Beim Schreiben fallen mir Dinge auf, die ich in den Teilen 1 und 2 im nachhinein anpassen muss. Deshalb sind die schon ver├Âffentlichten Teile zurzeit noch nicht endg├╝ltig.

Ich habe den Aufwand f├╝r so eine Reihe komplett untersch├Ątzt. Ich versuche die einzelnen Hugo Schritte genau zu erkl├Ąren, so dass hoffentlich auch ein i18n-Anf├Ąnger meinen Sourcecode versteht. Dadurch fallen mir gleichzeitig unsch├Âne Dinge in meinem eigenen Sourcecode auf. Die ich dann korrigiere und so lange rumprobiere bis ich mit dem dann ├Âffentlichen Ergebnis zufrieden bin.

Jedenfalls so lange bis ich mir den eigenen Sourcecode Wochen sp├Ąter noch einmal anschaue …

Linkliste zu diesem Beitrag

Das k├Ânnte Sie auch interessieren

Update:  |
16 Minuten Lesezeit
0
Dieser Beitrag wurde mit der Hugo-Version 0.111.3 erstellt.

Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.

© 2023 - Frank Kunert  -  Ich ├╝ber mich
Ein Service von webdienste-kunert.de