-
Notifications
You must be signed in to change notification settings - Fork 72
Sample Usage
Let's say we have bootstrap theme in our application with the following structure:
public/
|-- themes/
|-- bootstrap/
|-- theme.json <--- theme manifest file
|-- assets/
|-- css/
|-- bootstrap.css
|-- img/
|-- js/
|-- bootstrap.js
|-- jquery.js
|-- views/
|-- layout.blade.php <--- this is our view layout
|-- auth/
|-- login.blade.php <--- this is our login view
First, we need theme.json manifest file.
{
"slug": "bootstrap",
"name": "Bootstrap",
"author": "Caffeinated",
"description": "Caffeinated bootstrap theme.",
"version": "1.0.0"
}
For our layout view, we need something like these:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Caffeinated Theme Sample</title>
<!-- Bootstrap core CSS -->
<link href="{{ Theme::asset('bootstrap::css/bootstrap.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{ Theme::asset('bootstrap::js/jquery.js') }}"></script>
<script src="{{ Theme::asset('bootstrap::js/bootstrap.js') }}"></script>
</body>
</html>
Please take note that we need to use Theme::asset() to load our theme asset files. The bootstrap is a theme slug defined in our theme.json file.
In our controller, load the view using the following code:
public function getLogin()
{
return Theme::view('auth.login');
}
Now, for our login.blade.php:
@extends('bootstrap::layout')
@section('content')
<h1>Log In</h1>
<form method="POST" action="/auth/login">
{!! csrf_field() !!}
<div>
Email
<input type="email" name="email" value="{{ old('email') }}">
</div>
<div>
Password
<input type="password" name="password" id="password">
</div>
<div>
<input type="checkbox" name="remember"> Remember Me
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
@endsection
Note that we are using @extends('bootstrap::layout') in our login view, where bootstrap is a theme slug defined in our theme.json and layout is our layout file.
Within your theme's manifest file, simply set a parent key to the slug of the parent theme you'd like to inherit.
{
"name": "Darkly",
"description": "Darkly bootstrap theme.",
"author": "Kai",
"version": "1.0.0",
"parent": "bootstrap"
}
Caffeinated Themes will then load any missing view files from the parent theme.