Move documentation files from custom to content directory
This commit is contained in:
Ruben
parent
cea2c167ff
commit
c501635912
32 changed files with 0 additions and 0 deletions
2
content/docs/utvikling/hvordan/add-images/metadata.ini
Normal file
2
content/docs/utvikling/hvordan/add-images/metadata.ini
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
title = "Legge til bilder"
|
||||
summary = "Lær hvordan du legger til og optimaliserer bilder"
|
||||
140
content/docs/utvikling/hvordan/add-images/page.md
Normal file
140
content/docs/utvikling/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"
|
||||
126
content/docs/utvikling/hvordan/customize-templates/page.md
Normal file
126
content/docs/utvikling/hvordan/customize-templates/page.md
Normal file
|
|
@ -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
content/docs/utvikling/hvordan/metadata.ini
Normal file
2
content/docs/utvikling/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"
|
||||
216
content/docs/utvikling/hvordan/multilingual-sites/page.md
Normal file
216
content/docs/utvikling/hvordan/multilingual-sites/page.md
Normal file
|
|
@ -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å.
|
||||
Loading…
Add table
Add a link
Reference in a new issue