Add documentation
This commit is contained in:
parent
c3f821caef
commit
7ad0062dee
34 changed files with 1921 additions and 0 deletions
|
|
@ -0,0 +1,2 @@
|
|||
title = "Forklaring"
|
||||
summary = "Forstå konseptene og designvalgene bak PnP"
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Rutingssystemet"
|
||||
summary = "Forstå hvordan PnPs mappebaserte ruting fungerer"
|
||||
98
custom/docs/utviklerdokumentasjon/forklaring/routing/page.md
Normal file
98
custom/docs/utviklerdokumentasjon/forklaring/routing/page.md
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
# Forstå ruting i PnP
|
||||
|
||||
PnP bruker et enkelt, intuitivt mappebasert rutingssystem som kobler mapper direkte til URL-er.
|
||||
|
||||
## Filosofien
|
||||
|
||||
Tradisjonelle webrammeverk krever at du definerer ruter i konfigurasjonsfiler. PnP tar en annen tilnærming: **mappestrukturen ER rutekonfigurasjonen din**.
|
||||
|
||||
Dette designvalget prioriterer:
|
||||
- **Enkelhet**: Ingen rutdefinisjoner å vedlikeholde
|
||||
- **Forutsigbarhet**: URL-er matcher mappestrukturen nøyaktig
|
||||
- **Vedlikeholdbarhet**: Lett å forstå selv år senere
|
||||
|
||||
## Hvordan det fungerer
|
||||
|
||||
### URL til fil-mapping
|
||||
|
||||
Når en forespørsel kommer inn, følger ruteren denne logikken:
|
||||
|
||||
1. **Nøyaktig filmatch**: Hvis `/content/om.html` eksisterer, server den
|
||||
2. **Mappe med sidefil**: Hvis `/content/om/` inneholder `page.md`, server den
|
||||
3. **Mappe med enkeltfil**: Hvis `/content/blogg/innlegg/` inneholder `article.md`, server den
|
||||
4. **Mappelisting**: Hvis `/content/blogg/` inneholder undermapper, list dem
|
||||
|
||||
### Skråstrek-atferd
|
||||
|
||||
PnP omdirigerer automatisk mappebaserte sider til å inkludere skråstrek på slutten:
|
||||
|
||||
- `/blogg/mitt-innlegg` → `/blogg/mitt-innlegg/` (301 redirect)
|
||||
|
||||
Dette sikrer at relative stier i markdown fungerer korrekt (bilder, lenker, etc).
|
||||
|
||||
## Filprioritet
|
||||
|
||||
Når PnP ser etter innhold i en mappe, søker den etter filer i denne rekkefølgen:
|
||||
|
||||
### For enkle sider (artikler, innlegg):
|
||||
1. `single.php`
|
||||
2. `single.html`
|
||||
3. `single.md`
|
||||
4. `post.php`
|
||||
5. `post.html`
|
||||
6. `post.md`
|
||||
7. `article.php`
|
||||
8. `article.html`
|
||||
9. `article.md`
|
||||
|
||||
### For overordnede sider:
|
||||
1. `page.php`
|
||||
2. `page.html`
|
||||
3. `page.md`
|
||||
|
||||
## Språkvariasjoner
|
||||
|
||||
PnP støtter flerspråklige sider. For språk som ikke er standardspråket, søker ruteren etter språkspesifikke filer først:
|
||||
|
||||
```
|
||||
page.en.md → Engelsk versjon
|
||||
page.md → Norsk versjon (standard)
|
||||
```
|
||||
|
||||
URL-strukturen blir:
|
||||
|
||||
```
|
||||
/om/ → Norsk (standard)
|
||||
/en/about/ → Engelsk
|
||||
```
|
||||
|
||||
## Egendefinerte indekssider
|
||||
|
||||
Du kan overstyre standard mappelisting ved å lage en `index.php`-fil i en hvilken som helst mappe.
|
||||
|
||||
## Mappenavn med datoer
|
||||
|
||||
PnP trekker automatisk ut datoer fra mappenavn:
|
||||
|
||||
```
|
||||
/content/blogg/2025-01-15-mitt-innlegg/
|
||||
```
|
||||
|
||||
Datoen formateres automatisk til norsk format: "15. januar 2025"
|
||||
|
||||
## Hvorfor denne tilnærmingen?
|
||||
|
||||
Dette rutingssystemet vil fungere i flere tiår fordi:
|
||||
- Ingen komplekse avhengigheter
|
||||
- Ingen rutdefinisjoner som blir utdaterte
|
||||
- Filsystemoperasjoner er standardiserte og stabile
|
||||
- Enkelt å migrere eller ta backup (bare kopier mapper)
|
||||
- Ingen abstraksjoner som skjuler underliggende struktur
|
||||
- Ingen kompilering eller cache-generering nødvendig
|
||||
|
||||
## Sikkerhet
|
||||
|
||||
Ruteren validerer alle stier for å forhindre directory traversal-angrep:
|
||||
- Filer må være innenfor document root
|
||||
- Realpaths sjekkes mot contentDir
|
||||
- Kun godkjente filtyper serveres
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Malsystemet"
|
||||
summary = "Forstå hvordan PnPs malsystem fungerer"
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
# Forstå malsystemet
|
||||
|
||||
PnP bruker et enkelt, men kraftig malsystem basert på PHP-inkluderinger.
|
||||
|
||||
## Filosofien
|
||||
|
||||
Tradisjonelle templating-systemer introduserer nye språk og syntaks som må læres. PnP tar en annen tilnærming: **bruk PHP som det er**.
|
||||
|
||||
Dette designvalget gir:
|
||||
- **Ingen læringskurve**: Hvis du kan PHP, kan du lage maler
|
||||
- **Full kraft**: Tilgang til alle PHP-funksjoner
|
||||
- **Null overhead**: Ingen kompilering eller parsing
|
||||
- **Lett feilsøking**: Standard PHP-feilmeldinger
|
||||
|
||||
## Malhierarki
|
||||
|
||||
PnP har tre hovednivåer av maler:
|
||||
|
||||
### 1. Basismal (base.php)
|
||||
Inneholder den overordnede HTML-strukturen:
|
||||
|
||||
```php
|
||||
<!DOCTYPE html>
|
||||
<html lang="<?= $currentLang ?>">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><?= $pageTitle ?? 'Min side' ?></title>
|
||||
</head>
|
||||
<body>
|
||||
<nav><!-- Navigasjon --></nav>
|
||||
<?= $content ?>
|
||||
<footer><!-- Footer --></footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 2. Sidemal (page.php)
|
||||
Pakker inn enkeltinnhold:
|
||||
|
||||
```php
|
||||
<article>
|
||||
<?= $content ?>
|
||||
</article>
|
||||
```
|
||||
|
||||
### 3. Listemal (list.php)
|
||||
Viser samlinger av innhold:
|
||||
|
||||
```php
|
||||
<article>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<div>
|
||||
<h2><a href="<?= $item['url'] ?>"><?= $item['title'] ?></a></h2>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</article>
|
||||
```
|
||||
|
||||
## Dataflyt
|
||||
|
||||
Når en forespørsel kommer inn, flyter data gjennom systemet slik:
|
||||
|
||||
```
|
||||
Request → Router → Content → Page Template → Base Template → Response
|
||||
```
|
||||
|
||||
1. **Router**: Finner riktig innhold
|
||||
2. **Content**: Konverterer markdown/HTML til HTML
|
||||
3. **Page Template**: Pakker innholdet i `$content`
|
||||
4. **Base Template**: Pakker alt i full HTML-struktur
|
||||
|
||||
## Fallback-kjede
|
||||
|
||||
PnP følger en fallback-kjede for maler:
|
||||
|
||||
```
|
||||
custom/templates/base.php
|
||||
↓ (hvis ikke funnet)
|
||||
default/templates/base.php
|
||||
```
|
||||
|
||||
Dette betyr:
|
||||
- Egendefinerte maler overstyrer standardmaler
|
||||
- Du trenger bare å lage egendefinerte maler for det du vil endre
|
||||
- Standardmaler fungerer som fallback
|
||||
|
||||
## Tilgjengelige variabler
|
||||
|
||||
### I base.php
|
||||
|
||||
| Variabel | Type | Beskrivelse |
|
||||
|----------|------|-------------|
|
||||
| `$content` | string | Det rendrede innholdet |
|
||||
| `$navigation` | array | Navigasjonselementer |
|
||||
| `$currentLang` | string | Nåværende språk |
|
||||
| `$defaultLang` | string | Standardspråk |
|
||||
| `$homeLabel` | string | Label for hjem-lenken |
|
||||
| `$translations` | array | Oversettelser fra språkfiler |
|
||||
| `$pageTitle` | string | Sidens tittel |
|
||||
|
||||
### I page.php
|
||||
|
||||
| Variabel | Type | Beskrivelse |
|
||||
|----------|------|-------------|
|
||||
| `$content` | string | Innholdet som skal vises |
|
||||
| `$pageMetadata` | array | Metadata for siden |
|
||||
| `$pageTitle` | string | Sidens tittel |
|
||||
|
||||
### I list.php
|
||||
|
||||
| Variabel | Type | Beskrivelse |
|
||||
|----------|------|-------------|
|
||||
| `$items` | array | Listeelementer |
|
||||
| `$metadata` | array | Metadata for mappen |
|
||||
| `$pageContent` | string | Valgfritt innhold fra page.md |
|
||||
|
||||
## Items-struktur
|
||||
|
||||
I list.php er hvert element i `$items` et array med:
|
||||
|
||||
```php
|
||||
[
|
||||
'title' => 'Innleggstittel',
|
||||
'date' => '15. januar 2025',
|
||||
'url' => '/blogg/2025-01-15-innlegg',
|
||||
'cover' => '/blogg/2025-01-15-innlegg/cover.jpg', // eller null
|
||||
'summary' => 'Kort beskrivelse' // eller null
|
||||
]
|
||||
```
|
||||
|
||||
## Sikkerhet i maler
|
||||
|
||||
### Escape output
|
||||
Bruk alltid `htmlspecialchars()` for brukerdata:
|
||||
|
||||
```php
|
||||
<h1><?= htmlspecialchars($item['title']) ?></h1>
|
||||
```
|
||||
|
||||
### Ikke escape HTML-innhold
|
||||
`$content` inneholder allerede HTML og skal ikke escapes:
|
||||
|
||||
```php
|
||||
<?= $content ?> <!-- RIKTIG -->
|
||||
<?= htmlspecialchars($content) ?> <!-- FEIL -->
|
||||
```
|
||||
|
||||
## Beste praksis
|
||||
|
||||
### Bruk korte echo-tags
|
||||
```php
|
||||
<?= $variable ?> <!-- Bra -->
|
||||
<?php echo $variable; ?> <!-- Fungerer, men mer verbose -->
|
||||
```
|
||||
|
||||
### Sjekk for eksistens
|
||||
```php
|
||||
<?php if (isset($metadata['summary'])): ?>
|
||||
<p><?= htmlspecialchars($metadata['summary']) ?></p>
|
||||
<?php endif; ?>
|
||||
```
|
||||
|
||||
### Bruk ternary for fallbacks
|
||||
```php
|
||||
<title><?= $pageTitle ?? 'Standard tittel' ?></title>
|
||||
```
|
||||
|
||||
### Hold logikk utenfor maler
|
||||
Forbered data i ruteren eller i egne funksjoner, ikke i malene:
|
||||
|
||||
```php
|
||||
<!-- DÅRLIG -->
|
||||
<?php
|
||||
$processedItems = array_filter($items, function($item) {
|
||||
return strlen($item['title']) > 10;
|
||||
});
|
||||
?>
|
||||
|
||||
<!-- BRA -->
|
||||
<!-- Gjør dette i ruteren eller i en egen funksjon -->
|
||||
```
|
||||
|
||||
## Egendefinerte maler
|
||||
|
||||
For å lage egendefinerte maler:
|
||||
|
||||
1. Kopier standardmalen fra `/app/default/templates/`
|
||||
2. Lim den inn i `/app/custom/templates/`
|
||||
3. Endre etter behov
|
||||
|
||||
Eksempel:
|
||||
|
||||
```bash
|
||||
cp app/default/templates/base.php app/custom/templates/base.php
|
||||
# Rediger app/custom/templates/base.php
|
||||
```
|
||||
|
||||
## Spesialiserte maler
|
||||
|
||||
Du kan lage spesialiserte maler for spesifikke formål:
|
||||
|
||||
### list-grid.php
|
||||
En alternativ listevisning med grid-layout:
|
||||
|
||||
```php
|
||||
<article class="grid">
|
||||
<?php foreach ($items as $item): ?>
|
||||
<div class="card">
|
||||
<!-- Grid-basert layout -->
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</article>
|
||||
```
|
||||
|
||||
PnP vil automatisk foretrekke `list-grid.php` over `list.php` hvis den eksisterer.
|
||||
|
||||
## Hvorfor dette systemet?
|
||||
|
||||
Dette malsystemet vil fungere i flere tiår fordi:
|
||||
- Ingen proprietære templating-språk som kan bli utdaterte
|
||||
- Basert på standard PHP-funksjoner
|
||||
- Ingen kompilering eller cache-generering
|
||||
- Lett å debugge med standard PHP-verktøy
|
||||
- Ingen dependencies som kan bryte
|
||||
- Fullt SEO-vennlig (server-side rendering)
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Legge til bilder"
|
||||
summary = "Lær hvordan du legger til og optimaliserer bilder"
|
||||
140
custom/docs/utviklerdokumentasjon/hvordan/add-images/page.md
Normal file
140
custom/docs/utviklerdokumentasjon/hvordan/add-images/page.md
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
# Hvordan legge til bilder
|
||||
|
||||
Lær hvordan du legger til og administrerer bilder i PnP.
|
||||
|
||||
## Grunnleggende bildebruk
|
||||
|
||||
### Legg til bilder i samme mappe som innholdet
|
||||
|
||||
Den enkleste måten å legge til bilder på er å plassere dem i samme mappe som innholdsfilen:
|
||||
|
||||
```
|
||||
/content/blogg/mitt-innlegg/
|
||||
├── article.md
|
||||
├── bilde1.jpg
|
||||
└── bilde2.webp
|
||||
```
|
||||
|
||||
Deretter refererer du til dem i markdown:
|
||||
|
||||
```markdown
|
||||

