refactor: unify template structure by introducing a layout snippet

Replaces repetitive header, navbar, and footer code in templates with a centralized `layout` snippet for better maintainability. Cleans up and simplifies various template snippets.
2025-06-29 12:15:33 +02:00
parent 67746c91eb
commit 09a1515025
11 changed files with 179 additions and 410 deletions
@@ -1,57 +0,0 @@
 <?php
 /*
  Snippets are a great way to store code snippets for reuse
  or to keep your templates clean.
  This header snippet is reused in all templates.
  It fetches information from the `site.txt` content file
  and contains the site navigation.
  More about snippets:
  https://getkirby.com/docs/guide/templates/snippets
 */
 ?>
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <?php
    /*
      In the title tag we show the title of our
      site and the title of the current page
    */
    ?>
    <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
    <?php
    /*
      Stylesheets can be included using the `css()` helper.
      Kirby also provides the `js()` helper to include script file.
      More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
    */
    ?>
    <?= css([
        'assets/css/styles.css',
        'assets/css/png4web.css',
    ]) ?>
    <?php
    /*
      The `url()` helper is a great way to create reliable
      absolute URLs in Kirby that always start with the
      base URL of your site.
    */
    ?>
    <link rel="shortcut icon" type="image/x-icon"
          href="<?= url('assets/favicon.ico') ?>">
 </head>
@@ -0,0 +1,45 @@
 <!DOCTYPE html>
 <html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
        <?= css([
            'assets/css/styles.css',
            'assets/css/png4web.css',
        ]) ?>
        <link rel="shortcut icon" type="image/x-icon"
              href="<?= url('assets/favicon.ico') ?>">
    </head>
    <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
        <header>
            <?php snippet('navbar') ?>
        </header>
        <main>
            <?php if ($page->isHomePage()): ?>
                <?php snippet('hero') ?>
            <?php endif ?>
            <?php if ($page->heroText()->isNotEmpty()): ?>
                <?php snippet('titel') ?>
            <?php endif ?>
            <section class="py-24 bg-sf_grau-50">
                <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <?= $slot ?>
                </div>
            </section>
        </main>
        <footer class="bg-sf_grau-400 w-full" id="footer">
            <?php snippet('footer') ?>
        </footer>
        <?= js('assets/js/navbar.js') ?>
    </body>
 </html>
@@ -1,7 +1,4 @@
-<nav class="bg-sf_grau-50 shadow-lg sticky top-0 z-50" data-pgc-define="navbar"
+<nav class="bg-sf_grau-50 shadow-lg sticky top-0 z-50">
     data-pgc-define-name="Navigationsleiste"
     data-pgc-define-description="Navigationsleiste zur Verwendung auf allen Seiten"
     data-pgc-define-photo-preview-only>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-24 items-center justify-between">
            <!-- Logo (Links) -->
@@ -6,9 +6,7 @@
            </div>
            <div class="w-full max-w-lg">
                <p class="lg:pt-0 pt-6 text-xl"><?= $page->heroText() ?></p>
-
+                <?php if ($page->heroButton()->isNotEmpty()): ?>
                <?php
                if ($page->heroButton()->isNotEmpty()): ?>
                    <div class="mt-6 flex flex-wrap gap-4 md:mt-8">
                        <a href="<?= $page->buttonLink() ?>" class="hover:cursor-pointer hover:text-sf_gelb-500"
                           target="_blank">
@@ -18,9 +16,7 @@
                            </button>
                        </a>
                    </div>
-                <?php
+                <?php endif ?>
                endif ?>
            </div>
        </div>
    </div>
@@ -1,36 +1,5 @@
-<?php
+<?php snippet('layout', slots: true) ?>
 /*
  Templates render the content of your pages.
-  They contain the markup together with some control structures
+    <h1>Hallo Welt!</h1>
  like loops or if-statements. The `$page` variable always
  refers to the currently active page.
-  To fetch the content from each field we call the field name as a
+<?php endsnippet() ?>
  method on the `$page` object, e.g. `$page->title()`.
  This default template must not be removed. It is used whenever Kirby
  cannot find a template with the name of the content file.
  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.
  More about templates: https://getkirby.com/docs/guide/templates/basics
 */
 ?>
 <?php
 snippet('header') ?>
 <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
 <?php
 snippet('navbar') ?>
 <?= js('assets/js/navbar.js') ?>
 </body>
 <?php
 snippet('footer') ?>
