Laravel. Блог. Установка Laravel и загрузка шаблона

Инсталяция на Open Server.

Открываем консоль Open Server.

Переходим в директорию с сайтами: cd domains

Пишем команду:

composer create-project --prefer-dist laravel/laravel blog.my

После окончания установки перезапустим сервер.

Скачиваем шаблон Clean Blog для блога с сайта: https://startbootstrap.com/template-overviews/clean-blog/

Скачиваем шаблон админки с сайта: https://adminlte.io/

В нашем Laravel проекте создадим папку Raw files и переместим туда наши скаченные шаблоны пользовательской части и админки. Это папки clean blog и admin.

Скопируем их папки clean blog файл index.html и поместим это содержимое в файл: \resources\views\welcome.blade.php

В папке public удаляем папки css и js. Делаем 2 папки user и admin.

Скопируем в папку user папки из нашего шаблона. Это папки css, img, js, vendor.

Теперь подключим все стили через asset.

Метод asset() используется для включения файлов CSS / JavaScript / images.

Подключения выглядят так:

<!-- Bootstrap core CSS -->

<link href="{{ asset('user/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

<!-- Custom fonts for this template -->

<link href="{{ asset('user/vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">

<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<!-- Custom styles for this template -->

<link href="{{ asset('user/css/clean-blog.min.css') }}" rel="stylesheet">

А также подключим js-файлы:

<!-- Bootstrap core JavaScript -->

<script src="{{ asset('user/vendor/jquery/jquery.min.js') }}"></script>

<script src="{{ asset('user/vendor/popper/popper.min.js') }}"></script>

<script src="{{ asset('user/vendor/bootstrap/js/bootstrap.min.js') }}"></script>

<!-- Custom scripts for this template -->

<script src="{{ asset('user/js/clean-blog.min.js') }}"></script>

Теперь подгрузим фоновую картику:

<header class="masthead" style="background-image: url('{{ asset('user/img/home-bg.jpg') }}')">

Разделим страницу на части. В папке \resources\views создадим папку user и в ней папку layouts, в которую положим 3 файла.

head.blade.php

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">

<meta name="author" content="">

<title>Clean Blog - Start Bootstrap Theme</title>

<!-- Bootstrap core CSS -->

<link href="{{ asset('user/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

<!-- Custom fonts for this template -->

<link href="{{ asset('user/vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">

<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<!-- Custom styles for this template -->

<link href="{{ asset('user/css/clean-blog.min.css') }}" rel="stylesheet">

header.blade.php

<!-- Navigation -->

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

<a class="navbar-brand" href="index.html">Start Bootstrap</a>

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

Menu

<i class="fa fa-bars"></i>

</button>

<div class="collapse navbar-collapse" id="navbarResponsive">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link" href="index.html">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="about.html">About</a>

</li>

<li class="nav-item">

<a class="nav-link" href="post.html">Sample Post</a>

</li>

<li class="nav-item">

<a class="nav-link" href="contact.html">Contact</a>

</li>

</ul>

</div>

</nav>

<!-- Page Header -->

<header class="masthead" style="background-image: url('{{ asset('user/img/home-bg.jpg') }}')">

<div class="container">

<div class="row">

<div class="col-lg-8 col-md-10 mx-auto">

<div class="site-heading">

<h1>Clean Blog</h1>

<span class="subheading">A Blog Theme by Start Bootstrap</span>

</div>

</div>

</div>

</div>

</header>

И footer.blade.php

<!-- Footer -->

<footer>

<div class="container">

<div class="row">

<div class="col-lg-8 col-md-10 mx-auto">

<ul class="list-inline text-center">

<li class="list-inline-item">

<a href="#">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x"></i>

<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>

</span>

</a>

</li>

<li class="list-inline-item">

<a href="#">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x"></i>

<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>

</span>

</a>

</li>

<li class="list-inline-item">

<a href="#">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x"></i>

<i class="fa fa-github fa-stack-1x fa-inverse"></i>

</span>

</a>

</li>

</ul>

<p class="copyright text-muted">Copyright &copy; Your Website 2017</p>

</div>

</div>

</div>

</footer>

<!-- Bootstrap core JavaScript -->

<script src="{{ asset('user/vendor/jquery/jquery.min.js') }}"></script>

<script src="{{ asset('user/vendor/popper/popper.min.js') }}"></script>

<script src="{{ asset('user/vendor/bootstrap/js/bootstrap.min.js') }}"></script>

<!-- Custom scripts for this template -->

<script src="{{ asset('user/js/clean-blog.min.js') }}"></script>

И подключим эти части в файле welcome.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
@include('user/layouts/head')
</head>

<body>

@include('user/layouts/header')

<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 24, 2017</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 18, 2017</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on August 24, 2017</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on July 8, 2017</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-secondary float-right" href="#">Older Posts &rarr;</a>
</div>
</div>
</div>
</div>

<hr>

@include('user/layouts/footer')

</body>

</html>

Подключения выглядят так: @include('view.name')