Templates anpassen

Du kannst den Quellcode deiner Webseite anpassen. Demo anschauen.

Templates

Templates erzeugen den Quellcode deiner Webseite. Das Standardtemplate wird in den Systemeinstellungen festgelegt. Eine anderes Template lässt sich in den Einstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Template: default.

Snippets sind die Bausteine deiner Webseite. Es sind kleine Stücke HTML und PHP. Du kannst alles in ein Template schreiben, aber es ist häufig praktischer ein Template in mehrere Snippets aufzuteilen und wiederzubenutzen. Mache was am Besten für dich funktioniert.

Template anpassen

Das Template legt fest welche Snippets benutzt werden. Um den Quellcode deiner Webseite anzupassen, ändere das Template oder die entsprechenden Snippets. Du kannst auch ein neues Template anlegen, zum Beispiel Template: custom.

Hier ist eine Beispiel-Templatedatei system/themes/templates/custom.html:

<?php $yellow->snippet("header") ?>
<?php $yellow->snippet("content-custom") ?>
<?php $yellow->snippet("footer") ?>

Hier ist eine Beispiel-Snippetdatei system/themes/snippets/content-custom.php:

<div class="content">
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
</div>
</div>

Hier ist ein Beispiel-Snippet um den Seiteninhalt und zusätzliche Metadaten anzuzeigen:

<div class="content">
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
<p><?php echo $yellow->page->getHtml("author") ?></p>
</div>
</div>

Hier ist ein Beispiel-Snippet um die neusten Blogseiten anzuzeigen:

<?php $pages = $yellow->pages->index()->filter("template", "blog")->sort("published", false)->limit(5) ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<?php $yellow->page->setHeader("Cache-Control", "max-age=60") ?>
<div class="content">
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
<?php foreach($pages as $page): ?>
<h3><a href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getDateHtml("published") ?> &nbsp; <?php echo $page->getHtml("title") ?></a></h3>
<?php endforeach ?>
</div>
</div>

Oben befindet sich der Header mit der Navigation. Die Standardnavigation wird in den Systemeinstellungen festgelegt. Eine andere Navigation lässt sich in den Einstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Navigation: navigation.

Die folgenden Navigationen sind vorhanden:

Navigation: navigation zeigt Hauptseiten
Navigation: navigation-tree zeigt alle Seiten
Navigation: navigation-sidebar zeigt Unterseiten
Navigation: navigation-search zeigt Suchzeile vom Search-Plugin

Hier ist eine Beispiel-Snippetdatei system/themes/snippets/navigation.php:

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
</ul>
</div>
<div class="navigation-banner"></div>

Hier ist ein Beispiel-Snippet um zusätzliche Links in der Navigation anzuzeigen:

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
<li><a href="https://twitter.com/datenstromse">Twitter</a></li>
<li><a href="https://github.com/datenstrom">GitHub</a></li>
<li><a href="https://instagram.com/datenstromse">Instagram</a></li>
</ul>
</div>
<div class="navigation-banner"></div>

Hier ist ein Beispiel-Snippet um Icons und Symbole in der Navigation anzuzeigen:

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
<li><a href="https://twitter.com/datenstromse"><i class="fa fa-twitter fa-lg"></i></a></li>
<li><a href="https://github.com/datenstrom"><i class="fa fa-github fa-lg"></i></a></li>
<li><a href="https://instagram.com/datenstromse"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
<div class="navigation-banner"></div>

Fußzeile anpassen

Unten befindet sich die Fußzeile. Um die Fußzeile anzupassen, ändere das entsprechende Snippet. Das Template legt fest welche Snippets benutzt werden. Du kannst entweder das vorhandene Snippet ändern oder ein neues Snippet anlegen.

Hier ist eine Beispiel-Snippetdatei system/themes/snippets/footer.php:

<div class="footer">
<div class="siteinfo">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Erstellt mit Yellow</a>.
</div>
</div>
</div>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>

Hier ist ein Beispiel-Snippet um zusätzliche Links in der Fußzeile anzuzeigen:

<div class="footer">
<div class="siteinfo">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->base."/sitemap/" ?>">Sitemap</a>.
<a href="<?php echo $yellow->page->base."/feed/page:feed.xml" ?>">Feed</a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Erstellt mit Yellow</a>.
</div>
</div>
</div>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>

Hier ist ein Beispiel-Snippet um die Fußzeile in Links und Rechts aufzuteilen:

<div class="footer">
<div class="siteinfo">
<div class="siteinfo-left">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
</div>
<div class="siteinfo-right">
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Erstellt mit Yellow</a>.
</div>
<div class="siteinfo-banner"></div>
</div>
</div>
</div>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>

Um eine Sidebar anzuzeigen, erstelle die Datei sidebar.txt in einem content-Verzeichnis. Die Sidebar wird auf allen Seiten im gleichen Verzeichnis angezeigt. Eine andere Sidebar lässt sich in den Einstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Sidebar: sidebar.

Hier ist eine Beispiel-Sidebar-Datei content/1-home/sidebar.txt:

---
Title: Sidebar
Status: hidden
---
Links

* [Twitter](https://twitter.com/datenstromse)
* [GitHub](https://github.com/datenstrom)
* [Instagram](https://instagram.com/datenstromse)

Weiter: API für Entwickler →