Appearance
Layouts
JetShip offers two different layout options to help you structure your application: App Layout and Blank Layout. These layouts are designed to cater to different types of pages, ensuring consistency and flexibility throughout your project.
1. App Layout
The App Layout is the default layout used for most pages in your application. It includes a navbar, footer, and space for the main content of the page. This layout is perfect for general pages where navigation and branding elements should always be present.
blade
<x-layouts.app>
<!-- Your page content goes here -->
</x-layouts.app>
2. Blank Layout
The Blank Layout, as its name suggests, provides a completely empty canvas with no pre-built elements like a navbar or footer. This layout is ideal for pages where you need full control over the content area, such as authentication pages (Login, Register), error pages (404, 500), or any standalone page where the usual UI elements are not needed.
blade
<x-layouts.blank>
<!-- Your page content goes here -->
</x-layouts.blank>
TIP
The Blank Layout is especially useful for focused or minimalistic pages, where displaying navigation might distract users (e.g., during login or error handling).
By using the appropriate layout for your pages, you can keep your UI consistent and well-structured. For most of your application’s pages, the App Layout will serve as the default structure, while the Blank Layout will be used for specialized pages that require minimal interface elements.
Using Stacks in Layout
In each layout, we have defined two stacks: head and scripts. These stacks allow you to inject specific content into predefined sections of your layout, such as adding content to the <head> or placing JavaScript at the bottom of the page inside <body>.
How to Use Stacks?
If you need to add custom CSS to the <head> section, you can use the @push('head') directive like this:
blade
@push('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css" />
@endpushSimilarly, to place JavaScript code at the bottom of the body, you use the @push('scripts') directive. Here's an example:
blade
@push('scripts')
<script>
console.log('This is a test script');
</script>
@endpushThis ensures that your script will be included at the bottom of the body tag in the layout.