Beispiel: Mein zweites Theme

Contents

    1. Verzeichnisstruktur

    Jetzt erstellen wir die Verzeichnisstruktur für das Theme. Dieses nennen wir Mars. Erstelle das Theme-Verzeichnis im Verzeichnis /bl-themes/, in unserem Fall /bl-themes/mars/.

    Jetzt erstellen wir die Unterverzeichnisse languages, css und js:

    • Erstelle das Verzeichnis languages im Theme-Verzeichnis /bl-themes/mars/
    • Erstelle das Verzeichnis css im Theme-Verzeichnis /bl-themes/mars/
    • Erstelle das Verzeichnis js im Theme-Verzeichnis /bl-themes/mars/

    Die Verzeichnisstruktur sollte jetzt so aussehen:

    /bl-themes/mars/
    css/
    js/
    language/

    2. Themeinformationen

    Erstelle eine Datei mit dem Namen metadata.json im Theme-Verzeichnis und dem folgenden Inhalt:

    {
    "author": "Bludit",
    "email": "",
    "website": "",
    "version": "1.0",
    "releaseDate": "2017-10-10",
    "license": "MIT",
    "compatible": "2.0",
    "notes": ""
}

    Jetzt erstelle eine Datei en.json im Verzeichnis /bl-themes/mars/languages/ mit folgendem Inhalt:

    {
    "theme-data":
    {
        "name": "Mars",
        "description": "This is my second theme for Bludit."
    }
}

    3. index.php

    Jetzt arbeiten wir an der Datei index.php. Erstelle diese im Theme-Verzeichnis /bl-themes/mars/ mit folgendem Inhalt:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

</body>
</html>

    3.1. CSS Dateien

    CSS-Dateien können einfach in das Theme eingebunden werden. Dies kann über das Tag link geschehen oder über den Bludit-Helper Theme::. Nachfolgend verwenden wir zweiteres und fügen die Datei blog.css in das Theme ein.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>
</head>
<body>

</body>
</html>

    3.2. JavaScript Dateien

    JavaScript-Dateien können einfach in das Theme eingebunden werden. Dies kann über das Tag link geschehen oder über den Bludit-Helper Theme::. Nachfolgend verwenden wir zweiteres und fügen die Datei blog.js in das Theme ein.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>
</head>
<body>

</body>
</html>

    3.3. Plugins mit dem hook siteHead

    Damit Plugins funktionieren müssen Hooks mit dem Helper Theme::plugins gesetzt werden. Nachfolgend setzen wir den Hook für die Plugins, die bei den SiteHeads ausgeführt werden sollen.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>

    <!-- Load plugins with the hook siteHead -->
    <?php Theme::plugins('siteHead') ?>
</head>
<body>

</body>
</html>

    3.4. Seitentitel

    Der Seitentitel wird in den Bereichen Head und Body gesetzt.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Meta tag Title -->
    <title><?php echo $Site->title() ?></title>

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>

    <!-- Load plugins with the hook siteHead -->
    <?php Theme::plugins('siteHead') ?>
</head>
<body>
    <!-- Site Title -->
    <h1><?php echo $Site->title() ?></h1>
</body>
</html>

    3.5. Inhalt

    Jetzt fügen wir Beitragsinhalte auf der Seite ein.

    Um zu ermitteln auf welcher Seite der User sich gerade befindet kann die Variable $WHERE_AM_I verwendet werden. Wenn der User zum Beispiel eine Seite (einen Inhalt) ansieht, hat die Variable $WHERE_AM_I den Wert page, befindet sich der User auf der Startseite ist der Wert home.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Meta tag Title -->
    <title><?php echo $Site->title() ?></title>

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>

    <!-- Plugins site head -->
    <?php Theme::plugins('siteHead') ?>
</head>
<body>
    <!-- Site Title -->
    <h1><?php echo $Site->title() ?></h1>

    <?php
        if ($Url->whereAmI()=='home') {
            echo 'The user is browsing the front page';
        }
        elseif ($Url->whereAmI()=='page') {
            echo 'The user is browsing a particular page';
        }
        elseif ($Url->whereAmI()=='category') {
            echo 'The user is browsing a particular category';
        }
        elseif ($Url->whereAmI()=='tag') {
            echo 'The user is browsing a particular tag';
        }
    ?>