@@ -1,39 +1,5 @@
-<?php
+<?php snippet('layout', slots: true) ?>
 /*
  Templates render the content of your pages.
-  They contain the markup together with some control structures
+    <?php snippet('dwz') ?>
  like loops or if-statements. The `$page` variable always
  refers to the currently active page.
-  To fetch the content from each field we call the field name as a
+<?php endsnippet() ?>
  method on the `$page` object, e.g. `$page->title()`.
  This default template must not be removed. It is used whenever Kirby
  cannot find a template with the name of the content file.
  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.
  More about templates: https://getkirby.com/docs/guide/templates/basics
 */
 ?>
 <?php
 snippet('header') ?>
 <body>
 <?php
 snippet('navbar') ?>
 <?php
 snippet('titel') ?>
 <?php
 snippet('dwz') ?>
 <?= js('assets/js/navbar.js') ?>
 </body>
 <?php
 snippet('footer') ?>
@@ -1,36 +0,0 @@
 <?php
 /*
  Templates render the content of your pages.
  They contain the markup together with some control structures
  like loops or if-statements. The `$page` variable always
  refers to the currently active page.
  To fetch the content from each field we call the field name as a
  method on the `$page` object, e.g. `$page->title()`.
  This default template must not be removed. It is used whenever Kirby
  cannot find a template with the name of the content file.
  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.
  More about templates: https://getkirby.com/docs/guide/templates/basics
 */
 ?>
 <?php
 snippet('header') ?>
 <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
 <?php
 snippet('navbar') ?>
 <?php
 snippet('hero') ?>
 <?= js('assets/js/navbar.js') ?>
 </body>
 <?php
 snippet('footer') ?>
@@ -1,30 +1,4 @@
-<?php
+<?php snippet('layout', slots: true) ?>
 /*
  Templates render the content of your pages.
  They contain the markup together with some control structures
  like loops or if-statements. The `$page` variable always
  refers to the currently active page.
  To fetch the content from each field we call the field name as a
  method on the `$page` object, e.g. `$page->title()`.
  This default template must not be removed. It is used whenever Kirby
  cannot find a template with the name of the content file.
  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.
  More about templates: https://getkirby.com/docs/guide/templates/basics
 */
 ?>
 <?php
 snippet('header') ?>
 <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
 <?php
 snippet('navbar') ?>
 <section class="bg-sf_grau-50 py-24">
    <div class="lg:px-8 max-w-7xl mx-auto px-4 sm:px-6">
@@ -53,8 +27,4 @@ snippet('navbar') ?>
    </div>
 </section>
-<?= js('assets/js/navbar.js') ?>
+<?php endsnippet() ?>
 </body>
 <?php
 snippet('footer') ?>
@@ -1,32 +1,6 @@
-<?php
+<?php snippet('layout', slots: true) ?>
 /*
  Templates render the content of your pages.
-  They contain the markup together with some control structures
+    <section class="bg-sf_grau-50 py-24">
  like loops or if-statements. The `$page` variable always
  refers to the currently active page.
  To fetch the content from each field we call the field name as a
  method on the `$page` object, e.g. `$page->title()`.
  This default template must not be removed. It is used whenever Kirby
  cannot find a template with the name of the content file.
  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.
  More about templates: https://getkirby.com/docs/guide/templates/basics
 */
 ?>
 <?php
 snippet('header') ?>
 <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
 <?php
 snippet('navbar') ?>
 <section class="bg-sf_grau-50 py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-center mb-8">Vereinssatzung der „Schachfreunde Bad Steben“</h1>
        <section class="mb-6">
@@ -156,8 +130,4 @@ snippet('navbar') ?>
    </div>
 </section>
-<?= js('assets/js/navbar.js') ?>
+<?php endsnippet() ?>
 </body>
 <?php
 snippet('footer') ?>
@@ -1,39 +1,6 @@
-<?php
+<?php snippet('layout', slots: true) ?>
 /*
  Templates render the content of your pages.
-  They contain the markup together with some control structures
+    <?php snippet('titel') ?>
-  like loops or if-statements. The `$page` variable always
+    <?php snippet('termine') ?>
  refers to the currently active page.
-  To fetch the content from each field we call the field name as a
+<?php endsnippet() ?>
  method on the `$page` object, e.g. `$page->title()`.
  This default template must not be removed. It is used whenever Kirby
  cannot find a template with the name of the content file.
  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.
  More about templates: https://getkirby.com/docs/guide/templates/basics
 */
 ?>
 <?php
 snippet('header') ?>
 <body>
 <?php
 snippet('navbar') ?>
 <?php
 snippet('titel') ?>
 <?php
 snippet('termine') ?>
 <?= js('assets/js/navbar.js') ?>
 </body>
 <?php
 snippet('footer') ?>