Fazit zum Arbeiten mit Hugo CMS
Veröffentlicht am 29. Juli 2024 (Zuletzt verändert am 10. August 2024) • 4 Min. Lesezeit • 653 WörterErstes Fazit nach einigen Blogartikel mit Hugo CMS (Hinode Theme)
Neustart mit Hugo CMS des BlogsDie 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 CMS und Hinode Docs erklärt. Leider auch vieles historisch oder Hinode verwendet Einrichtungen anders als Hugo CMS. 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 CMS Variablen ist ein wenig gewöhnungsbedürftig.
Hier ein Beispiel der erstellen JavaScript Datei zum Laden und Speichern der ausgewählten Sprache. Dies wurde bisher noch nicht vom Hinode CMS unterstützt.
/* eslint-disable */
{{- if site.Params.main.enableLanguageSelectionStorage -}}
(() => {
'use strict'
// Function to get the selected language from localStorage
function getLanguage () {
return localStorage.getItem('selectedLanguage')
}
// Function to set the selected language in localStorage
function setLanguage (language) {
localStorage.setItem('selectedLanguage', language)
}
// Function to apply the selected language to the website
function applyLanguage (language, href) {
if (document.documentElement.lang !== language) {
if (href) {
if (window.location.pathname !== href) {
window.location.href = href
}
} else {
window.location.href = '/' + language + '/'
}
}
}
// Event listener for language selection
document.addEventListener('DOMContentLoaded', () => {
const storedLanguage = getLanguage()
const languageItems = document.querySelectorAll('#language-selector .dropdown-item')
if (languageItems.length > 0) {
// Redirect if the stored language differs from the active language
if ((storedLanguage) && (document.documentElement.lang !== storedLanguage)) {
languageItems.forEach(item => {
if (item.getAttribute('hreflang') === storedLanguage) {
applyLanguage(storedLanguage, item.getAttribute('href'))
}
})
}
// Update the stored language when the user selects a new one
languageItems.forEach(item => {
item.addEventListener('click', () => {
const selectedLanguage = item.getAttribute('hreflang')
if (selectedLanguage) {
setLanguage(selectedLanguage)
}
})
})
}
else {
// Redirect to the localized homepage
const defaultLang = '{{ site.LanguageCode | default site.Language.Lang }}'
let language = storedLanguage ? storedLanguage : defaultLang
window.location.href = '/' + language + '/'
}
})
})()
{{- end -}}
/* eslint-enable */
(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
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:
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. Weitere folgen…