Custom CMS Pages

Twill includes the ability to create fully custom pages that includes your navigation, by extending the twill::layouts.free layout in a view located in your resources/views/admin folder.

Example

Create a route in routes/twill.php

1Route::name('customPage')->get('/customPage', 'CustomPageController@show');

Add a link to your page in config/twill-navigation.php

1return [
2    ...
3    'customPage' => [
4        'title' => 'Custom page',
5        'route' => 'admin.customPage',
6    ],
7    ...
8];

Add a controller to handle the request

 1// file: app/Http/Controllers/Twill/CustomPageController.php
 2 
 3namespace App\Http\Controllers\Twill;
 4 
 5use A17\Twill\Http\Controllers\Admin\Controller;
 6 
 7class CustomPageController extends Controller
 8{
 9    public function show()
10    {
11        return view('twill.customPage');
12    }
13}

And create the view

1// file: resources/views/twill/customPage.blade.php
2 
3@extends('twill::layouts.free')
4 
5@section('customPageContent')
6  CUSTOM CONTENT GOES HERE
7@stop

You can use Twill's Vue components if you need on those custom pages, for example:

 1@extends('twill::layouts.free')
 2 
 3@section('customPageContent')
 4  <a17-fieldset>
 5    <a17-textfield name="input1" label="Text input"></a17-textfield>
 6    <a17-textfield name="input2" label="Text input with note" note="Side note"></a17-textfield>
 7    <a17-wysiwyg name="input3" label="WYSIWYG input with note" note="Side note"></a17-wysiwyg>
 8    <div class="wrapper">
 9      <div class="col--double col--double-wrap">
10        <a17-wysiwyg name="input4" label="WYSIWYG input with note" note="Side note"></a17-wysiwyg>
11      </div>
12      <div class="col--double col--double-wrap">
13        <a17-wysiwyg name="input5" label="WYSIWYG input with note" note="Side note"></a17-wysiwyg>
14      </div>
15    </div>
16    <a17-inputframe label="Media field" note="Side note">
17      <a17-mediafield name="input6"></a17-mediafield>
18    </a17-inputframe>
19    <a17-inputframe label="Browser field" note="Side note">
20      <a17-browserfield name="input7" endpoint="/content/voices/browser"></a17-browserfield>
21    </a17-inputframe>
22  </a17-fieldset>
23  <a17-button variant="validate" v-on:click="alert('from Twill Vue button');">Button variant: validate</a17-button>
24@stop

Custom CMS Pages

# Example

Example