|
||||
```
|
||||
|
||||
### Relative stier
|
||||
|
||||
PnP sikrer at relative stier fungerer korrekt ved å automatisk legge til skråstrek på slutten av URL-er. Dette betyr at bilder i samme mappe alltid fungerer.
|
||||
|
||||
## Forsidebilder (Cover images)
|
||||
|
||||
For blogginnlegg og artikler kan du legge til et forsidebilde som vises i listevisninger:
|
||||
|
||||
1. Navngi bildet `cover.jpg`, `cover.webp`, `cover.png`, eller `cover.gif`
|
||||
2. Plasser det i samme mappe som innholdet
|
||||
3. PnP viser det automatisk i listevisninger
|
||||
|
||||
```
|
||||
/content/blogg/mitt-innlegg/
|
||||
├── article.md
|
||||
├── cover.webp
|
||||
└── andre-bilder.jpg
|
||||
```
|
||||
|
||||
## Anbefalte bildeformater
|
||||
|
||||
### WebP
|
||||
Bruk WebP for beste kompresjon og kvalitet:
|
||||
|
||||
```markdown
|
||||

|
||||
```
|
||||
|
||||
### JPEG
|
||||
Bruk JPEG for fotografier:
|
||||
|
||||
```markdown
|
||||

|
||||
```
|
||||
|
||||
### PNG
|
||||
Bruk PNG for grafikk med gjennomsiktighet:
|
||||
|
||||
```markdown
|
||||

