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.

Naviger til /app/custom/templates/
Rediger base.php
Endre HTML-strukturen etter behov

Eksempel: Legg til en egendefinert header:

<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.

Rediger /app/custom/templates/list.php
Endre HTML-strukturen for listeelementer

Eksempel: Legg til en egendefinert wrapper:

<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.

Rediger /app/custom/templates/page.php
Legg til egendefinerte elementer rundt innholdet

Eksempel:

<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

Rediger /app/custom/styles/base.css
Endre CSS-variabler for farger, fonter, etc.

Eksempel:

: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

3 KiB Raw Blame History