multi lang mit hugo

This commit is contained in:
2026-02-28 21:44:43 +00:00
parent eb9b30bfb5
commit 1ab276fdfd
13 changed files with 591 additions and 276 deletions

113
static/script.js Normal file
View File

@@ -0,0 +1,113 @@
/* ==========================================
NAVIGATION & MOBILE MENU
========================================== */
function toggleHamburger() {
const navLinks = document.getElementById('navLinks');
const hamburger = document.querySelector('.hamburger');
navLinks.classList.toggle('mobile-open');
hamburger.classList.toggle('active');
}
/* ==========================================
THEME SWITCHER LOGIC
========================================== */
const themeBtn = document.getElementById('themeBtn');
const themeDropdown = document.getElementById('themeDropdown');
const themeButtons = document.querySelectorAll('.theme-dropdown button');
const htmlEl = document.documentElement;
// Dropdown öffnen/schließen
if (themeBtn) {
themeBtn.addEventListener('click', (e) => {
e.stopPropagation();
themeDropdown.classList.toggle('show');
// Schließe andere Dropdowns
if (langDropdown) langDropdown.classList.remove('show');
});
}
// Theme auswählen
themeButtons.forEach(btn => {
btn.addEventListener('click', () => {
const theme = btn.getAttribute('data-theme');
applyTheme(theme);
themeDropdown.classList.remove('show');
});
});
// Theme anwenden
function applyTheme(theme) {
if (theme === 'auto') {
localStorage.removeItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
themeBtn.innerHTML = '🌓';
} else {
htmlEl.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
}
}
// Initialisierung beim Laden
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'auto';
applyTheme(savedTheme);
});
// Klick außerhalb schließt alle Dropdowns
window.addEventListener('click', () => {
if (themeDropdown) themeDropdown.classList.remove('show');
if (langDropdown) langDropdown.classList.remove('show');
});
// Mobile Menü schließen bei Klick auf Link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
document.getElementById('navLinks').classList.remove('mobile-open');
const hamburger = document.querySelector('.hamburger');
if (hamburger) hamburger.classList.remove('active');
});
});
/* ==========================================
LANGUAGE SWITCHER LOGIC
========================================== */
const langBtn = document.getElementById('langBtn');
const langDropdown = document.getElementById('langDropdown');
if (langBtn) {
langBtn.addEventListener('click', (e) => {
e.stopPropagation();
langDropdown.classList.toggle('show');
// Schließe andere Dropdowns
if (themeDropdown) themeDropdown.classList.remove('show');
});
}
// Sprachwechsel Logik (Repariert für alle Sprachen)
if (langDropdown) {
langDropdown.querySelectorAll('a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault(); // Verhindert das sofortige Neuladen
const selectedLang = link.getAttribute('data-lang');
const currentPath = window.location.pathname; // z.B. /de/projects/
// RegEx um den aktuellen Sprachcode (/de/, /en/, /fr/, etc.) am Anfang zu finden
// und durch die neue Sprache zu ersetzen.
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
// Falls man auf der Hauptseite ist (/), oder RegEx nicht matcht
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
newPath = '/' + selectedLang + '/';
}
// Sicherstellen, dass keine Doppel-Slashes entstehen
newPath = newPath.replace(/\/+/g, '/');
window.location.href = newPath;
});
});
}