|
||||
```
|
||||
|
||||
### SVG
|
||||
Bruk SVG for vektorgr grafikk (logoer, ikoner):
|
||||
|
||||
```markdown
|
||||

|
||||
```
|
||||
|
||||
## Optimalisere bilder
|
||||
|
||||
### Komprimering
|
||||
Komprimer bilder før du laster dem opp:
|
||||
|
||||
- JPEG: Bruk 80-85% kvalitet
|
||||
- WebP: Bruk 80-85% kvalitet
|
||||
- PNG: Bruk verktøy som `pngcrush` eller `optipng`
|
||||
|
||||
### Responsiv størrelse
|
||||
Skalér bilder til passende størrelse:
|
||||
|
||||
- Full bredde: Maks 1920px bredde
|
||||
- Forsidebilder: 800-1200px bredde
|
||||
- Ikoner: 200-400px bredde
|
||||
|
||||
## Bruke bilder i egendefinerte maler
|
||||
|
||||
I listemaler er forsidebilder tilgjengelige via `$item['cover']`:
|
||||
|
||||
```php
|
||||
<?php foreach ($items as $item): ?>
|
||||
<article>
|
||||
<?php if ($item['cover']): ?>
|
||||
<img
|
||||
src="<?= $item['cover'] ?>"
|
||||
alt="<?= htmlspecialchars($item['title']) ?>"
|
||||
loading="lazy"
|
||||
>
|
||||
<?php endif; ?>
|
||||
<h2><?= htmlspecialchars($item['title']) ?></h2>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
```
|
||||
|
||||
## Lazy loading
|
||||
|
||||
Bruk `loading="lazy"` for bilder som ikke er synlige umiddelbart:
|
||||
|
||||
```markdown
|
||||
<img src="bilde.jpg" alt="Beskrivelse" loading="lazy">
|
||||
```
|
||||
|
||||
Dette forbedrer sidelastingstiden betydelig.
|
||||
|
||||
## Tilgjengelige bildestier
|
||||
|
||||
Bilder plassert i innholdsmapper er automatisk tilgjengelige via URL-en:
|
||||
|
||||
```
|
||||
/content/blogg/mitt-innlegg/bilde.jpg
|
||||
→ dinside.no/blogg/mitt-innlegg/bilde.jpg
|
||||
```
|
||||
|
||||
## Delte bilder
|
||||
|
||||
For bilder som brukes på flere sider, plasser dem i `/app/custom/assets/images/`:
|
||||
|
||||
```
|
||||
/app/custom/assets/images/logo.svg
|
||||
→ dinside.no/images/logo.svg
|
||||
```
|
||||
|
||||
Deretter refererer du til dem med absolutte stier:
|
||||
|
||||
```markdown
|
||||

