Пример: Моя вторая тема
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>