v2.6.2 (Lyra): Thema editor, content editor, unified scanEditorFiles
- Thema editor (thema's net zo bewerkbaar maken als plugins): bestandsbrowser zijbalk, nieuw bestand, uploaden, verwijderen, verplaatsen, SCSS compileren vanuit editor, thema activeren/ verwijderen, nieuw thema met basis-kopie, uniforme thema-structuur - Content editor (content consistent met plugins en thema's): bestandsbrowser zijbalk naast bestaande lijst weergave, nieuw bestand/map, uploaden, verwijderen, verplaatsen, mappen beheer, layout/plugins selectie, git/backup integratie in editor zijbalk - Uniformiteit: scanEditorFiles() unified scanner (scanPluginFiles/scanThemeFiles/scanContentFiles als dunne wrappers) - Media invoegen in editor: ?theme= scope voor media-list endpoint - Bug fix: thema-naam niet overgenomen bij kopiëren - title in theme.json wordt overschreven met nieuwe themanaam - Handleidingen bijgewerkt (thema-beheer.md + content-beheer.md NL/EN) - Release notes: docs/release-notes/v2.6.2.md - Pentest 30/30, WCAG 25/25
This commit is contained in:
@@ -3,15 +3,72 @@
|
||||
## Managing themes
|
||||
|
||||
1. Go to **Theme** in the admin menu
|
||||
2. **Activate** — Choose the active theme (stored in `config.json`)
|
||||
3. **Compile SCSS** — Process SCSS to CSS (forced)
|
||||
4. **New theme** — Create a custom theme via admin or manually
|
||||
2. **Edit** — Click the pencil icon to edit theme files (see [Theme editor](#theme-editor))
|
||||
3. **Activate** — Click the checkmark to activate a theme (stored in `config.json`)
|
||||
4. **Compile SCSS** — Click the palette icon to force-compile SCSS to `assets/css_compiled/theme.css`
|
||||
5. **Delete** — Trash icon (only non-active, non-default themes)
|
||||
6. **New theme** — Create a custom theme, optionally based on an existing theme
|
||||
|
||||
## Theme status badges
|
||||
|
||||
In the theme overview you see per theme:
|
||||
- **Active** (green) — this theme is selected in `config.json`
|
||||
- **SCSS ok** (green) — `assets/css_compiled/theme.css` is newer than `assets/scss/theme.scss`
|
||||
- **SCSS stale** (yellow) — SCSS source was changed after the last compile; click the palette icon to compile
|
||||
|
||||
## Theme editor
|
||||
|
||||
Via **Edit** (pencil icon) in the theme overview you open the theme editor (`/admin/theme-edit?theme=<name>`). It works the same as the plugin editor:
|
||||
|
||||
### File browser sidebar
|
||||
- Shows the nested file tree of the theme
|
||||
- `assets/css_compiled/` is hidden (runtime artefact, read-only)
|
||||
- Click a file to open it in the CodeMirror editor
|
||||
- Folders containing the active file are auto-expanded
|
||||
|
||||
### Editable file types
|
||||
`.twig`, `.json`, `.scss`, `.css`, `.js`, `.html`, `.md`, `.php`
|
||||
|
||||
### Create a new file
|
||||
- Click **New file**
|
||||
- Enter a path within the theme (e.g. `partials/header.twig` or `assets/scss/_variables.scss`)
|
||||
- Subfolders are created automatically
|
||||
- Allowed: twig, json, scss, css, js, html, md, php
|
||||
- A stub is auto-generated (e.g. `{% extends 'base.twig' %}` for `.twig`)
|
||||
|
||||
### Upload a file
|
||||
- Click **Upload** to upload files to the theme's `assets/`
|
||||
- Allowed: images, video, audio, PDF, ZIP, CSS, SCSS, JS, JSON, HTML, MD, TWIG, fonts
|
||||
- Path-traversal protection: target dir must stay within `assets/`
|
||||
|
||||
### Move / delete a file
|
||||
- In the file tree each file has a move button (arrows icon) and a delete button (trash)
|
||||
- **Move**: choose a target folder from the dropdown listing all folders in the theme
|
||||
- **Delete**: with confirmation; `theme.json` cannot be deleted
|
||||
|
||||
### Compile SCSS from the editor
|
||||
- At the top of the editor there is a **Compile SCSS** button (only if `assets/scss/theme.scss` exists)
|
||||
- Shows the compile status: **up-to-date** (green) or **stale** (yellow)
|
||||
- Forces compilation via `ThemeManager::compileCss(true)`
|
||||
|
||||
### Insert media in the editor
|
||||
- The media button in the editor toolbar opens the media modal
|
||||
- In theme context it scans `themes/<name>/assets/` (via `/admin/media-list?theme=<name>`)
|
||||
- Snippet format depends on file type: markdown → ``, html/php → `<img src=...>`, others → raw URL
|
||||
|
||||
### Security
|
||||
- All actions require a CSRF token
|
||||
- Path-traversal protection via `realpath()` + prefix check on the theme dir
|
||||
- `theme.json` can be edited but not deleted/moved
|
||||
- Default theme can be edited but not deleted
|
||||
- Active theme cannot be deleted (activate another theme first)
|
||||
|
||||
## Theme structure
|
||||
|
||||
```
|
||||
themes/default/
|
||||
├── theme.json # { title, config.default_template, template: layout→.twig }
|
||||
├── README.md # Theme documentation (per theme)
|
||||
├── base.twig # Main layout (head, header, nav, breadcrumb, footer)
|
||||
├── full_content.twig # Layout: full width
|
||||
├── left_sidebar.twig # Layout: sidebar on the left
|
||||
@@ -21,13 +78,15 @@ themes/default/
|
||||
├── partials/ # header.twig, navigation.twig, footer.twig
|
||||
└── assets/
|
||||
├── scss/theme.scss # SCSS source (only CSS source — manual css/theme.css must not exist)
|
||||
├── css_compiled/ # Generated by scssphp (read-only, do not edit manually)
|
||||
├── css_compiled/ # Generated by scssphp (read-only, do not edit manually, hidden in editor)
|
||||
├── css/ # External 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
|
||||
```
|
||||
|
||||
New themes created via admin automatically get this uniform structure (with `README.md`, `base.twig`, `full_content.twig`, `partials/header.twig`, `partials/footer.twig`, `assets/scss/theme.scss`, and all assets subfolders).
|
||||
|
||||
## theme.json
|
||||
|
||||
```json
|
||||
@@ -53,9 +112,9 @@ themes/default/
|
||||
## SCSS compilation
|
||||
|
||||
- `ThemeManager` compiles `assets/scss/theme.scss` at runtime to `assets/css_compiled/theme.css` via scssphp
|
||||
- `css_compiled/` is **read-only** — do not edit manually
|
||||
- `css_compiled/` is **read-only** — do not edit manually (hidden in the theme editor)
|
||||
- `assets/css/theme.css` must **not** exist; otherwise `ThemeManager::getCssUrl()` ignores the SCSS
|
||||
- After SCSS changes: remove `assets/css_compiled/theme.css` and `.mtime` to force recompilation
|
||||
- Force compilation via the **Compile SCSS** button in admin (or remove `assets/css_compiled/theme.css` and `.mtime`)
|
||||
|
||||
## Layouts
|
||||
|
||||
|
||||
Reference in New Issue
Block a user