Wie erstelle ich eine benutzerdefinierte URL in einem One-Pager? ⇐ Php

[Guest]

Ich entwickle eine Website mit Kirby CMS und die Kommission verlangt, dass die Website ein One-Pager bleibt.
Ich verwende die folgende Struktur, in der jeder Artikel erstellt werden kann Bedienfeld und individuell anpassbar (Text, Stil, Bilder usw.)

Code: Select all

slug() ?>">








style() ?>">









[img]" alt="">

Die Funktionsweise besteht darin, dass bei jedem Klick auf einen Artikel der Hauptinhalt sichtbar wird, was mit dem folgenden Code ausgeführt wird:

Code: Select all

function toggleSibling(element) {
const content = element.nextElementSibling;

// Close all other active content elements
const allContent = document.querySelectorAll('.content.active');
allContent.forEach(openContent => {
if (openContent !== content) {
openContent.classList.remove('active');
Array.from(openContent.children).forEach(child => {
child.style.transform = "";
child.style.opacity = "";
child.style.transition = "";
});
}
});

// Toggle the active class on sibling content
content.classList.toggle('active');

if (content.classList.contains('active')) {
// Add the falling animation
content.classList.add('fall');
setTimeout(() => {
content.classList.remove('fall');
console.log("Falling animation removed from:", content); // Debugging animation reset
}, 500);
} else {
// Reset styles if content is closed
content.classList.remove('active');
Array.from(content.children).forEach(child => {
child.style.transform = "";
child.style.opacity = "";
child.style.transition = "";
});
}
}

Was ich zu implementieren versuche, ist eine Möglichkeit, benutzerdefinierte URLs für jeden Artikel zu verwenden. Wenn ein Benutzer auf diese URL zugreift, gelangt er zum Artikel und schaltet den Inhalt um.
Die Seite sollte ein One-Pager bleiben.
Vielen Dank Ihnen für die Hilfe im Voraus!