|
||||
```
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Tilpasse maler"
|
||||
summary = "Lær hvordan du tilpasser utseendet til PnP-siden din"
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
# Hvordan tilpasse maler
|
||||
|
||||
Lær hvordan du tilpasser utseendet og følelsen av PnP-siden din.
|
||||
|
||||
## Tilpasse basismalen
|
||||
|
||||
Basismalen kontrollerer det overordnede oppsettet for siden din.
|
||||
|
||||
1. Naviger til `/app/custom/templates/`
|
||||
2. Rediger `base.php`
|
||||
3. Endre HTML-strukturen etter behov
|
||||
|
||||
Eksempel: Legg til en egendefinert header:
|
||||
|
||||
```php
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href="/">Min egendefinerte side</a>
|
||||
</div>
|
||||
<nav>
|
||||
<?php foreach ($navigation as $item): ?>
|
||||
<a href="<?= $item['url'] ?>"><?= $item['title'] ?></a>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
## Tilpasse listemalen
|
||||
|
||||
Listemalen kontrollerer hvordan mapper med innhold vises.
|
||||
|
||||
1. Rediger `/app/custom/templates/list.php`
|
||||
2. Endre HTML-strukturen for listeelementer
|
||||
|
||||
Eksempel: Legg til en egendefinert wrapper:
|
||||
|
||||
```php
|
||||
<article>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<div class="card">
|
||||
<?php if ($item['cover']): ?>
|
||||
<img src="<?= $item['cover'] ?>" alt="<?= htmlspecialchars($item['title']) ?>">
|
||||
<?php endif; ?>
|
||||
<h2><a href="<?= $item['url'] ?>"><?= htmlspecialchars($item['title']) ?></a></h2>
|
||||
<time><?= $item['date'] ?></time>
|
||||
<?php if ($item['summary']): ?>
|
||||
<p><?= htmlspecialchars($item['summary']) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</article>
|
||||
```
|
||||
|
||||
## Tilpasse sidemalen
|
||||
|
||||
Sidemalen brukes for å pakke inn enkeltinnhold.
|
||||
|
||||
1. Rediger `/app/custom/templates/page.php`
|
||||
2. Legg til egendefinerte elementer rundt innholdet
|
||||
|
||||
Eksempel:
|
||||
|
||||
```php
|
||||
<article class="page-content">
|
||||
<?php if ($pageMetadata && isset($pageMetadata['title'])): ?>
|
||||
<header>
|
||||
<h1><?= htmlspecialchars($pageMetadata['title']) ?></h1>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
|
||||
<?= $content ?>
|
||||
|
||||
<footer>
|
||||
<p>Sist oppdatert: <?= date('d.m.Y') ?></p>
|
||||
</footer>
|
||||
</article>
|
||||
```
|
||||
|
||||
## Tilpasse stiler
|
||||
|
||||
1. Rediger `/app/custom/styles/base.css`
|
||||
2. Endre CSS-variabler for farger, fonter, etc.
|
||||
|
||||
Eksempel:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: oklch(0.65 0.25 30);
|
||||
--color-background: oklch(0.98 0 0);
|
||||
--font-body: 'Georgia', serif;
|
||||
--font-heading: 'Helvetica Neue', sans-serif;
|
||||
--spacing-base: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-background);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
```
|
||||
|
||||
## Bruke standardmaler
|
||||
|
||||
Hvis `/app/custom/` ikke eksisterer, bruker PnP standardmaler fra `/app/default/`. Dette er nyttig for raske oppsett.
|
||||
|
||||
## Tilgjengelige variabler i maler
|
||||
|
||||
### I `base.php`:
|
||||
- `$content` - Det rendrede innholdet
|
||||
- `$navigation` - Array med navigasjonselementer
|
||||
- `$currentLang` - Nåværende språk
|
||||
- `$homeLabel` - Label for hjem-knappen
|
||||
|
||||
### I `page.php`:
|
||||
- `$content` - Sideinnholdet
|
||||
- `$pageMetadata` - Metadata for siden
|
||||
- `$pageTitle` - Sidens tittel
|
||||
|
||||
### I `list.php`:
|
||||
- `$items` - Array med listeelementer
|
||||
- `$metadata` - Metadata for mappen
|
||||
- `$pageContent` - Valgfritt innhold fra page.md i mappen
|
||||
2
custom/docs/utviklerdokumentasjon/hvordan/metadata.ini
Normal file
2
custom/docs/utviklerdokumentasjon/hvordan/metadata.ini
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
title = "Hvordan-guider"
|
||||
summary = "Praktiske guider for utvikleroppgaver"
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Flerspråklige sider"
|
||||
summary = "Lær hvordan du lager nettsider med støtte for flere språk"
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
# Hvordan lage flerspråklige sider
|
||||
|
||||
Lær hvordan du lager nettsider med støtte for flere språk i PnP.
|
||||
|
||||
## Konfigurere språk
|
||||
|
||||
### Steg 1: Rediger config.ini
|
||||
|
||||
Åpne `/app/custom/config.ini` (eller lag den hvis den ikke eksisterer):
|
||||
|
||||
```ini
|
||||
[languages]
|
||||
default = "no"
|
||||
available = "no,en"
|
||||
```
|
||||
|
||||
- `default`: Standardspråket (vises uten språkprefiks i URL)
|
||||
- `available`: Kommaseparert liste over tilgjengelige språk
|
||||
|
||||
### Steg 2: Lag språkfiler
|
||||
|
||||
Opprett oversettelser i `/app/custom/languages/`:
|
||||
|
||||
**no.ini:**
|
||||
```ini
|
||||
home = "Hjem"
|
||||
read_more = "Les mer"
|
||||
```
|
||||
|
||||
**en.ini:**
|
||||
```ini
|
||||
home = "Home"
|
||||
read_more = "Read more"
|
||||
```
|
||||
|
||||
Disse er tilgjengelige i maler via `$translations`-variabelen.
|
||||
|
||||
## Lage flerspråklig innhold
|
||||
|
||||
### Metode 1: Språkspesifikke filer
|
||||
|
||||
Lag separate filer for hvert språk:
|
||||
|
||||
```
|
||||
/content/om/
|
||||
├── page.md (Norsk)
|
||||
├── page.en.md (Engelsk)
|
||||
└── metadata.ini
|
||||
```
|
||||
|
||||
**page.md:**
|
||||
```markdown
|
||||
# Om oss
|
||||
|
||||
Vi er et selskap som...
|
||||
```
|
||||
|
||||
**page.en.md:**
|
||||
```markdown
|
||||
# About us
|
||||
|
||||
We are a company that...
|
||||
```
|
||||
|
||||
### Metode 2: Metadata-seksjoner
|
||||
|
||||
Bruk metadata.ini for å oversette titler og sammendrag:
|
||||
|
||||
```ini
|
||||
title = "Om oss"
|
||||
summary = "Lær mer om oss"
|
||||
menu = true
|
||||
menu_order = 1
|
||||
|
||||
[en]
|
||||
title = "About us"
|
||||
summary = "Learn more about us"
|
||||
slug = "about"
|
||||
```
|
||||
|
||||
## URL-struktur
|
||||
|
||||
Standardspråket bruker ingen språkprefiks:
|
||||
|
||||
```
|
||||
/om/ → Norsk (standard)
|
||||
/en/about/ → Engelsk
|
||||
```
|
||||
|
||||
Merk at den engelske versjonen bruker `slug = "about"` fra metadata.
|
||||
|
||||
## Navigasjon
|
||||
|
||||
PnP bygger automatisk navigasjon basert på `menu = true` i metadata.ini:
|
||||
|
||||
```php
|
||||
<!-- I base.php -->
|
||||
<nav>
|
||||
<a href="<?= $currentLang !== $defaultLang ? "/$currentLang/" : "/" ?>">
|
||||
<?= $homeLabel ?>
|
||||
</a>
|
||||
<?php foreach ($navigation as $item): ?>
|
||||
<a href="<?= $item['url'] ?>"><?= $item['title'] ?></a>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Språkvelger
|
||||
|
||||
Lag en språkvelger i basismalen:
|
||||
|
||||
```php
|
||||
<div class="language-switcher">
|
||||
<a href="/" <?= $currentLang === 'no' ? 'aria-current="page"' : '' ?>>NO</a>
|
||||
<a href="/en<?= $requestPath ? '/' . $requestPath : '' ?>"
|
||||
<?= $currentLang === 'en' ? 'aria-current="page"' : '' ?>>EN</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Bruke oversettelser i maler
|
||||
|
||||
Oversettelser fra språkfilene er tilgjengelige i `$translations`:
|
||||
|
||||
```php
|
||||
<a href="#"><?= $translations['read_more'] ?? 'Read more' ?></a>
|
||||
```
|
||||
|
||||
Bruk alltid en fallback-verdi for tilfeller der oversettelsen mangler.
|
||||
|
||||
## Beste praksis
|
||||
|
||||
### Konsistent mappestruktur
|
||||
Bruk samme mappestruktur for alle språk:
|
||||
|
||||
```
|
||||
/content/
|
||||
├── om/
|
||||
│ ├── page.md
|
||||
│ └── page.en.md
|
||||
└── kontakt/
|
||||
├── page.md
|
||||
└── page.en.md
|
||||
```
|
||||
|
||||
### Bruk slugs for oversatte URL-er
|
||||
For rene URL-er, bruk `slug` i metadata:
|
||||
|
||||
```ini
|
||||
[en]
|
||||
slug = "about" # /en/about/ i stedet for /en/om/
|
||||
```
|
||||
|
||||
### Hold metadata samlet
|
||||
Bruk én metadata.ini per mappe med seksjoner for hvert språk:
|
||||
|
||||
```ini
|
||||
title = "Tittel"
|
||||
|
||||
[en]
|
||||
title = "Title"
|
||||
|
||||
[de]
|
||||
title = "Titel"
|
||||
```
|
||||
|
||||
### Synkroniser innhold
|
||||
Sørg for at alle språkversjoner har samme struktur og at alle sider er oversatt.
|
||||
|
||||
## Eksempel: Fullstendig flerspråklig side
|
||||
|
||||
```
|
||||
/content/blogg/
|
||||
├── metadata.ini
|
||||
├── page.md
|
||||
├── page.en.md
|
||||
└── 2025-01-15-mitt-innlegg/
|
||||
├── metadata.ini
|
||||
├── article.md
|
||||
├── article.en.md
|
||||
└── cover.jpg
|
||||
```
|
||||
|
||||
**blogg/metadata.ini:**
|
||||
```ini
|
||||
title = "Blogg"
|
||||
menu = true
|
||||
menu_order = 2
|
||||
|
||||
[en]
|
||||
title = "Blog"
|
||||
slug = "blog"
|
||||
```
|
||||
|
||||
**blogg/2025-01-15-mitt-innlegg/metadata.ini:**
|
||||
```ini
|
||||
title = "Mitt første innlegg"
|
||||
date = "2025-01-15"
|
||||
summary = "Dette er mitt første innlegg"
|
||||
|
||||
[en]
|
||||
title = "My first post"
|
||||
summary = "This is my first post"
|
||||
```
|
||||
|
||||
## Feilsøking
|
||||
|
||||
### Innhold vises ikke for ikke-standardspråk
|
||||
Kontroller at du har enten:
|
||||
- En språkspesifikk fil (f.eks. `page.en.md`)
|
||||
- ELLER metadata med språkseksjon som inneholder `title`
|
||||
|
||||
### Navigasjon viser feil språk
|
||||
Sørg for at `menu = true` er satt i base-seksjonen av metadata.ini, ikke i språkseksjonen.
|
||||
|
||||
### URL-er fungerer ikke
|
||||
Sjekk at `slug` matcher URL-segmentet du prøver å nå.
|
||||
2
custom/docs/utviklerdokumentasjon/metadata.ini
Normal file
2
custom/docs/utviklerdokumentasjon/metadata.ini
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
title = "Utviklerdokumentasjon"
|
||||
summary = "Teknisk dokumentasjon for utviklere"
|
||||
39
custom/docs/utviklerdokumentasjon/page.md
Normal file
39
custom/docs/utviklerdokumentasjon/page.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# Utviklerdokumentasjon
|
||||
|
||||
Teknisk dokumentasjon for utviklere som skal tilpasse, utvide eller vedlikeholde PnP-rammeverket.
|
||||
|
||||
## Dokumentasjonsseksjoner
|
||||
|
||||
### [Veiledninger](veiledninger/)
|
||||
Trinn-for-trinn guider for å lære rammeverket ved å bygge noe.
|
||||
|
||||
### [Hvordan-guider](hvordan/)
|
||||
Praktiske guider for å utføre spesifikke utvikleroppgaver.
|
||||
|
||||
### [Forklaring](forklaring/)
|
||||
Forstå konseptene og designvalgene bak PnP.
|
||||
|
||||
### [Referanse](referanse/)
|
||||
Teknisk referanse for alle funksjoner og komponenter.
|
||||
|
||||
## Hurtigstart for utviklere
|
||||
|
||||
1. Forstå [rutingssystemet](forklaring/routing/)
|
||||
2. Lær hvordan [malsystemet](forklaring/template-system/) fungerer
|
||||
3. Tilpass [maler og stiler](hvordan/customize-templates/)
|
||||
4. Les [metadata-referansen](referanse/metadata/) for alle tilgjengelige felt
|
||||
|
||||
## Arkitektur
|
||||
|
||||
PnP er bygget på disse prinsippene:
|
||||
- **Mappebasert ruting**: Mappestrukturen er rutekonfigurasjonen
|
||||
- **PHP-inkludering**: Maler er rene PHP-filer
|
||||
- **Ingen dependencies**: Kun standard PHP og Parsedown for Markdown
|
||||
- **Fallback-kjeder**: Egendefinerte maler overstyrer standardmaler
|
||||
|
||||
## Teknisk stack
|
||||
|
||||
- PHP 8.3+
|
||||
- Parsedown (for Markdown)
|
||||
- INI-filer (for metadata)
|
||||
- Standard filsystemoperasjoner
|
||||
2
custom/docs/utviklerdokumentasjon/referanse/metadata.ini
Normal file
2
custom/docs/utviklerdokumentasjon/referanse/metadata.ini
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
title = "Referanse"
|
||||
summary = "Teknisk referanse for alle funksjoner og komponenter"
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Metadata-referanse"
|
||||
summary = "Fullstendig referanse for alle metadata-felt"
|
||||
152
custom/docs/utviklerdokumentasjon/referanse/metadata/page.md
Normal file
152
custom/docs/utviklerdokumentasjon/referanse/metadata/page.md
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
# Metadata-referanse
|
||||
|
||||
PnP støtter valgfrie metadatafiler for forbedret innholdskontroll.
|
||||
|
||||
## Filformat
|
||||
|
||||
Metadatafiler bruker INI-formatet og må hete `metadata.ini`.
|
||||
|
||||
## Plassering
|
||||
|
||||
Plasser `metadata.ini` i samme mappe som innholdsfilen din:
|
||||
|
||||
```
|
||||
/content/blogg/2025-01-15-innlegg/
|
||||
├── article.md
|
||||
├── metadata.ini
|
||||
└── cover.jpg
|
||||
```
|
||||
|
||||
## Støttede felt
|
||||
|
||||
### `title`
|
||||
**Type**: String
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: Hentet fra første H1 i innholdet eller mappenavn
|
||||
|
||||
Overstyr sidetittelen.
|
||||
|
||||
```ini
|
||||
title = "Min egendefinerte tittel"
|
||||
```
|
||||
|
||||
### `date`
|
||||
**Type**: Dato (YYYY-MM-DD)
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: Hentet fra mappenavn eller filmodifiseringstidspunkt
|
||||
|
||||
Sett publiseringsdatoen.
|
||||
|
||||
```ini
|
||||
date = "2025-01-15"
|
||||
```
|
||||
|
||||
### `lastModified`
|
||||
**Type**: Dato (YYYY-MM-DD)
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: Ingen
|
||||
|
||||
Spor når innholdet sist ble oppdatert.
|
||||
|
||||
```ini
|
||||
lastModified = "2025-02-10"
|
||||
```
|
||||
|
||||
### `summary`
|
||||
**Type**: String
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: Ingen
|
||||
|
||||
Gi et sammendrag for listevisninger.
|
||||
|
||||
```ini
|
||||
summary = "En kort beskrivelse av dette innholdet."
|
||||
```
|
||||
|
||||
### `menu`
|
||||
**Type**: Boolean
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: false
|
||||
|
||||
Vis denne siden i navigasjonsmenyen.
|
||||
|
||||
```ini
|
||||
menu = true
|
||||
```
|
||||
|
||||
### `menu_order`
|
||||
**Type**: Integer
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: 999
|
||||
|
||||
Rekkefølgen for menyvisning (lavere tall vises først).
|
||||
|
||||
```ini
|
||||
menu_order = 1
|
||||
```
|
||||
|
||||
### `slug`
|
||||
**Type**: String
|
||||
**Påkrevd**: Nei
|
||||
**Standard**: Mappenavn
|
||||
|
||||
Egendefinert URL-slug for oversatte versjoner.
|
||||
|
||||
```ini
|
||||
slug = "about"
|
||||
```
|
||||
|
||||
## Flerspråklig metadata
|
||||
|
||||
For flerspråklige sider kan du legge til språkspesifikke seksjoner:
|
||||
|
||||
```ini
|
||||
title = "Om oss"
|
||||
summary = "Lær mer om oss"
|
||||
menu = true
|
||||
|
||||
[en]
|
||||
title = "About us"
|
||||
summary = "Learn more about us"
|
||||
slug = "about"
|
||||
```
|
||||
|
||||
PnP vil automatisk bruke riktig seksjon basert på nåværende språk.
|
||||
|
||||
## Fullstendig eksempel
|
||||
|
||||
Fullstendig metadata.ini-eksempel:
|
||||
|
||||
```ini
|
||||
title = "Forstå PnP-ruting"
|
||||
date = "2025-01-15"
|
||||
lastModified = "2025-01-20"
|
||||
summary = "Lær hvordan PnPs mappebaserte rutingssystem fungerer og hvorfor det er designet for lang levetid."
|
||||
menu = true
|
||||
menu_order = 3
|
||||
|
||||
[en]
|
||||
title = "Understanding PnP Routing"
|
||||
summary = "Learn how PnP's folder-based routing system works and why it's designed for longevity."
|
||||
slug = "routing"
|
||||
```
|
||||
|
||||
## Fallback-atferd
|
||||
|
||||
Hvis metadata.ini ikke er til stede:
|
||||
- Tittel: Hentet fra første H1 i markdown/HTML, eller mappenavn
|
||||
- Dato: Hentet fra mappenavn (YYYY-MM-DD-*) eller filmodifiseringstidspunkt
|
||||
- Sammendrag: Vises ikke
|
||||
- Meny: Vises ikke i navigasjon
|
||||
|
||||
## Bruke metadata i egendefinerte maler
|
||||
|
||||
Metadata er tilgjengelig i maler via `$metadata`-variabelen:
|
||||
|
||||
```php
|
||||
<?php if ($metadata && isset($metadata['custom_field'])): ?>
|
||||
<p><?= htmlspecialchars($metadata['custom_field']) ?></p>
|
||||
<?php endif; ?>
|
||||
```
|
||||
|
||||
Du kan legge til egendefinerte felt i metadata.ini og bruke dem i malene dine.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
title = "Kom i gang"
|
||||
summary = "Lær grunnleggende i PnP ved å bygge din første side"
|
||||
date = "2025-01-15"
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
# Kom i gang med PnP
|
||||
|
||||
I denne veiledningen lærer du det grunnleggende i PnP ved å lage dine første sider.
|
||||
|
||||
## Hva du skal bygge
|
||||
|
||||
Ved slutten av denne veiledningen har du:
|
||||
- En forside
|
||||
- En om-side
|
||||
- En enkel blogg med flere artikler
|
||||
|
||||
## Forutsetninger
|
||||
|
||||
- PHP 8.3 eller høyere
|
||||
- En webserver (innebygd PHP-server fungerer fint)
|
||||
- Grunnleggende kjennskap til HTML/Markdown
|
||||
|
||||
## Steg 1: Forstå strukturen
|
||||
|
||||
PnP bruker et mappebasert rutingssystem. Mappestrukturen i `/content/` blir direkte til URL-er:
|
||||
|
||||
```
|
||||
/content/om/page.md → dinside.no/om
|
||||
/content/blogg/2025-01-15-hei/article.md → dinside.no/blogg/2025-01-15-hei
|
||||
```
|
||||
|
||||
## Steg 2: Lag din første side
|
||||
|
||||
1. Opprett en mappe: `/content/om/`
|
||||
2. Lag en fil: `/content/om/page.md`
|
||||
3. Legg til innhold:
|
||||
|
||||
```markdown
|
||||
# Om oss
|
||||
|
||||
Velkommen til vår side. Vi bygger enkle, vedlikeholdbare nettsider.
|
||||
```
|
||||
|
||||
4. Besøk `dinside.no/om` - siden din er live!
|
||||
|
||||
## Steg 3: Legg til et blogginnlegg
|
||||
|
||||
1. Opprett en mappe: `/content/blogg/2025-01-15-mitt-forste-innlegg/`
|
||||
2. Lag en fil: `/content/blogg/2025-01-15-mitt-forste-innlegg/article.md`
|
||||
3. Legg til innhold:
|
||||
|
||||
```markdown
|
||||
# Mitt første innlegg
|
||||
|
||||
Dette er mitt første blogginnlegg med PnP!
|
||||
|
||||

