CodePress/guide/nl/admin-beheerder/thema-beheer.md

Thema beheer

Thema's beheren

1. Ga naar Thema in admin menu
2. Bewerken — Klik op het potlood-icoon om themabestanden te bewerken (zie Thema editor)
3. Activeren — Klik op het vinkje om een thema te activeren (wordt opgeslagen in config.json)
4. SCSS compileren — Klik op het palet-icoon om SCSS geforceerd te compileren naar assets/css_compiled/theme.css
5. Verwijderen — Prullenbak-icoon (alleen niet-actieve, niet-default thema's)
6. Nieuw thema — Eigen thema aanmaken, optioneel gebaseerd op een bestaand thema

Thema status badges

In het thema-overzicht zie je per thema:

• Actief (groen) — dit thema is geselecteerd in config.json
• SCSS ok (groen) — assets/css_compiled/theme.css is nieuwer dan assets/scss/theme.scss
• SCSS verouderd (geel) — SCSS source is gewijzigd na laatste compile; klik op het palet-icoon om te compileren

Thema editor

Via Bewerken (potlood-icoon) in het thema-overzicht open je de thema-editor (/admin/theme-edit?theme=<naam>). Deze werkt hetzelfde als de plugin-editor:

Bestandsbrowser zijbalk

• Toont de geneste bestandsboom van het thema
• assets/css_compiled/ wordt verborgen (runtime artefact, read-only)
• Klik op een bestand om het te openen in de CodeMirror editor
• Mappen die het actieve bestand bevatten zijn automatisch uitgeklapt

Bewerkbare bestandstypen

.twig, .json, .scss, .css, .js, .html, .md, .php

Nieuw bestand aanmaken

• Klik op Nieuw bestand
• Geef een pad op binnen het thema (bijv. partials/header.twig of assets/scss/_variables.scss)
• Submappen worden automatisch aangemaakt
• Toegestaan: twig, json, scss, css, js, html, md, php
• Een stub wordt automatisch gegenereerd (bijv. {% extends 'base.twig' %} voor .twig)

Bestand uploaden

• Klik op Upload om bestanden naar assets/ van het thema te uploaden
• Toegestaan: afbeeldingen, video, audio, PDF, ZIP, CSS, SCSS, JS, JSON, HTML, MD, TWIG, fonts
• Path-traversal bescherming: doelmap moet binnen assets/ blijven

Bestand verplaatsen / verwijderen

• In de bestandsboom heeft elk bestand een verplaats-knop (pijlen-icoon) en een verwijder-knop (prullenbak)
• Verplaatsen: kies een doelmap uit de dropdown met alle mappen in het thema
• Verwijderen: met bevestiging; theme.json kan niet verwijderd worden

SCSS compileren vanuit de editor

• Bovenaan de editor staat een SCSS compileren knop (alleen als assets/scss/theme.scss bestaat)
• Toont de compile-status: up-to-date (groen) of verouderd (geel)
• Forceert compilatie via ThemeManager::compileCss(true)

Media invoegen in editor

• De media-knop in de editor-toolbar opent de media-modal
• In thema-context scant deze themes/<naam>/assets/ (via /admin/media-list?theme=<naam>)
• Snippet-formaat depends op bestandstype: markdown → ![alt](url), html/php → <img src=...>, andere → ruwe URL

Beveiliging

• Alle acties vereisen CSRF token
• Path-traversal bescherming via realpath() + prefix-check op de thema-map
• theme.json kan bewerkt maar niet verwijderd/verplaatst worden
• Default thema kan bewerkt maar niet verwijderd worden
• Actief thema kan niet verwijderd worden (activeer eerst een ander thema)

Thema structuur

themes/default/
├── theme.json              # { title, config.default_template, template: layout→.twig }
├── README.md               # Thema documentatie (per thema)
├── base.twig               # Hoofd layout (head, header, nav, breadcrumb, footer)
├── full_content.twig       # Layout: volledige breedte
├── left_sidebar.twig       # Layout: sidebar links
├── right_sidebar.twig      # Layout: sidebar rechts
├── custom1.twig            # Layout: custom
├── guide.twig              # Layout: handleiding met sidebar (Navigation plugin)
├── partials/               # header.twig, navigation.twig, footer.twig
└── assets/
    ├── scss/theme.scss     # SCSS bron (enige CSS bron — handmatige css/theme.css mag niet bestaan)
    ├── css_compiled/       # Gegenereerd door scssphp (read-only, niet handmatig aanpassen, verborgen in editor)
    ├── css/                # Externe CSS (bootstrap.min.css, bootstrap-icons.css, mobile.css)
    ├── js/                 # app.js, bootstrap.bundle.min.js
    ├── fonts/              # bootstrap-icons.woff, woff2
    └── img/                # favicon, icon, world-map

Nieuwe thema's die via de admin worden aangemaakt krijgen automatisch deze uniforme structuur (met README.md, base.twig, full_content.twig, partials/header.twig, partials/footer.twig, assets/scss/theme.scss, en alle assets-submappen).

theme.json

{
    "title": "default",
    "config": {
        "default_template": "full_content"
    },
    "template": {
        "full_content": "full_content.twig",
        "left_sidebar": "left_sidebar.twig",
        "right_sidebar": "right_sidebar.twig",
        "custom1": "custom1.twig",
        "guide": "guide.twig"
    }
}

• title — Weergavenaam in admin
• config.default_template — Standaard layout voor pagina's zonder layout: frontmatter
• template — Mapping van layout naam naar .twig bestand

SCSS compilatie

• ThemeManager compileert assets/scss/theme.scss runtime naar assets/css_compiled/theme.css via scssphp
• css_compiled/ is read-only — niet handmatig aanpassen (wordt verborgen in de thema-editor)
• assets/css/theme.css mag niet bestaan; anders negeert ThemeManager::getCssUrl() de SCSS
• Forceer compilatie via de SCSS compileren knop in admin (of verwijder assets/css_compiled/theme.css en .mtime)

Layouts

Layouts worden gekozen via frontmatter layout: key in content bestanden. Onbekende layouts vallen terug op config.default_template uit theme.json.

guide.twig

Speciale layout voor handleidingen. Injecteert de Navigation plugin in de sidebar voor zijbalk navigatie. Wordt automatisch gebruikt voor pagina's in de guide/ map.