innhold/content/docs/utvikling/hvordan/customize-templates/page.md

# 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 (!empty($metadata) && isset($metadata['title'])): ?>
        <header>
            <h1><?= htmlspecialchars($metadata['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
- `$metadata` - 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