Пример: Моя вторая тема

Contents

    Сейчас мы создадим тему с поддержкой файлов CSS, JavaScript и плагинов.

    Назовем нашу тему, например - Mars.

    Если вы не желаете создавать все постепенно, то вы можете скачать исходные файлы темы Mars theme.

    Структура папок

    Создадим папку с названием темы в папке /bl-themes/; Путь к ней должен выглядеть так: /bl-themes/mars/.

    Далее, создадим папки - languages, css, js.

    • Создайте папку languages внутри папки /bl-themes/mars/
    • Создайте папку css внутри папки /bl-themes/mars/
    • Создайте папку js внутри папки /bl-themes/mars/
    /bl-themes/mars/
        css/
        js/
        language/

    Название и информация о теме

    Создадим файл с информацией о теме. Создадим файл metadata.json в корневой папке темы с содержимым:

    {
        "author": "Bludit",
        "email": "",
        "website": "",
        "version": "1.0",
        "releaseDate": "2019-01-01",
        "license": "MIT",
        "compatible": "3.0",
        "notes": ""
    }

    Создадим файл en.json, который будет содержать название и описание темы. Создадим его в папке /bl-themes/mars/languages/ с содержимым:

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

    Index.php

    Давайте поработаем над файлом index.php; Создайте такой файл в папке /bl-themes/mars/ с содержимым:

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

    CSS файл

    Подключим CSS файл к теме:

    • Используя метод Theme::css()
    • Или используя html tag <link href="..." rel="stylesheet" type="text/css" />
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    </head>
    <body>
    
    </body>
    </html>

    Javascript файл

    Подключим JavaScript файл:

    • Используя метод Theme::js()
    • Или используя html tag <script>...</script>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    </head>
    <body>
    
    </body>
    </html>

    Добавим поддержку плагинов

    Чтобы добавить поддержку плагинов мы будем использовать метод Theme::plugins().

    Hook'и плагинов для сайта таковы:

    • siteHead взаимодействует с тегами <head>...</head> .
    • siteBodyBegin взаимодйствует с тегами <body>...</body>; Вы можете использовать его для приветственного баннера или какой-нибудь панели инструментов в верхней части страницы..
    • siteBodyEnd взаимодйствует с тегами <body>...</body>; Вы можете использовать для вывода, например, JavaScript кода.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- Load plugins with the hook siteHead -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <!-- Here all the rest of HTML code -->
    
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    Лого заголовок и слоган сайта

    Вы можете вызвать настройки для лого, заголовка, слогана из настроек Bludit.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- Load plugins with the hook siteHead -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <img src="<?php echo $site->logo() ?>" alt="" width="128">
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    Где я?

    Давайте поработаем над содержимым сайта.

    Чтобы определить, где сейчас находится пользователь, можно вызвать переменную $WHERE_AM_I.Например, если пользователь просматривает начальную страницу, то переменная выдаст home. Если пользователь просматривает обычную страницу, то переменная выдаст page.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- Load plugins with the hook siteHead -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <?php if ($WHERE_AM_I=='page'): ?>
            <p>The user is watching a particular page</p>
        <?php elseif ($WHERE_AM_I=='home'): ?>
            <p>The user is watching the homepage</p>
        <?php endif ?>
    
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    Основное содержимое

    Если пользователь находится на главной странице, Bludit генерирует глобальный массив $pages в котором находятся все опубликованные страницы. Каждая страница, это объект главной страницы.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- Load plugins with the hook siteHead -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <?php if ($WHERE_AM_I=='page'): ?>
            <p>The user is watching a particular page</p>
        <?php elseif ($WHERE_AM_I=='home'): ?>
            <?php foreach ($content as $page): ?>
                <h3><?php echo $page->title(); ?></h3>
            <?php endforeach ?>
        <?php endif ?>
    
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    В этом примере мы собираемся напечатать заголовок и содержимое.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- Load plugins with the hook siteHead -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <?php if ($WHERE_AM_I=='page'): ?>
            <h3><?php echo $page->title(); ?></h3>
        <?php elseif ($WHERE_AM_I=='home'): ?>
            <?php foreach ($pages as $page): ?>
                <h3><?php echo $page->title(); ?></h3>
            <?php endforeach ?>
        <?php endif ?>
    
        <!-- Load plugins with the hook siteBodyBegin -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>
    Скачать
    Скачать искодный код темы Mars theme.