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 define the page structure (left sidebar, full width, etc.). Layouts are defined in `theme.json` and chosen via frontmatter in content files.
|
||||
|
||||
## Choosing a layout in content
|
||||
|
||||
```markdown
|
||||
@@ -14,14 +16,58 @@ Content...
|
||||
|
||||
## Layouts in theme.json
|
||||
|
||||
Layouts are defined in the `template` mapping. The `config.default_template` is the fallback for pages without a `layout:` frontmatter or with an unknown 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
|
||||
|
||||
A layout template extends `base.twig` and fills the `content` block:
|
||||
|
||||
```twig
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
## Layouts with sidebar
|
||||
|
||||
Layouts with a sidebar can show plugin content:
|
||||
|
||||
```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 %}
|
||||
```
|
||||
|
||||
If a page has no plugins or the layout has no sidebar, `sidebar_content` is empty.
|
||||
|
||||
## Guide layout
|
||||
|
||||
The `guide` layout (`guide.twig`) is special for guides. It injects the Navigation plugin into the sidebar for sidebar navigation. Automatically used for pages in the `guide/` folder.
|
||||
@@ -2,20 +2,49 @@
|
||||
|
||||
```
|
||||
themes/my-theme/
|
||||
├── theme.json # Theme configuration
|
||||
├── base.twig # Main layout
|
||||
├── full_content.twig # Layout: full-width
|
||||
├── left_sidebar.twig # Layout: left sidebar
|
||||
├── right_sidebar.twig # Layout: right sidebar
|
||||
├── custom.twig # Layout: custom
|
||||
├── theme.json # { title, config.default_template, template: layout→.twig }
|
||||
├── base.twig # Main layout (head, header, nav, breadcrumb, footer)
|
||||
├── full_content.twig # Layout: full width
|
||||
├── left_sidebar.twig # Layout: sidebar on the left
|
||||
├── right_sidebar.twig # Layout: sidebar on the right
|
||||
├── custom1.twig # Layout: custom
|
||||
├── guide.twig # Layout: guide with sidebar (Navigation plugin)
|
||||
├── partials/
|
||||
│ ├── header.twig
|
||||
│ ├── navigation.twig
|
||||
│ └── footer.twig
|
||||
└── assets/
|
||||
├── scss/theme.scss # SCSS source
|
||||
├── css/ # CSS files
|
||||
├── js/theme.js # JavaScript
|
||||
├── fonts/ # Fonts
|
||||
└── img/ # Images
|
||||
├── scss/theme.scss # SCSS source (the only CSS source)
|
||||
├── css_compiled/ # Generated by scssphp (read-only, do not edit manually)
|
||||
├── 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
|
||||
```
|
||||
|
||||
## SCSS is the only CSS source
|
||||
|
||||
- **ALWAYS** edit `assets/scss/theme.scss` — this is the only CSS source
|
||||
- `ThemeManager` compiles SCSS at runtime to `assets/css_compiled/theme.css` via scssphp
|
||||
- `assets/css_compiled/` is **read-only** — do not edit manually
|
||||
- **NEVER** create or edit `assets/css/theme.css` manually; this file must not exist
|
||||
- `ThemeManager::getCssUrl()` priority: 1) `assets/css/theme.css` (manual), 2) `assets/css_compiled/theme.css` (compiled). If `theme.css` exists, the SCSS is ignored.
|
||||
- After SCSS changes: remove `assets/css_compiled/theme.css` and `.mtime` to force recompilation
|
||||
|
||||
```bash
|
||||
rm themes/my-theme/assets/css_compiled/theme.css themes/my-theme/assets/css_compiled/.mtime
|
||||
```
|
||||
|
||||
## guide.twig
|
||||
|
||||
Special layout for guides. Injects the Navigation plugin into the sidebar for sidebar navigation. Automatically used for pages in the `guide/` folder.
|
||||
|
||||
## Plugin CSS loading
|
||||
|
||||
Plugin CSS is automatically loaded after theme CSS in `base.twig`, so themes can override plugin styling:
|
||||
|
||||
```twig
|
||||
{% for cssUrl in plugin_css_urls|default([]) %}
|
||||
<link href="{{ cssUrl }}" rel="stylesheet">
|
||||
{% endfor %}
|
||||
```
|
||||
@@ -2,20 +2,45 @@
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "My Theme",
|
||||
"default_layout": "full_content",
|
||||
"header_color": "#0a369d",
|
||||
"layouts": {
|
||||
"full_content": "full_content.twig",
|
||||
"left_sidebar": "left_sidebar.twig",
|
||||
"right_sidebar": "right_sidebar.twig"
|
||||
}
|
||||
"title": "My Theme",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Fields
|
||||
|
||||
- `title` - Display name in admin
|
||||
- `default_layout` - Default layout for new pages
|
||||
- `header_color` - Admin sidebar color
|
||||
- `layouts` - Mapping of layout names to .twig files
|
||||
- `title` — Display name in admin
|
||||
- `config.default_template` — Default layout for pages without a `layout:` frontmatter (fallback for unknown layouts)
|
||||
- `template` — Mapping from layout name to `.twig` file
|
||||
|
||||
## Template mapping
|
||||
|
||||
The `template` mapping defines which layouts are available. Each key is a layout name, each value is the `.twig` file:
|
||||
|
||||
| Layout name | Twig file | Description |
|
||||
|-------------|-----------|-------------|
|
||||
| `full_content` | `full_content.twig` | Full width, no sidebar |
|
||||
| `left_sidebar` | `left_sidebar.twig` | Sidebar on the left |
|
||||
| `right_sidebar` | `right_sidebar.twig` | Sidebar on the right |
|
||||
| `custom1` | `custom1.twig` | Custom layout |
|
||||
| `guide` | `guide.twig` | Guide with sidebar (Navigation plugin) |
|
||||
|
||||
## Layout selection
|
||||
|
||||
- Layouts are chosen via the frontmatter `layout:` key in content files
|
||||
- Unknown layouts fall back to `config.default_template`
|
||||
- `ThemeManager::getTemplates()` returns the template mapping
|
||||
- `ThemeManager::getConfig()` returns the config section (including `default_template`)
|
||||
|
||||
## Guide layout
|
||||
|
||||
The `guide` layout is special for guides. `getGuidePage()` in `CodePressCMS.php` automatically injects the Navigation plugin into the metadata for sidebar navigation.
|
||||
Reference in New Issue
Block a user