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

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.
    Collaborate with us and edit this page