HTML Theme Conversion in Laravel

This article will talk about theme conversion in Laravel in the field of web development. Well, the theme conversion is an easy approach to convert your theme based website in the Laravel framework.
Laravel provides the modularity and testability approach to develop the web application with configuration and schema management.

What are the website themes?

Well, your website theme is overall look, style, and feel of your web application. The theme includes layout, color scheme and style elements. In short, your website theme is a direct representation of your web and has a direct impact on your users.

HTML Theme conversion in Laravel

You have to follow some basic steps to convert your HTML theme to the Laravel framework

Step 1 – Make assets files to a public folder in Laravel

Basically, you need to copy all the assets files like CSS, Fonts, Images, Jquery files in the public folder in your Laravel.

Step 2 – Make a new Controller

The next step is you have to create a new controller in your Controllers file.

Class ThemeController extends Controller
{

    //

}

Step 3 – Make all required methods with controllers

Once you create the controller the next step would be to create the required methods in that controller class.
Example Home, Features, Contact, About, Portfolio

Class ThemeController extends Controller
{

    public function home()
    {
      return view("html.home");
    }
    public function AboutUs()
    {
      return view("html.about");
    }
   public function Portfolio()
    {
      return view("html.portfolio");
    }

}

Step 4 – Views Folder Structure

Create the folder with any name in your layout let’s say HTML and create the different views files in that folder.

Example home.blade.php, contact.blade.php, portfolio.blade.php, about.blade.php

Step 5 – Make a fixed layout for the website

Once, all the methods defined in controller class the next step would be to fix the layout of your page.
Now in about.blade.php file extends the layout of your theme by writing the code
@extends(“layout.html”);
Here in this code layout, is a folder name and HTML is the index file name of your theme.

@extends("layout.html")
@section("title","about")
@section("about")
//code
@endsection

Here, the section keyword is used for the section part which we want to execute in the about page and copy the code of about section from your index theme and don’t forgot to end the section in last.

Step – 6 Configure Routes file in your Laravel

The last step is to configure your route file
Example
Route::get(“about”,”ThemeController@AboutUs”);

Route::get("home",ThemeController@home);
Route::get("about",ThemeController@AboutUs);
Route::get("portfolio",ThemeController@Portfolio);

Now just fixed other layout same as about page and configure the route file.

Sharing is caring!