Ein Theme von Hand #

Teil 6, Kapitel 4. Der Assistent des vorigen Kapitels ist schnell; ein Theme einmal von Hand zu schreiben lehrt Sie, wozu jede Datei da ist. Dieses Kapitel baut mytheme, das kleinste Theme, das eine ganze Website verändert, in sechs Dateien. Jedes Beispiel wurde geprüft: Das Pagelayout wurde durch die Template-Engine dargestellt, und die INI-Abschnitte und Einstellungen gibt es in design.ini und site.ini des Kernels.

Die Dateien #

extension/mytheme/
  ezinfo.php
  extension.xml
  settings/design.ini.append.php
  settings/siteaccess/mysite/site.ini.append.php
  design/mytheme/templates/pagelayout.tpl
  design/mytheme/stylesheets/mytheme.css

Ersetzen Sie mysite durch den Namen Ihres öffentlichen Siteaccess.

1. Wer Sie sind: ezinfo.php und extension.xml #

Schreiben Sie sie so, wie ezinfo.php und extension.xml es beschreiben: ein lesbarer Name, Version 1.0.0, Ihr Copyright, die Lizenz, eine Website.

2. Das Design registrieren: settings/design.ini.append.php #

<?php /* #?ini charset="utf-8"?

[ExtensionSettings]
DesignExtensions[]=mytheme

[StylesheetSettings]
FrontendCSSFileList[]=mytheme.css

*/ ?>

DesignExtensions[] fügt extension/mytheme/design/ zu den Ordnern hinzu, in denen nach Designs gesucht wird. FrontendCSSFileList[] nennt das Stylesheet, das das Pagelayout laden soll.

3. Das Design verwenden: die site.ini des Siteaccess #

settings/siteaccess/mysite/site.ini.append.php:

<?php /* #?ini charset="utf-8"?

[DesignSettings]
SiteDesign=mytheme
AdditionalSiteDesignList[]
AdditionalSiteDesignList[]=base

*/ ?>

SiteDesign wird zuerst durchsucht, dann die Designs aus AdditionalSiteDesignList[], zuletzt das StandardDesign des Kernels (standard). Die leere Zeile AdditionalSiteDesignList[] leert, was der Siteaccess vorher hatte, sodass die Liste genau das enthält, was Sie geschrieben haben. Mehr dazu in Themes und Siteaccesses.

4. Der Rahmen: design/mytheme/templates/pagelayout.tpl #

<!DOCTYPE html>
<html lang="{ezini( 'RegionalSettings', 'ContentObjectLocale' )|extract_left( 2 )|wash}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{ezini( 'SiteSettings', 'SiteName' )|wash}</title>
{ezcss_load( ezini( 'StylesheetSettings', 'FrontendCSSFileList', 'design.ini' ) )}
</head>
<body class="mytheme">
<header class="mytheme-header">
  <a class="mytheme-logo" href={'/'|ezurl}>{ezini( 'SiteSettings', 'SiteName' )|wash}</a>
</header>
<main id="content" class="mytheme-content">
{$module_result.content}
</main>
<footer class="mytheme-footer">
  <p>{currentdate()|datetime( 'custom', '%Y' )} {ezini( 'SiteSettings', 'SiteName' )|wash}</p>
</footer>
{ezscript_load( array( 'ezjsc::jquery', ezini( 'JavaScriptSettings', 'FrontendJavaScriptList', 'design.ini' ) ) )}
</body>
</html>

Was jeder Teil tut:

Jeder Wert, der in HTML ausgegeben wird, läuft durch wash.

Hinweis Außerhalb einer echten Anfrage dargestellt, gibt dieses Pagelayout alles außer dem Inhalt aus, und die Template-Engine meldet, dass $module_result unbekannt ist. Bei einer Seitenanfrage setzt der Kernel die Variable.

5. Das Aussehen: design/mytheme/stylesheets/mytheme.css #

:root {
    --mytheme-ink: #1f2328;
    --mytheme-surface: #ffffff;
    --mytheme-accent: #0b6bcb;
    --mytheme-space: 1rem;
}
body.mytheme { margin: 0; color: var(--mytheme-ink); background: var(--mytheme-surface); font-family: system-ui, sans-serif; }
.mytheme-header, .mytheme-footer { padding: var(--mytheme-space); }
.mytheme-content { max-width: 60rem; margin: 0 auto; padding: var(--mytheme-space); }
.mytheme-logo { color: var(--mytheme-accent); font-weight: 700; text-decoration: none; }

Zuerst die Variablen: Das Kapitel Dunkler Modus und Design-Tokens in Themes baut auf ihnen auf.

6. Einschalten und ansehen #

./console exp:ini add 'site.ini/ExtensionSettings/ActiveExtensions[]' mytheme global
php bin/php/ezcache.php --clear-all

Öffnen Sie die Website: Ihr Kopfbereich, der Inhalt wie zuvor, Ihre Fußzeile, Ihre Farben. Jede Inhaltsseite verwendet innerhalb Ihres Rahmens weiterhin die Templates von base und standard. Ersetzen Sie sie von hier aus eines nach dem anderen (Ein Theme mit dem RAD-Assistenten, Abschnitt „Vom Gerüst zum Theme“).

Prüfen, welches Template verwendet wurde #

Schalten Sie für Ihren Entwicklungs-Siteaccess das Template-Debugging ein (site.ini [TemplateSettings] ShowUsedTemplates=enabled bei eingeschalteter Debug-Ausgabe). Die Debug-Ausgabe listet dann jedes Template auf, das die Seite verwendet hat, und das Design, aus dem es stammt (Templates debuggen).

Verwandte Seiten #

• Zurück: Ein Theme mit dem RAD-Assistenten
• Weiter: Themes und Siteaccesses
• Die Design-Kette
• Siteaccess-Einstellungen
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.