</body>
</html>

    Befindet sich der User auf der Startseite generiert Bludit ein Array $pages mit allen veröffentlichten Seiten. Jede Seite ist hierbei ein Seiten Objekt.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Meta tag Title -->
    <title><?php echo $Site->title() ?></title>

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>

    <!-- Plugins site head -->
    <?php Theme::plugins('siteHead') ?>
</head>
<body>
    <!-- Site Title -->
    <h1><?php echo $Site->title() ?></h1>

    <?php
        if ($Url->whereAmI()=='home') {
            foreach ($pages as $Page) {
                echo '<h1>'.$Page->title().'</h1>';
                echo '<div>'.$Page->content().'</div>';
                echo '<hr>';
            }
        }
        elseif ($Url->whereAmI()=='page') {
            echo 'The user is browsing a particular page';
        }
        elseif ($Url->whereAmI()=='category') {
            echo 'The user is browsing a particular category';
        }
        elseif ($Url->whereAmI()=='tag') {
            echo 'The user is browsing a particular tag';
        }
    ?>
</body>
</html>

    Sieht sich der User eine bestimmte Seite an, generiert Bludit ein Objekt mit dem Namen $Page, die viele Methoden zur Verfügung stellt. In unserem Beispiel verwenden wir die Methoden title() und content(). Um die anderen Methoden kennen zu lernen schau dir die folgende Seite an: Page Object

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Meta tag Title -->
    <title><?php echo $Site->title() ?></title>

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>

    <!-- Plugins site head -->
    <?php Theme::plugins('siteHead') ?>
</head>
<body>
    <!-- Site Title -->
    <h1><?php echo $Site->title() ?></h1>

    <?php
        if ($Url->whereAmI()=='home') {
            foreach ($pages as $Page) {
                echo '<h1>'.$Page->title().'</h1>';
                echo '<div>'.$Page->content().'</div>';
                echo '<hr>';
            }
        }
        elseif ($Url->whereAmI()=='page') {
            echo '<h1>'.$Page->title().'</h1>';
            echo '<div>'.$Page->content().'</div>';
        }
        elseif ($Url->whereAmI()=='category') {
            echo 'The user is browsing a particular category';
        }
        elseif ($Url->whereAmI()=='tag') {
            echo 'The user is browsing a particular tag';
        }
    ?>
</body>
</html>

    3.6. Plugin Unterstützung für die Hooks 'site body begins' und 'site body ends'

    Um unser Theme fertigzustellen fügen wir noch die Funktionen für Plugins hinzu.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Meta tag Title -->
    <title><?php echo $Site->title() ?></title>

    <!-- CSS -->
    <?php echo Theme::css('css/blog.css') ?>

    <!-- Javascript -->
    <?php echo Theme::javascript('js/blog.js') ?>

    <!-- Plugins site head -->
    <?php Theme::plugins('siteHead') ?>
</head>
<body>
    <!-- Plugins site body begin -->
    <?php Theme::plugins('siteBodyBegin') ?>

    <!-- Site Title -->
    <h1><?php echo $Site->title() ?></h1>

    <?php
        if ($Url->whereAmI()=='home') {
            foreach ($pages as $Page) {
                echo '<h1>'.$Page->title().'</h1>';
                echo '<div>'.$Page->content().'</div>';
                echo '<hr>';
            }
        }
        elseif ($Url->whereAmI()=='page') {
            echo '<h1>'.$Page->title().'</h1>';
            echo '<div>'.$Page->content().'</div>';
        }
        elseif ($Url->whereAmI()=='category') {
            echo 'The user is browsing a particular category';
        }
        elseif ($Url->whereAmI()=='tag') {
            echo 'The user is browsing a particular tag';
        }
    ?>

    <!-- Plugins site body end -->
    <?php Theme::plugins('siteBodyEnd') ?>

</body>
</html>
    Beispiele
    Wir haben ein Github-Repository mit Beispielen, welches du unter folgendem Link findest: Bludit Theme Beispiele.
    Collaborate with us and edit this page