FusionCMS

Views contain the HTML served by your theme and the rendered data from the CMS to the frontend. Views are stored in the resources/views directory. There are three main types of views we will use in theme development: layouts, templates and partials. We highly recommend categorizing your view files into subdirectories for each of these view types for easy maintenance and organization.

Since FusionCMS relied upon the Blade templating engine for theming, you can find additional information on Blades Template Inheritance structure through Laravels documentation.

Layouts

Layouts are base page structure or wrappers around page content. These files contain the main HTML structure of the page as a whole, like the doctype, <head> and <body>. This would also include other structures and elements you would want included on every page of your website, like the site navigation, header or footer. A standard convention is to have a "default" layout view which would reside in resources/views/layouts/default.blade.php as your main layout, but a theme may have any number of unique layout files as needed. Example layout:

<!doctype html>
<html>
  <head>
      <title>@yield('title') - {{ setting('system.website_title') }}</title>
      <link rel="stylesheet" href="/theme/css/theme.css" media="screen">
  </head>
  <body>
      @include('partials.header')

      @yield('content')

      @include('partials.footer')
      <script src="/theme/js/theme.js"></script>
  </body>
</html>

@yield

Take note of the @yield directives used in the layout above. This directive defines areas of the layout where additional content may be inserted into the file.

Templates will utilize these areas to add unique content per page to the layout with use of the @section directive. The @section directive, as the name implies, defines a section of content, while the @yield directive is used to display the contents of a given section. You can learn more about sections under template views below.

@yield('content')

In this case of our example layout, page content will appear where the @yield('content') directive is placed. As another example, we've created a yield('title') section up in the page <head>, allowing you to define a unique title per page through the template.

Adding a second parameter to a yield will act as the default value.

@yield('title', setting('system.website_title'))

@hasSection

The @hasSection directive can be used as a conditional check for a yield

@hasSection('title')
  <title>@yield('title')</title>
@else
  <title>{{ setting('system.website_title') }} - {{ setting('system.website_slogan') }}</title>
@endif

Templates

Templates are view files assigned to specific pages or collections via the matrix configuration. Layouts can be assigned to templates with the @extends() directive. Simply include this directive at the top of the template specifying the path & name of the layout file:

@extends('layouts.default')

This will utilize the default.blade.php view from the resources/views/layouts folder.

@section

Use the @section directive to extend content from the template into @yield areas on the assigned layout.

@extends('layouts.default')

@section('title', 'Homepage')

@section('content')
    <h1>This is my homepage</h1>
  <p>I hope you enjoy my website</p>
@endsection

Here, we have included two @section areas as per the extended layout. The content of these sections will be displayed in the layout to the relevant @yield area. Note how content can extended by the @section directive in different ways:

// Open & close section tags for blocks of HTML markup
@section('content')
  <div>
    <h1>{{ $title }}</h1>
  </div>
@endsection

// Inline for simple values
@section('title', 'My Page Title')

Partials

Partials are reusable views that can be rendered on other views. We'll refer to anything that is not a layout or a template as a partial, though they can also be thought of as includes, embeds or subviews.

Partials can be helpful in setting up dynamic and reusable page components. There are several different ways to render partials in your views. Full documentation can be found through Laravel docs under Including Subviews.

@include

The @include directive allows you to include a partial view from within any other view. All variables that are available to the parent view will be made available to the included view.

@include('partials.card')

This will fetch and render the HTML from card.blade.php in the partials folder.

Even though the included view will inherit all data available in the parent view, you may also pass an array of extra data to the included view.

@include('partials.card', ['data' => 'something'])

The extra data passed through to this component can be accessed via a $data variable in the view file. You can set up as many data variables on a partial as you like to include extra data.

@include('partials.card', [
    'title'   => 'My First Parial',
    'content' => 'Learning how to use partials'
])

Here, a $title and $content variable will be available on the partial to render the additional data.

@includeIf

If you attempt to @include a view which does not exist, the CMS will throw an error. If you would like to include a view that may or may not be present, you should use the @includeIf directive:

@includeIf('partials.card', ['data' => 'something'])

@includeWhen

If you would like to @include a view if a given boolean expression evaluates to true, you may use the @includeWhen directive:

@includeWhen($boolean, 'partials.card', ['data' => 'something'])

@includeUnless

If you would like to @include a view if a given boolean expression evaluates to false, you may use the @includeUnless directive:

@includeUnless($boolean, 'partials.card', ['data' => 'something'])

Views