141 lines
7.3 KiB
Markdown
141 lines
7.3 KiB
Markdown
# 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](#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, met een klikbare **thema** root bovenaan
|
|
- `assets/css_compiled/` wordt verborgen (runtime artefact, read-only)
|
|
- Klik op een bestand om het te openen in de CodeMirror editor
|
|
- Klik op een map om het **map detail paneel** rechts te openen (nieuw bestand, nieuwe map, uploaden, verwijderen)
|
|
- Mappen die het actieve bestand bevatten zijn automatisch uitgeklapt
|
|
- Per map staan actie-knoppen: nieuw bestand, nieuwe map — opereren op de geselecteerde map
|
|
- Per bestand staan actie-knoppen: hernoemen/verplaatsen (potlood), verwijderen (prullenbak) — verschijnen bij hover
|
|
|
|
### Bestanden verslepen (drag-and-drop)
|
|
- Sleep een bestand of map naar een andere map om het te verplaatsen
|
|
- Tijdens het slepen worden geldige doel-mappen highlight getoond
|
|
- De verplaatsing gebeurt via een AJAX-call — de pagina herlaadt automatisch na succes
|
|
- `theme.json` kan niet verplaatst worden
|
|
|
|
### Bewerkbare bestandstypen
|
|
`.twig`, `.json`, `.scss`, `.css`, `.js`, `.html`, `.md`, `.php`
|
|
|
|
### Nieuw bestand / nieuwe map aanmaken
|
|
- Selecteer de doelmap in de zijbalk (klik op de mapnaam), of gebruik de root
|
|
- Klik op **Nieuw bestand** of **Nieuwe map** (in het map-detail paneel of bovenaan)
|
|
- Bij 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
|
|
- **Verplaatsen**: sleep het bestand naar een andere map (drag-and-drop), of klik op het potlood-icoon naast het bestand om naar het verplaats-formulier te gaan
|
|
- **Verwijderen**: klik op de prullenbak-knop naast het bestand in de zijbalk, met bevestiging; `theme.json` kan niet verwijderd worden
|
|
|
|
### Mappen beheer
|
|
- Klik op een map in de zijbalk om het **map-detail paneel** rechts te openen
|
|
- **Nieuw bestand / Nieuwe map / Uploaden in deze map**: gebruik de knoppen in het map-detail paneel
|
|
- **Map verwijderen**: verwijder-knop in het map-detail paneel (alleen lege mappen)
|
|
- De thema-root is ook selecteerbaar (klik op de thema-naam bovenaan de boom)
|
|
|
|
### 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
|
|
- Media wordt getoond als een collapsible **bestandsboom** (folders inklappen/uitklappen), gelijk aan de content/plugin/theme editors
|
|
- In thema-context scant deze `themes/<naam>/assets/` (via `/admin/media-list?theme=<naam>`)
|
|
- Snippet-formaat depends op bestandstype: markdown → ``, 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
|
|
|
|
```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. |