Update all guides (NL + EN) for CodePress 2.5.2 features
- Admin guide: RBAC roles, role-based dashboard, plugin types (content/system) - CodePress developer guide: plugin types, admin plugin API, SCSS compilation, asset serving - Theme developer guide: SCSS sole CSS source, css_compiled read-only, guide layout - Content manager guide: layout selection from theme.json, plugin order in frontmatter - Both NL and EN updated with identical structure - 35 files updated
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
# Layouts
|
||||
|
||||
Layouts definiëren de pagina structuur (sidebar links, volledige breedte, etc.). Layouts worden gedefinieerd in `theme.json` en gekozen via frontmatter in content bestanden.
|
||||
|
||||
## Layout kiezen in content
|
||||
|
||||
```markdown
|
||||
@@ -14,14 +16,58 @@ Content...
|
||||
|
||||
## Layouts in theme.json
|
||||
|
||||
Layouts worden gedefinieerd in de `template` mapping. De `config.default_template` is de fallback voor pagina's zonder `layout:` frontmatter of met een onbekende layout:
|
||||
|
||||
```json
|
||||
{
|
||||
"default_layout": "full_content",
|
||||
"layouts": {
|
||||
"full_content": "full_content.twig",
|
||||
"left_sidebar": "left_sidebar.twig",
|
||||
"right_sidebar": "right_sidebar.twig",
|
||||
"custom1": "custom1.twig"
|
||||
}
|
||||
"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"
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
## Layout template
|
||||
|
||||
Een layout template extends `base.twig` en vult het `content` block:
|
||||
|
||||
```twig
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
## Layouts met sidebar
|
||||
|
||||
Layouts met sidebar kunnen plugin content tonen:
|
||||
|
||||
```twig
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<main class="col-md-8">
|
||||
{{ content|raw }}
|
||||
</main>
|
||||
<aside class="col-md-4">
|
||||
{{ sidebar_content|raw }}
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
Als een pagina geen plugins heeft of de layout geen sidebar bevat, is `sidebar_content` leeg.
|
||||
|
||||
## Guide layout
|
||||
|
||||
De `guide` layout (`guide.twig`) is speciaal voor handleidingen. Het injecteert de Navigation plugin in de sidebar voor zijbalk navigatie. Wordt automatisch gebruikt voor pagina's in de `guide/` map.
|
||||
@@ -2,20 +2,49 @@
|
||||
|
||||
```
|
||||
themes/mijn-thema/
|
||||
├── theme.json # Thema configuratie
|
||||
├── base.twig # Hoofd layout
|
||||
├── full_content.twig # Layout: full-width
|
||||
├── theme.json # { title, config.default_template, template: layout→.twig }
|
||||
├── 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
|
||||
├── custom.twig # Layout: custom
|
||||
├── 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
|
||||
├── css/ # CSS bestanden
|
||||
├── js/theme.js # JavaScript
|
||||
├── fonts/ # Lettertypes
|
||||
└── img/ # Afbeeldingen
|
||||
├── scss/theme.scss # SCSS bron (de enige CSS bron)
|
||||
├── css_compiled/ # Gegenereerd door scssphp (read-only, niet handmatig aanpassen)
|
||||
├── 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
|
||||
```
|
||||
|
||||
## SCSS is de enige CSS bron
|
||||
|
||||
- **ALTIJD** `assets/scss/theme.scss` aanpassen — dit is de enige CSS bron
|
||||
- `ThemeManager` compileert SCSS runtime naar `assets/css_compiled/theme.css` via scssphp
|
||||
- `assets/css_compiled/` is **read-only** — niet handmatig aanpassen
|
||||
- **NOOIT** `assets/css/theme.css` handmatig aanmaken of aanpassen; dit bestand mag niet bestaan
|
||||
- `ThemeManager::getCssUrl()` prioriteit: 1) `assets/css/theme.css` (handmatig), 2) `assets/css_compiled/theme.css` (gecompileerd). Als `theme.css` bestaat, wordt de SCSS negeren.
|
||||
- Na SCSS wijzigingen: verwijder `assets/css_compiled/theme.css` en `.mtime` om te forceren
|
||||
|
||||
```bash
|
||||
rm themes/mijn-thema/assets/css_compiled/theme.css themes/mijn-thema/assets/css_compiled/.mtime
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
## Plugin CSS laden
|
||||
|
||||
Plugin CSS wordt automatisch geladen ná theme CSS in `base.twig`, zodat thema's plugin styling kunnen overschrijven:
|
||||
|
||||
```twig
|
||||
{% for cssUrl in plugin_css_urls|default([]) %}
|
||||
<link href="{{ cssUrl }}" rel="stylesheet">
|
||||
{% endfor %}
|
||||
```
|
||||
@@ -2,20 +2,45 @@
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "Mijn Thema",
|
||||
"default_layout": "full_content",
|
||||
"header_color": "#0a369d",
|
||||
"layouts": {
|
||||
"full_content": "full_content.twig",
|
||||
"left_sidebar": "left_sidebar.twig",
|
||||
"right_sidebar": "right_sidebar.twig"
|
||||
}
|
||||
"title": "Mijn Thema",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Velden
|
||||
|
||||
- `title` - Weergavenaam in admin
|
||||
- `default_layout` - Standaard layout voor nieuwe pagina's
|
||||
- `header_color` - Kleur admin sidebar
|
||||
- `layouts` - Mapping van layout namen naar .twig bestanden
|
||||
- `title` — Weergavenaam in admin
|
||||
- `config.default_template` — Standaard layout voor pagina's zonder `layout:` frontmatter (fallback bij onbekende layouts)
|
||||
- `template` — Mapping van layout naam naar `.twig` bestand
|
||||
|
||||
## Template mapping
|
||||
|
||||
De `template` mapping definieert welke layouts beschikbaar zijn. Elke key is een layout naam, elke value is het `.twig` bestand:
|
||||
|
||||
| Layout naam | Twig bestand | Beschrijving |
|
||||
|-------------|--------------|--------------|
|
||||
| `full_content` | `full_content.twig` | Volledige breedte, geen sidebar |
|
||||
| `left_sidebar` | `left_sidebar.twig` | Sidebar links |
|
||||
| `right_sidebar` | `right_sidebar.twig` | Sidebar rechts |
|
||||
| `custom1` | `custom1.twig` | Custom layout |
|
||||
| `guide` | `guide.twig` | Handleiding met sidebar (Navigation plugin) |
|
||||
|
||||
## Layout keuze
|
||||
|
||||
- Layouts worden gekozen via frontmatter `layout:` key in content bestanden
|
||||
- Onbekende layouts vallen terug op `config.default_template`
|
||||
- `ThemeManager::getTemplates()` geeft de template mapping terug
|
||||
- `ThemeManager::getConfig()` geeft de config sectie terug (inclusief `default_template`)
|
||||
|
||||
## Guide layout
|
||||
|
||||
De `guide` layout is speciaal voor handleidingen. `getGuidePage()` in `CodePressCMS.php` injecteert automatisch de Navigation plugin in de metadata voor zijbalk navigatie.
|
||||
Reference in New Issue
Block a user