v2.5.1: Admin theme refactor, Navigation plugin, user roles, guide restructure
- Reorganize admin into admin/theme/default/ (views + assets) - Rename GuideNav to Navigation plugin (essential, protected) - Plugin assets support (SCSS/CSS) loaded after theme CSS - User roles: Admin, Content Manager, BI Manager, Site Admin - Role-based access control (RBAC) for admin routes and sidebar - Guide restructure: sub-topics in separate folders with sidebar nav - Dynamic breadcrumb for homepage and subdirectories - Fix theme path traversal (../../ -> ../) in admin.php - Fix CodeMirror mode load order (xml -> css -> js -> htmlmixed -> php) - Fix editor-toolbar.js null checks for plugin edit pages - Layout select from theme.json with live frontmatter update - Footer sticky at bottom of viewport (min-height: 100vh) - Breadcrumb color fix (var(--nav-font) -> var(--header-bg)) - Remove language switcher from guide pages - Update README.md and README.en.md - Bump version to 2.5.1
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
# Admin Beheerder
|
||||
|
||||
De admin beheerder handleiding bevat de volgende onderwerpen:
|
||||
|
||||
- **Dashboard** - Overzicht van de website
|
||||
- **Content beheer** - Bestanden en pagina's beheren
|
||||
- **Configuratie** - Site instellingen
|
||||
- **Thema beheer** - Thema's beheren en aanmaken
|
||||
- **Beveiliging** - Bot bescherming en sessies
|
||||
- **Plugins** - Plugins beheren en aanmaken
|
||||
- **Gebruikers** - Gebruikers toevoegen en verwijderen
|
||||
- **Statistieken** - Bezoekersstatistieken bekijken
|
||||
- **Logs** - Logbestanden bekijken en filteren
|
||||
|
||||
Selecteer een onderwerp uit de navigatie aan de linkerkant.
|
||||
@@ -0,0 +1,12 @@
|
||||
# Beveiliging
|
||||
|
||||
## Bot bescherming
|
||||
|
||||
- **BotGuard** - Bot/AI detectie
|
||||
- **Rate limiting** - Requests per IP beperken
|
||||
- **Block/allowlist** - IPs blokkeren of toestaan
|
||||
|
||||
## Sessie instellingen
|
||||
|
||||
- **Sessie timeout** - Standaard 3600 seconden
|
||||
- **Max login pogingen** - Standaard 5 pogingen
|
||||
@@ -0,0 +1,9 @@
|
||||
# Configuratie
|
||||
|
||||
## Algemene instellingen
|
||||
|
||||
- **Site titel** - Naam van de website
|
||||
- **Standaard taal** - nl/en/de/fr
|
||||
- **Auteur** - Naam en e-mail
|
||||
- **Analytics** - Bezoekers tracking aan/uit
|
||||
- **Logging** - Logbestanden aan/uit
|
||||
@@ -0,0 +1,17 @@
|
||||
# Content beheer
|
||||
|
||||
## Bestanden beheren
|
||||
|
||||
- **Uploaden** - Media bestanden uploaden
|
||||
- **Nieuwe map** - Mappen structuur aanmaken
|
||||
- **Nieuw bestand** - Pagina aanmaken
|
||||
- **Bewerken** - Bestaande content wijzigen
|
||||
- **Hernoemen** - Bestandsnamen aanpassen
|
||||
- **Verplaatsen** - Content verplaatsen
|
||||
- **Verwijderen** - Content verwijderen
|
||||
|
||||
## Editor
|
||||
|
||||
- CodeMirror met syntax highlighting
|
||||
- Toolbar voor Markdown formatting
|
||||
- Sneltoetsen: Ctrl+S (opslaan), Ctrl+N (nieuw)
|
||||
@@ -0,0 +1,10 @@
|
||||
# Dashboard
|
||||
|
||||
Het dashboard toont een overzicht van:
|
||||
|
||||
- Weergaven (30 dagen)
|
||||
- Unieke bezoekers
|
||||
- Aantal pagina's en mappen
|
||||
- Actieve plugins
|
||||
- Recente activiteit
|
||||
- Snelle acties
|
||||
@@ -0,0 +1,13 @@
|
||||
# Gebruikers
|
||||
|
||||
## Gebruiker toevoegen
|
||||
|
||||
1. Ga naar **Gebruikers**
|
||||
2. Vul gebruikersnaam in
|
||||
3. Kies wachtwoord
|
||||
4. Klik **Toevoegen**
|
||||
|
||||
## Gebruiker verwijderen
|
||||
|
||||
- Kan niet voor eigen account
|
||||
- Bevestig met wachtwoord
|
||||
@@ -0,0 +1,12 @@
|
||||
# Logs
|
||||
|
||||
## Log types
|
||||
|
||||
- **Admin** - Admin acties
|
||||
- **Requests** - Website bezoeken
|
||||
|
||||
## Filteren
|
||||
|
||||
- Zoeken op IP, bericht
|
||||
- Filteren op level (info, warning, error)
|
||||
- Downloaden als bestand
|
||||
@@ -0,0 +1,15 @@
|
||||
# Plugins
|
||||
|
||||
## Plugins beheren
|
||||
|
||||
- **Activeren/Deactiveren** - Plugins aan/uit
|
||||
- **Bewerken** - Plugin code aanpassen
|
||||
- **Configuratie** - Plugin instellingen
|
||||
- **Verwijderen** - Plugin verwijderen
|
||||
|
||||
## Nieuwe plugin
|
||||
|
||||
1. Ga naar **Plugins** → **Nieuwe plugin**
|
||||
2. Geef naam op (bijv. `MijnPlugin`)
|
||||
3. Bewerk `plugin.php`
|
||||
4. Activeer de plugin
|
||||
@@ -0,0 +1,14 @@
|
||||
# Statistieken
|
||||
|
||||
## Overzicht
|
||||
|
||||
- Totaal aantal views
|
||||
- Unieke bezoekers
|
||||
- Landen met vlaggen
|
||||
- Top pagina's
|
||||
- Referrers
|
||||
|
||||
## Filters
|
||||
|
||||
- Periode: 7/30/90 dagen of alles
|
||||
- Export: CSV of JSON
|
||||
@@ -0,0 +1,19 @@
|
||||
# Thema beheer
|
||||
|
||||
## Thema's beheren
|
||||
|
||||
1. Ga naar **Thema** in admin menu
|
||||
2. **Activeren** - Kies actief thema
|
||||
3. **SCSS compileren** - Verwerk SCSS naar CSS
|
||||
4. **Nieuw thema** - Eigen thema aanmaken
|
||||
|
||||
## Thema structuur
|
||||
|
||||
```
|
||||
themes/default/
|
||||
├── theme.json # Thema configuratie
|
||||
├── base.twig # Hoofd layout
|
||||
├── full_content.twig # Layouts
|
||||
├── partials/ # Header, nav, footer
|
||||
└── assets/ # CSS, JS, afbeeldingen
|
||||
```
|
||||
@@ -0,0 +1,14 @@
|
||||
# CodePress Developer
|
||||
|
||||
De CodePress developer handleiding bevat de volgende onderwerpen:
|
||||
|
||||
- **Architectuur** - CMS architectuur en mappenstructuur
|
||||
- **Core classes** - CodePressCMS, ThemeManager, PluginManager
|
||||
- **Plugin development** - Plugins ontwikkelen
|
||||
- **Routing** - Frontend en admin routing
|
||||
- **Beveiliging** - XSS, CSRF, path traversal
|
||||
- **Testing** - Penetratie, accessibility en functionele tests
|
||||
- **Debugging** - Logging en cache
|
||||
- **Performance** - OPcache en SCSS caching
|
||||
|
||||
Selecteer een onderwerp uit de navigatie aan de linkerkant.
|
||||
@@ -0,0 +1,11 @@
|
||||
# CMS Architectuur
|
||||
|
||||
```
|
||||
codepress/
|
||||
├── cms/core/ # Core engine
|
||||
├── admin/ # Admin console
|
||||
├── themes/ # Thema's
|
||||
├── plugins/ # Plugins
|
||||
├── content/ # Content
|
||||
└── public/ # Web root
|
||||
```
|
||||
@@ -0,0 +1,34 @@
|
||||
# Beveiliging
|
||||
|
||||
## XSS preventie
|
||||
|
||||
```php
|
||||
// Altijd escapen
|
||||
echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');
|
||||
|
||||
// In Twig (automatisch)
|
||||
{{ userVariable }}
|
||||
```
|
||||
|
||||
## CSRF tokens
|
||||
|
||||
```php
|
||||
// Genereren
|
||||
$csrf = $auth->getCsrfToken();
|
||||
|
||||
// Verifiëren
|
||||
if (!$auth->verifyCsrf($_POST['csrf_token'])) {
|
||||
die('Ongeldige CSRF token');
|
||||
}
|
||||
```
|
||||
|
||||
## Path traversal preventie
|
||||
|
||||
```php
|
||||
// Gebruik realpath() en check prefix
|
||||
$realPath = realpath($filePath);
|
||||
$realContentDir = realpath($contentDir);
|
||||
if (strpos($realPath, $realContentDir) !== 0) {
|
||||
die('Ongeldig pad');
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,32 @@
|
||||
# Core Classes
|
||||
|
||||
## CodePressCMS.php
|
||||
|
||||
Hoofd CMS class in `cms/core/class/CodePressCMS.php`:
|
||||
|
||||
```php
|
||||
$cms = new CodePressCMS();
|
||||
$cms->init();
|
||||
$cms->renderPage($pagePath);
|
||||
```
|
||||
|
||||
## ThemeManager.php
|
||||
|
||||
Themabeheer in `cms/core/class/ThemeManager.php`:
|
||||
|
||||
```php
|
||||
$themeManager = new ThemeManager($config);
|
||||
$themeManager->getActiveTheme();
|
||||
$themeManager->renderTwig($template, $data);
|
||||
$themeManager->compileCss($force);
|
||||
```
|
||||
|
||||
## PluginManager.php
|
||||
|
||||
Plugin systeem in `cms/core/class/PluginManager.php`:
|
||||
|
||||
```php
|
||||
$pluginManager = new PluginManager();
|
||||
$pluginManager->loadPlugins($enabledPlugins);
|
||||
$pluginManager->executeHook($name, $params);
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
# Debugging
|
||||
|
||||
## Logging
|
||||
|
||||
```php
|
||||
// Admin logging
|
||||
adminLog($config, 'info', 'Bericht tekst');
|
||||
|
||||
// LogManager
|
||||
LogManager::log(LogManager::EVENT_ADMIN, 'info', 'Bericht');
|
||||
```
|
||||
|
||||
## Cache uitschakelen
|
||||
|
||||
In `config.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"cache": {
|
||||
"enabled": false
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# Performance
|
||||
|
||||
## OPcache inschakelen
|
||||
|
||||
In `php.ini`:
|
||||
|
||||
```ini
|
||||
opcache.enable=1
|
||||
opcache.memory_consumption=128
|
||||
opcache.max_accelerated_files=10000
|
||||
```
|
||||
|
||||
## SCSS caching
|
||||
|
||||
SCSS wordt gecompileerd met caching:
|
||||
|
||||
```php
|
||||
$themeManager->compileCss(false); // Gebruik cache indien mogelijk
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
# Plugin Development
|
||||
|
||||
## Plugin structuur
|
||||
|
||||
```
|
||||
plugins/MijnPlugin/
|
||||
├── plugin.json # Plugin metadata
|
||||
├── plugin.php # Plugin code
|
||||
└── config.json # Optionele configuratie
|
||||
```
|
||||
|
||||
## plugin.json
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Mijn Plugin",
|
||||
"version": "1.0.0",
|
||||
"author": "Jouw Naam",
|
||||
"description": "Beschrijving"
|
||||
}
|
||||
```
|
||||
|
||||
## plugin.php voorbeeld
|
||||
|
||||
```php
|
||||
<?php
|
||||
/**
|
||||
* Plugin: MijnPlugin
|
||||
*/
|
||||
|
||||
echo '<div class="mijn-plugin">Hello World</div>';
|
||||
```
|
||||
|
||||
## CMSAPI gebruiken
|
||||
|
||||
```php
|
||||
<?php
|
||||
require_once '../../cms/core/class/PluginManager.php';
|
||||
|
||||
$api = PluginManager::getAPI();
|
||||
$config = $api->getConfig();
|
||||
$content = $api->getContent();
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# Routing
|
||||
|
||||
## Frontend routing
|
||||
|
||||
Via `cms/router.php` voor PHP dev server:
|
||||
|
||||
```php
|
||||
// Schone URLs: /nl/pagina
|
||||
// Query: ?page=pagina&lang=nl
|
||||
```
|
||||
|
||||
## Admin routing
|
||||
|
||||
Via `public/admin.php`:
|
||||
|
||||
```php
|
||||
// Routes: /admin/dashboard, /admin/content, etc.
|
||||
// Query parameter: ?route=dashboard
|
||||
```
|
||||
@@ -0,0 +1,22 @@
|
||||
# Testing
|
||||
|
||||
## Penetration tests
|
||||
|
||||
```bash
|
||||
cd cli/test/pentest
|
||||
./security-test.sh
|
||||
```
|
||||
|
||||
## Accessibility tests
|
||||
|
||||
```bash
|
||||
cd cli/test
|
||||
./accessibility.sh
|
||||
```
|
||||
|
||||
## Functionele tests
|
||||
|
||||
```bash
|
||||
cd cli/test/functional
|
||||
./content-tests.sh
|
||||
```
|
||||
@@ -0,0 +1,10 @@
|
||||
# Content Beheerder
|
||||
|
||||
De content beheerder handleiding bevat de volgende onderwerpen:
|
||||
|
||||
- **Content structuur** - Hoe content wordt opgeslagen
|
||||
- **Pagina's beheren** - Pagina's aanmaken en bewerken
|
||||
- **Media beheren** - Media uploaden en gebruiken
|
||||
- **Content API** - De Content API gebruiken in PHP pagina's
|
||||
|
||||
Selecteer een onderwerp uit de navigatie aan de linkerkant.
|
||||
@@ -0,0 +1,119 @@
|
||||
# Content API
|
||||
|
||||
De Content API is beschikbaar in PHP content bestanden (`.php`) en biedt een veilige, read-only interface tot CMS data.
|
||||
|
||||
## Gebruik in PHP content bestanden
|
||||
|
||||
```php
|
||||
<?php
|
||||
/** @var ContentAPI $api */
|
||||
|
||||
// Alle pagina's ophalen
|
||||
$allPages = $api->getAllPages();
|
||||
// Resultaat: ['index' => 'Home', 'over-ons' => 'Over ons', ...]
|
||||
|
||||
// Specifieke pagina ophalen
|
||||
$page = $api->getPage('over-ons');
|
||||
// Resultaat: ['title' => 'Over ons', 'content' => '...', 'path' => 'over-ons', 'layout' => 'full_content', 'metadata' => [...]]
|
||||
|
||||
// Menu structuur ophalen
|
||||
$menu = $api->getMenu();
|
||||
// Resultaat: [['title' => 'Home', 'path' => 'index', 'type' => 'file', 'active' => true], ...]
|
||||
|
||||
// Config waarde ophalen (dot notatie)
|
||||
$siteTitle = $api->getConfig('site_title');
|
||||
$searchEnabled = $api->getConfig('features.search_enabled', false);
|
||||
```
|
||||
|
||||
## Beschikbare methods
|
||||
|
||||
### Pagina's
|
||||
|
||||
- `getAllPages(): array` - Alle pagina's als `['pad' => 'titel']` pairs
|
||||
- `getPage(string $path): ?array` - Specifieke pagina met `title`, `content`, `path`, `layout`, `metadata`
|
||||
- `pageExists(string $path): bool` - Controleer of een pagina bestaat
|
||||
- `getCurrentPageTitle(): string` - Titel van huidige pagina
|
||||
- `getCurrentPagePath(): string` - Pad van huidige pagina
|
||||
- `isHomepage(): bool` - Of huidige pagina de homepage is
|
||||
|
||||
### Menu & Navigatie
|
||||
|
||||
- `getMenu(): array` - Hiërarchische menu structuur met `title`, `path`, `children`, `active`
|
||||
- `buildUrl(string $page = 'index', ?string $lang = null, array $params = []): string` - Bouw een URL voor een pagina
|
||||
|
||||
### Configuratie
|
||||
|
||||
- `getConfig(string $key, mixed $default = null): mixed` - Config waarde via dot notatie (bijv. `'features.search_enabled'`)
|
||||
- `getSiteTitle(): string` - Site titel uit config
|
||||
|
||||
### Taal
|
||||
|
||||
- `getCurrentLanguage(): string` - Huidige taal code (bijv. `'nl'`)
|
||||
- `getAvailableLanguages(): array` - Beschikbare talen (bijv. `['nl', 'en']`)
|
||||
- `t(string $key): string` - Vertaal een language key
|
||||
|
||||
### Zoeken
|
||||
|
||||
- `getSearchResults(): array` - Zoekresultaten (leeg als niet aan het zoeken)
|
||||
- `isSearching(): bool` - Of er momenteel gezocht wordt
|
||||
|
||||
## Voorbeeld: Recentste pagina's tonen
|
||||
|
||||
```php
|
||||
<?php
|
||||
/** @var ContentAPI $api */
|
||||
$pages = $api->getAllPages();
|
||||
$currentLang = $api->getCurrentLanguage();
|
||||
?>
|
||||
<ul>
|
||||
<?php foreach (array_slice($pages, 0, 5, true) as $path => $title): ?>
|
||||
<li>
|
||||
<a href="/<?= $currentLang ?>/<?= htmlspecialchars($path) ?>">
|
||||
<?= htmlspecialchars($title) ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Voorbeeld: Config waarde gebruiken
|
||||
|
||||
```php
|
||||
<?php
|
||||
/** @var ContentAPI $api */
|
||||
if ($api->getConfig('features.search_enabled', false)): ?>
|
||||
<form method="GET" action="">
|
||||
<input type="search" name="search" placeholder="<?= $api->t('search_placeholder') ?>">
|
||||
<button type="submit"><?= $api->t('search_button') ?></button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
```
|
||||
|
||||
## CMSAPI (voor plugins)
|
||||
|
||||
Plugins gebruiken de `CMSAPI` class via `$this->api`. Deze biedt vergelijkbare methods:
|
||||
|
||||
```php
|
||||
$this->api->getCurrentPageTitle();
|
||||
$this->api->getCurrentPageContent();
|
||||
$this->api->getMenu();
|
||||
$this->api->getConfig('site_title');
|
||||
$this->api->getCurrentLanguage();
|
||||
$this->api->isHomepage();
|
||||
$this->api->hasContent();
|
||||
$this->api->getSearchResults();
|
||||
$this->api->isSearching();
|
||||
$this->api->getAvailableLanguages();
|
||||
$this->api->createUrl('over-ons');
|
||||
$this->api->translate('home');
|
||||
```
|
||||
|
||||
Daarnaast heeft de CMSAPI:
|
||||
|
||||
- `getCurrentPage(): array` - Volledige pagina data
|
||||
- `getCurrentPageUrl(): string` - URL van huidige pagina
|
||||
- `getCurrentPageFileInfo(): ?array` - Bestandsinfo (created, modified)
|
||||
- `getBreadcrumb(): string` - Breadcrumb HTML
|
||||
- `executePhpFile(string $filePath): string` - Voer PHP bestand uit en vang output op
|
||||
- `getFileContent(string $filePath): string` - Haal content uit PHP/HTML/Markdown bestand
|
||||
- `contentFileExists(string $filename): bool` - Controleer of bestand bestaat in content map
|
||||
@@ -0,0 +1,31 @@
|
||||
# Content structuur
|
||||
|
||||
Content wordt opgeslagen in de `content/` map zonder database.
|
||||
|
||||
## Ondersteunde bestandsformaten
|
||||
|
||||
- `.md` - Markdown (aanbevolen)
|
||||
- `.php` - Dynamische PHP pagina's
|
||||
- `.html` - Statische HTML pagina's
|
||||
|
||||
## Bestandsnaam conventies
|
||||
|
||||
```
|
||||
nl.pagina-naam.md # Nederlandse pagina
|
||||
en.page-name.md # Engelse pagina
|
||||
```
|
||||
|
||||
## Frontmatter
|
||||
|
||||
Markdown bestanden kunnen frontmatter metadata bevatten:
|
||||
|
||||
```markdown
|
||||
---
|
||||
layout: full_content
|
||||
plugins: HTMLBlock
|
||||
---
|
||||
|
||||
# Pagina titel
|
||||
|
||||
Content...
|
||||
```
|
||||
@@ -0,0 +1,16 @@
|
||||
# Media beheren
|
||||
|
||||
## Uploaden
|
||||
|
||||
1. Ga naar Content map
|
||||
2. Klik **Upload**
|
||||
3. Selecteer bestanden (JPG, PNG, GIF, WebP, SVG, PDF, etc.)
|
||||
4. Uploaden
|
||||
|
||||
## Gebruiken in content
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
<video src="/content/video.mp4" controls></video>
|
||||
```
|
||||
@@ -0,0 +1,16 @@
|
||||
# Pagina's beheren
|
||||
|
||||
## Via Admin Console
|
||||
|
||||
1. Login op `/admin`
|
||||
2. Ga naar **Content**
|
||||
3. Kies een map of maak een nieuwe pagina
|
||||
4. Bewerk content in de editor
|
||||
5. Sla op met Ctrl+S
|
||||
|
||||
## Editor functies
|
||||
|
||||
- **CodeMirror** editor met syntax highlighting
|
||||
- **Toolbar** voor snel Markdown invoegen
|
||||
- **Live preview** via knop
|
||||
- **Auto-save** backups in `.bak/` map
|
||||
@@ -0,0 +1,3 @@
|
||||
# Handleiding
|
||||
|
||||
Selecteer een onderwerp uit de navigatie aan de linkerkant.
|
||||
@@ -0,0 +1,14 @@
|
||||
# Theme Developer
|
||||
|
||||
De theme developer handleiding bevat de volgende onderwerpen:
|
||||
|
||||
- **Thema structuur** - Mappenstructuur van een thema
|
||||
- **theme.json** - Configuratie van een thema
|
||||
- **Twig templates** - Twig syntax, variabelen en blocks
|
||||
- **SCSS styling** - SCSS compileren en schrijven
|
||||
- **Layouts** - Layouts definiëren en gebruiken
|
||||
- **Nieuw thema** - Thema maken via admin of handmatig
|
||||
|
||||
Zie ook de **Content API** handleiding bij Content Beheerder voor alle beschikbare Twig variabelen en CMSAPI methods.
|
||||
|
||||
Selecteer een onderwerp uit de navigatie aan de linkerkant.
|
||||
@@ -0,0 +1,27 @@
|
||||
# Layouts
|
||||
|
||||
## Layout kiezen in content
|
||||
|
||||
```markdown
|
||||
---
|
||||
layout: left_sidebar
|
||||
---
|
||||
|
||||
# Pagina titel
|
||||
|
||||
Content...
|
||||
```
|
||||
|
||||
## Layouts in theme.json
|
||||
|
||||
```json
|
||||
{
|
||||
"default_layout": "full_content",
|
||||
"layouts": {
|
||||
"full_content": "full_content.twig",
|
||||
"left_sidebar": "left_sidebar.twig",
|
||||
"right_sidebar": "right_sidebar.twig",
|
||||
"custom1": "custom1.twig"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,25 @@
|
||||
# Nieuw thema maken
|
||||
|
||||
## Via Admin
|
||||
|
||||
1. Ga naar **Thema** → **Nieuw thema**
|
||||
2. Geef naam (bijv. `mijn-thema`)
|
||||
3. Thema wordt aangemaakt met basis structuur
|
||||
4. Bewerk `theme.json` en templates
|
||||
|
||||
## Handmatig
|
||||
|
||||
```bash
|
||||
mkdir themes/mijn-thema
|
||||
mkdir themes/mijn-thema/partials
|
||||
mkdir themes/mijn-thema/assets/{scss,css,js,fonts,img}
|
||||
```
|
||||
|
||||
Maak basis bestanden:
|
||||
|
||||
- `theme.json`
|
||||
- `base.twig`
|
||||
- `full_content.twig`
|
||||
- `partials/header.twig`
|
||||
- `partials/footer.twig`
|
||||
- `scss/theme.scss`
|
||||
@@ -0,0 +1,24 @@
|
||||
# SCSS styling
|
||||
|
||||
## theme.scss compileren
|
||||
|
||||
1. Ga naar **Admin** → **Thema**
|
||||
2. Klik **SCSS compileren** bij jouw thema
|
||||
3. CSS wordt gegenereerd in `assets/css/theme.css`
|
||||
|
||||
## SCSS voorbeeld
|
||||
|
||||
```scss
|
||||
$primary-color: #0a369d;
|
||||
$font-stack: Helvetica, Arial, sans-serif;
|
||||
|
||||
body {
|
||||
font-family: $font-stack;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,21 @@
|
||||
# Thema structuur
|
||||
|
||||
```
|
||||
themes/mijn-thema/
|
||||
├── theme.json # Thema configuratie
|
||||
├── base.twig # Hoofd layout
|
||||
├── full_content.twig # Layout: full-width
|
||||
├── left_sidebar.twig # Layout: sidebar links
|
||||
├── right_sidebar.twig # Layout: sidebar rechts
|
||||
├── custom.twig # Layout: custom
|
||||
├── partials/
|
||||
│ ├── header.twig
|
||||
│ ├── navigation.twig
|
||||
│ └── footer.twig
|
||||
└── assets/
|
||||
├── scss/theme.scss # SCSS bron
|
||||
├── css/ # CSS bestanden
|
||||
├── js/theme.js # JavaScript
|
||||
├── fonts/ # Lettertypes
|
||||
└── img/ # Afbeeldingen
|
||||
```
|
||||
@@ -0,0 +1,21 @@
|
||||
# theme.json
|
||||
|
||||
```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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
@@ -0,0 +1,206 @@
|
||||
# Twig templates
|
||||
|
||||
## Basis syntax
|
||||
|
||||
```twig
|
||||
{# Commentaar #}
|
||||
{{ variabele }}
|
||||
{{ variabele|default('standaard') }}
|
||||
{% if voorwaarde %}...{% endif %}
|
||||
{% for item in items %}...{% endfor %}
|
||||
{% extends 'base.twig' %}
|
||||
{% block content %}{% endblock %}
|
||||
{% include 'partials/header.twig' %}
|
||||
```
|
||||
|
||||
## base.twig voorbeeld
|
||||
|
||||
```twig
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ current_lang }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ page_title }} - {{ site_title }}</title>
|
||||
<meta name="description" content="{{ seo_description }}">
|
||||
<link rel="stylesheet" href="{{ theme_css_url }}">
|
||||
</head>
|
||||
<body>
|
||||
{% include 'partials/header.twig' %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
{% include 'partials/footer.twig' %}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Variabelen beschikbaar in templates
|
||||
|
||||
### Pagina data
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `page_title` | string | Titel van huidige pagina (HTML-escaped) |
|
||||
| `content` | string | Ge-renderde pagina content (HTML) |
|
||||
| `page_metadata` | array | Frontmatter metadata van de pagina |
|
||||
| `layout` | string | Layout naam (bijv. `full_content`) |
|
||||
| `sidebar_content` | string | Sidebar content van plugins (HTML) |
|
||||
| `breadcrumb` | string | Breadcrumb HTML (gegeneerd door CMS) |
|
||||
|
||||
### Site data
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `site_title` | string | Site titel uit config.json |
|
||||
| `default_page` | string | Standaard pagina pad |
|
||||
| `homepage` | string | Homepage pad |
|
||||
| `homepage_title` | string | Homepage titel |
|
||||
| `is_homepage` | bool | Of huidige pagina de homepage is |
|
||||
| `is_guide_page` | bool | Of huidige pagina een handleiding is |
|
||||
| `has_content` | bool | Of content map niet leeg is |
|
||||
| `cms_version` | string | CMS versie nummer |
|
||||
|
||||
### Menu & Navigatie
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `menu` | string | Ge-renderd menu HTML |
|
||||
| `current_page` | string | Huidige pagina pad |
|
||||
| `breadcrumb` | string | Breadcrumb HTML |
|
||||
|
||||
### Taal
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `current_lang` | string | Huidige taal code (bijv. `nl`) |
|
||||
| `current_lang_upper` | string | Huidige taal in hoofdletters |
|
||||
| `available_langs` | array | Beschikbare talen met `code`, `name`, `url`, `is_current` |
|
||||
|
||||
### SEO
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `seo_description` | string | SEO beschrijving |
|
||||
| `seo_keywords` | string | SEO keywords |
|
||||
| `block_ai_bots` | bool | AI bots blokkeren |
|
||||
| `block_search_engines` | bool | Zoekmachines blokkeren |
|
||||
|
||||
### Auteur
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `author_name` | string | Auteur naam |
|
||||
| `author_website` | string | Auteur website URL |
|
||||
| `author_git` | string | Auteur Git URL |
|
||||
|
||||
### Theme
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `theme_title` | string | Thema titel |
|
||||
| `theme_css_url` | string | Gecompileerde CSS URL |
|
||||
| `theme_js_url` | string | JavaScript URL |
|
||||
| `theme_config` | array | Thema configuratie uit theme.json |
|
||||
| `theme_base_url` | string | Basis URL van thema (bijv. `/themes/default`) |
|
||||
| `theme_css_files` | array | Lijst van CSS bestanden |
|
||||
| `theme_js_files` | array | Lijst van JS bestanden |
|
||||
| `theme_favicon` | string | Favicon URL |
|
||||
| `plugin_css_urls` | array | CSS URLs van plugins (geladen ná theme CSS) |
|
||||
|
||||
### Theme kleuren
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `header_color` | string | Header achtergrondkleur |
|
||||
| `header_font_color` | string | Header tekstkleur |
|
||||
| `header_height` | string | Header hoogte in px |
|
||||
| `navigation_color` | string | Navigatie achtergrondkleur |
|
||||
| `navigation_font_color` | string | Navigatie tekstkleur |
|
||||
| `nav_height` | string | Navigatie hoogte in px |
|
||||
| `sidebar_background` | string | Sidebar achtergrondkleur |
|
||||
| `sidebar_border` | string | Sidebar randkleur |
|
||||
|
||||
### Bestandsinfo
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `created` | string | Aanmaakdatum van bestand |
|
||||
| `modified` | string | Wijzigingsdatum van bestand |
|
||||
| `show_created` | bool | Of aanmaakdatum getoond moet worden |
|
||||
| `file_info_block` | bool | Of bestandsinfo blok getoond moet worden |
|
||||
|
||||
### Vertalingen
|
||||
|
||||
| Variabele | Type | Beschrijving |
|
||||
|-----------|------|--------------|
|
||||
| `t_home` | string | "Home" vertaling |
|
||||
| `t_search` | string | "Zoeken" vertaling |
|
||||
| `t_search_placeholder` | string | Zoekbalk placeholder vertaling |
|
||||
| `t_search_button` | string | Zoekknop vertaling |
|
||||
| `t_welcome` | string | "Welkom" vertaling |
|
||||
| `t_created` | string | "Aangemaakt" vertaling |
|
||||
| `t_modified` | string | "Gewijzigd" vertaling |
|
||||
| `t_author` | string | "Auteur" vertaling |
|
||||
| `t_manual` | string | "Handleiding" vertaling |
|
||||
| `t_guide` | string | "Handleiding" vertaling |
|
||||
| `t_no_content` | string | "Geen content" vertaling |
|
||||
| `t_no_results` | string | "Geen resultaten" vertaling |
|
||||
| `t_results_found` | string | "Resultaten gevonden" vertaling |
|
||||
| `t_powered_by` | string | "Aangedreven door" vertaling |
|
||||
| `t_page_not_found` | string | "Pagina niet gevonden" vertaling |
|
||||
| `t_page_not_found_text` | string | "Pagina niet gevonden" tekst vertaling |
|
||||
| `t_mappen` | string | "Mappen" vertaling |
|
||||
| `t_paginas` | string | "Pagina's" vertaling |
|
||||
|
||||
## Layouts en blocks
|
||||
|
||||
Een layout template extends `base.twig` en vult het `content` block:
|
||||
|
||||
```twig
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
## Conditionele sidebar
|
||||
|
||||
```twig
|
||||
{% if sidebar_content %}
|
||||
<div class="row">
|
||||
<aside class="col-md-4">
|
||||
{{ sidebar_content|raw }}
|
||||
</aside>
|
||||
<main class="col-md-8">
|
||||
{{ content|raw }}
|
||||
</main>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="container">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
{% endif %}
|
||||
```
|
||||
|
||||
## Taal switcher
|
||||
|
||||
```twig
|
||||
{% for lang in available_langs %}
|
||||
<a href="{{ lang.url }}" class="{{ lang.is_current ? 'active' : '' }}">
|
||||
{{ lang.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
## Plugin CSS laden
|
||||
|
||||
Plugin CSS wordt automatisch geladen ná theme CSS, zodat themes plugin styling kunnen overschrijven:
|
||||
|
||||
```twig
|
||||
{% for cssUrl in plugin_css_urls|default([]) %}
|
||||
<link href="{{ cssUrl }}" rel="stylesheet">
|
||||
{% endfor %}
|
||||
```
|
||||
Reference in New Issue
Block a user