Fazit zum Arbeiten mit Hugo CMS

Erstes Fazit nach einigen Blogartikel mit Hugo CMS (Hinode Theme)

Hugo und Hinode Theme: Erste Eindrücke  

Die Einrichtung und die ersten Blogartikel waren schnell erstellt. Die Markdown Syntax und Visual Studio Code zum Erstellen der Artikel waren bekannt.

Im Detail ging es dann los mit verschiedenen Konfiguration und speziellen Hinode Markdown Shortcodes. Dazu ist einiges gut in den Hugo und Hinode Docs erklärt. Leider auch vieles historisch oder Hinode verwendet Einrichtungen anders als Hugo. Feedback gibt es aber immer schnell und im Code kann dann github eingesehen werden. Die Programmierung der Erweiterung ist in js in Verbindung mit GO / Hugo Variablen ist ein wenig gewöhnungsbedürftig.

Hier ein Beispiel der erstellen JavaScript Datei  zum Laden und Speichern der ausgewählten Sprache.

Erklärung  

(vor allem für mich selbst 😄)

**{{- if site.Params.main.enableLanguageSelectionStorage -}}**

enableLanguageSelectionStorage = Einstellung in der params.toml Hugo Einstellungsdatei. Der Code wird nur verwendet wenn die String Variable “true” ist.

{{- Minus Zeichen = string variable

Frontend  

Ein gutes Frontend für die Bearbeitung im Browser wie bei Hexo, Wordpress oder anderen CMS ist leider nicht so einfach einzurichten oder auch zu bekommen. Was mir gefallen hat, ist CloudCannon. Das ist aber aktuell preislich nicht bezahlbar. Alle anderen Frontend von der offiziellen Liste https://gohugo.io/tools/front-ends/  waren nicht so das Gelbe vom Ei. Wichtig ist für mich beim Frontend das dieses ähnliche wie bei Wordpress von anderen Anwendern verwendet werden kann die, nicht so technisch versiert sind. Der Editor sollte einfach zu erweitern und zu verändern sein. Ebenso sollte ein Workflow für die Freigabe mit der entsprechenden Nachverfolgung bei Änderungen geben sein. Das Ganze wie gesagt für Nicht-technisch versierte Personen.

Liste zum Durcharbeiten von aktiven Open source Projekten:

• Publii.exe -> Offline Editor für MacOs, Windows, Linux
• https://vrite.io  -> Web: WYSIWYG editor with built-in Markdown and keyboard shortcuts
• https://keystatic.com  -> Web: Live edit content on GitHub or your local file system

Erste Änderung am Theme  

Beim Testen des Themes ist mir aufgefallen, dass einige Konfigurationen gefehlt hatten für die jeweilige Sprache. Da die Sourcen bei github zur Einsicht vorligen konnte dies auch angepasst werden. Was nicht funktioniert hat ist die Speicherung der Auswahl der Sprache im Browser auf der Website. Beim nächsten Mal laden wird die definierte Standardsprache verwendet. Letztlich kann sich der Anwender merken und ein Bookmark mit der jeweiligen Sprache setzten. Wäre aber schön, wenn dies funktionieren würde.

Ein erster Prototype ware schnell erstellt. Nach einigen Tests und dem bisher unbekannten CMS konnte in Abstimmung mit dem Entwickler vom Theme ein funktionierendes JavaScript File erstellt werden.

Das war ein erstes Fazit.

Update 9 / 2024  

Für eine Anpassung des Footers wollte ich nur einfach mal schnell einen Link einfügen. Normalerweise wäre dies in Wordpress oder anderen System per Widget möglich. Per Html dann einfach nur ein a tag mit dem jeweiligen Link.

Auf Grund der internen Logik von Hugo / Hinode für aliase wird wenn notwendig ein refresh der Seite durchgeführt. Dadurch wird ein einfacher a href link nicht 1:1 erstellt.

1

<meta http-equiv="refresh" content="0; url=https://domain.xyz/some-post/">

Erstellung des Link erfolgt durch partial “assets/link.html”:

1
2
3
4

/*
{{- $privacyPolicyURL = partial "assets/link.html" (dict "destination" .Site.Params.main.privacyPolicyURL "text" $privacyPolicyText "page" .Page) -}}
{{ $privacyPolicyURL | safeHTML }}
*/

Angepasster Footer mit “Zurück zum Anfang” Button-Link

• layouts/partials/footer/footer.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<footer class="container-fluid footer p-3">
    <div class="container-xxl">
        <div class="row d-flex justify-content-end">
            <div class="col-auto" id="Copyright">
                <p class="text-muted">
                    {{- $copyright := printf "%s © %s %s %s." (T "copyright") (dateFormat "2006" now) .Site.Title (T "rights") }}
                    {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
                    {{ .Site.Params.footer.license | safeHTML }}
                    {{ if .Site.Params.main.endorse }}
                        {{ $link := partial "assets/link.html" (dict "destination" (index site.Params.links "hinode") "text" "Hinode" "class" "link-bg-footer" "page" .Page) }}
                        {{ T "poweredBy" $link | safeHTML }}
                    {{ end }}
                    {{- $privacyPolicyText := "" -}}
                    {{- $privacyPolicyText = T "privacyPolicy" | safeHTML -}}
                    {{ if and .Site.Params.main.showFooterPrivacy (ne $privacyPolicyText "") }}
                        <span id="privacy">
                            {{- $privacyPolicyText := "" -}}
                            {{- $privacyPolicyText = T "privacyPolicy" | safeHTML -}}
                            {{- $privacyPolicyURL := "" -}}
                            {{- $privacyPolicyURL = partial "assets/link.html" (dict "destination" .Site.Params.main.privacyPolicyURL "text" $privacyPolicyText "page" .Page) -}}
                            {{ $privacyPolicyURL | safeHTML }}
                        </span>
                    {{ end }}
                </p>
            </div>
            {{ if .Site.Params.main.showBackToTop }}
                <div class="col-auto float-right" id="backToTop">
                    <div class="d-inline-flex">
                        <button type="button" class="btn btn-link" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ T "backToTop" | safeHTML }}" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
                            </svg>
                        </button>
                    </div>
                </div>
            {{ end }}
        </div>
    </div>
</footer>

Code Verwendung  

Dadurch das es keinen vollständigen Frontend Editor gibt musste ich immer wieder in der Hinode Dokumentation nachschauen wie die jeweiligen Komponenten verwendet werden. Ebenso muss bei der Programmierung an einigen Stellen ein umdenken stattfinden von Serverseitigen / SPA Programmierung hin zu einer reinen statischen HTML Seite.