Dieses Projekt verwendet Express mit EJS als Template-Engine. Seiten bestehen aus modularen Templates, einem zugehörigen PageLoader und optionalem CSS.

Jede Seite besteht aus:

• PageName.ejs – Das Template der Seite
• PageName.js – Lädt Daten, die an das Template übergeben werden
• PageName.css – (Optional) CSS-Datei für diese Seite

Optional können Komponenten aus dem components/-Verzeichnis eingebunden werden (z. Bsp. Buttons, Cards etc.).

Speichere das Template unter:

frontend/pages/PageName/PageName.ejs

Beispiel (ContactPage.ejs):

<div id="contactPage-content">
    <h1><%= title %></h1>
    <p><%= message %></p>
</div>

Erstelle die zugehörige Datenladefunktion:

frontend/pages/PageName/PageName.js

Beispiel (ContactPage.js):

export default async function ContactPageLoader(req, res) {
    return {
        title: "Kontakt",
        message: "Nimm gerne Kontakt mit uns auf!",
    }
}

Speichere optionales Seiten-CSS im selben Verzeichnis:

frontend/pages/PageName/PageName.css

Beispiel:

#contactPage-content {
    padding: 2rem;
    color: #333;
}

Diese Datei wird automatisch per <link>-Tag in das Layout eingebunden.

In frontend/index.js fügst du die Route so ein:

import ContactPageLoader from "./pages/contact/ContactPage.js"

router.get("/contact", async (req, res) => {
    const pageData = await ContactPageLoader(req, res)
    const pagePath = "pages/contact/ContactPage"

    renderPage(res, pagePath, pageData, {
        excludeNavbar: false,
        excludeFooter: false,
    })
})

Im Verzeichnis frontend/components/ können kleinere UI-Komponenten erstellt werden:

frontend/components/Button.ejs
frontend/components/ProductCard.ejs

Verwendung in Templates:

<%- include("../../components/Button", { label: "Jetzt kaufen" }) %>

Damit die CSS-Datei der verwendeten Komponente automatisch in die Seite eingebunden wird, musst du im jeweiligen PageLoader-Modul die Komponente(n) im components-Array angeben.

export default async function WishlistPageLoader(req, res) {
    return {
        title: "WishlistPage",
        beispielComponents: [
            { title: "1. Element", text: "Das ist der Text des ersten Elements" },
            { title: "2. Element", text: "Das ist der Text des zweiten Elements" },
            { title: "3. Element", text: "Das ist der Text des dritten Elements" },
            { title: "4. Element", text: "Das ist der Text des vierten Elements" },
        ],
        components: ["BeispielComponent"], // Wichtig: CSS wird so automatisch eingebunden
    }
}

Das System bindet dann automatisch für jede Komponente die CSS-Datei /components//.css ein.

Beispiel (WishlistPageLoader):

Die Funktion renderPage() übernimmt:

• Übergabe der Page-Daten an das Layout index.ejs
• Dynamisches Einbinden des Seitentemplates via <%- include(...) %>
• Automatisches Setzen des korrekten CSS-Links

Beispielhafte Implementierung:

function renderPage(res, pagePath, pageData = {}, layoutOptions = {}) {
    const cssFile = path.basename(pagePath) + ".css"

    res.render("index", {
        ...layoutOptions,
        title: pageData.title || "Webshop",
        cssFile,
        pageTemplate: pagePath,
        pageData
    })
}

In der Datei frontend/index.ejs:

<main>
    <%- include(pageTemplate, pageData) %>
</main>

• Nutze excludeNavbar / excludeFooter bei Login/Register etc.
• Layout-Datei ist frontend/index.ejs
• Seiten befinden sich in frontend/pages/
• Es wird keine ejs-Bibliothek direkt verwendet – nur Express’ res.render()