Create New Page
How to add a New Page:
- Create New View with
blade.phpextenstion. - Create Controller for different methods related to page. (Optional. You can use default controller also.)
- Set Path in
routes/web.phpfile to serve the page on the browser. -
Add page link to
resources/views/layouts/sidebar.blade.phpfor vertical menu -
Add page link to
resources/views/layouts/header.blade.phpfor Horizontal menu -
Add page name to
resources/lang/en{all language folder}/translation.phpfile to display in multi language.
Steps to add a new page :
-
Step 1: Create a file with the
test.blade.phpunder theresources/viewsdirectory. Let's create a testPage for an example with filename test.blade.php and placing the below code in that file. -
Step 2: To add new controller, use below command :
php artisan make:controller {ControllerName} {-r}
To change breadcrumbs :
@component('components.breadcrumb')
@slot('li_1') Vuesy @endslot
@slot('title') Test Page @endslot
@endcomponent
-
Step 3: After creating file and controller you need to declare its route where it can be served on the browser, suppose you want created page to be serve on the route http://localhost:8000/test . To access this page define its routes in the
resources/web.phpfile.
Route::get('/test', function () { return view('test'); }); -
Step 4: After defining the route, add page link to sidebar at
option 1: To add item in menu.resources/views/layouts/sidebar.blade.phpfile. or add also inresources/views/layouts/header.blade.php
<a href="test" class="dropdown-item" key="t-test">@lang('translation.Test')</a>
-
Step 6: Add page name to
resources/lang/en{all language folder}/translation.phpfile to display in multi language.
"Test" => "Test"
@extends('layouts.master')
@section('title') @lang('translation.Test') @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Vuesy @endslot
@slot('title') Test Page @endslot
@endcomponent
<div>
.........
</div>
@endsection
Custom Css for User
We have provided custom scss files for user to override themes styles and variable.
Folder Structure
├── resources
├── scss
├── custom
├── components
├── fonts
├── pages
├── plugins
├── structure
_theme-dark.scss
_theme-light.scss
_variables.scss
app.scss
bootstrap.scss
icons.scss
- We have provided
app.scssfor user override. - Also, we have provided
theme-dark.scssfor Dak version specific style. - You can override bootstrap variable in
_variable.scssfile. -
We have also provided a
app.jsfile. You can write your custom script here and it won't be overridden in our future release.
Multi Language Settings
Lets add french language.
- Create new file translation.php in the fr folder in the
resources/langfolder and add the below code.<?php // translation.php return [ 'Test' => 'Test' ]; - You need to add the new language option in the topbar
resounrces/views/layouts/header.blade.php. Make sure to add it flag image and option in the dropdown.
After completing these above steps you need to run the command npm run dev
command in the project directory. After running this process you need
to run the command php artisan serve . It will serve your app on the localhost.