|
||||
```
|
||||
|
||||
4. Legg til et bilde: Dra `bilde.jpg` inn i samme mappe
|
||||
5. Besøk `dinside.no/blogg/2025-01-15-mitt-forste-innlegg/`
|
||||
|
||||
## Steg 4: Tilpass med metadata
|
||||
|
||||
Legg til en `metadata.ini`-fil i blogginnleggsmappen:
|
||||
|
||||
```ini
|
||||
title = "Mitt fantastiske første innlegg"
|
||||
date = "2025-01-15"
|
||||
summary = "Oppdag hvor enkelt det er å publisere med PnP."
|
||||
```
|
||||
|
||||
## Steg 5: Lag en bloggindeks
|
||||
|
||||
Når du har flere blogginnlegg i `/content/blogg/`, vil PnP automatisk lage en liste når du besøker `/blogg`.
|
||||
|
||||
Legg til `metadata.ini` i `/content/blogg/`:
|
||||
|
||||
```ini
|
||||
title = "Blogg"
|
||||
menu = true
|
||||
menu_order = 2
|
||||
```
|
||||
|
||||
Dette legger til "Blogg" i navigasjonsmenyen.
|
||||
|
||||
## Steg 6: Legg til et forsidebilde (cover image)
|
||||
|
||||
For hvert blogginnlegg kan du legge til et forsidebilde som vises i listen:
|
||||
|
||||
1. Legg til `cover.jpg`, `cover.webp` eller `cover.png` i innleggsmappen
|
||||
2. Bildet vises automatisk i bloggindeksen
|
||||
|
||||
## Neste steg
|
||||
|
||||
- Lær om [tilpasning av maler](../../how-to/customize-templates/)
|
||||
- Forstå [mappebasert ruting](../../explanation/routing/)
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Veiledninger"
|
||||
summary = "Trinn-for-trinn guider for utviklere"
|
||||
Loading…
Add table
Add a link
Reference in a new issue