Tenho 2 rotas que estão escritas assim:
Route::get('/blog', 'BlogController@post')->name('blog');
Route::get('/blog/detalhes-post', 'BlogController@detalhespost')->name('detalhes-post');
Quando chamo apenas /blog ta funcionando e carregando a view corretamente. Mas quando chamo a /blog/detalhes-post esta suprimindo alguns CSS e JS. Parece que por herdar da /blog entra em conflito.
Se eu mudar a rota e chamar apenas /detalhes-post ai carrega normal também.
O CSS está no template topo.blade.php
<head>
<link rel="stylesheet" id="brk-direction-bootstrap" href="{{URL::asset('css/assets/bootstrap.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" id="brk-skin-color" href="{{URL::asset('css/skins/brk-purple.css')}}">
<link id="brk-base-color" rel="stylesheet" href="{{URL::asset('css/skins/brk-base-color.css')}}">
<link rel="stylesheet" id="brk-direction-offsets" href="{{URL::asset('css/assets/offsets.css')}}">
<link id="brk-css-min" rel="stylesheet" href="{{URL::asset('css/assets/styles.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/revslider/css/settings.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/swiper/css/swiper.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/shape-box.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/lists.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/tables.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/widgets.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/breadcrumbs.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/shop-components-row.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/shop-components-item-sidebar.css')}}">
<link rel="stylesheet" href="{{URL::asset('css/components/alerts.css')}}">
<link rel="stylesheet" href="{{URL::asset('node_modules/bootstrap/scss/_reboot.scss')}}">
<link rel="stylesheet" id="brk-direction-offsets" href="{{URL::asset('css/assets/offsets.css')}}">
<style> #rev_slider_12_1_wrapper .tp-loader.spinner2{ background-color: #0071fc !important; } </style>
Os JS estão no rodape.blade.php
<script defer="defer" src="{{URL::asset('js/scripts.min.js')}}"></script>
Os arquivos estão na pasta public. Um diretório para css e um para js
Na view chamo eles assim:
@extends('templates.conteudo-blog')
@section('content')
Ai vem o html da página
e fecho assim:
@endsection
a parte de Conteúdo está assim:
@include('templates.topo-blog')
@yield('content')
@include('templates.rodape-blog')
HTML que carrega direito
<!DOCTYPE html>
<html lang="en" data-brk-skin="brk-purple.css">
<head>
<title>Blog - Se Prepare Bem</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device- width,height=device-height,initial-scale=1,maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" href="http://localhost/SePrepareBem/public/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="http://localhost/SePrepareBem/public/favicon.ico">
<meta name="theme-color" content="#2775FF">
<meta name="keywords" content="themeforest, theme, html, template">
<meta name="description" content="themeforest, theme, html, template">
<link rel="stylesheet" id="brk-direction-bootstrap" href="http://localhost/SePrepareBem/public/css/assets/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" id="brk-skin-color" href="http://localhost/SePrepareBem/public/css/skins/brk-purple.css">
<link id="brk-base-color" rel="stylesheet" href="http://localhost/SePrepareBem/public/css/skins/brk-base-color.css">
<link rel="stylesheet" id="brk-direction-offsets" href="http://localhost/SePrepareBem/public/css/assets/offsets.css">
<link id="brk-css-min" rel="stylesheet" href="http://localhost/SePrepareBem/public/css/assets/styles.min.css">
</head>
<body>
<div class="brk-header-mobile">
<div class="brk-header-mobile__open brk-header-mobile__open_white">
<span></span>
</div>
<div class="brk-header-mobile__logo">
<a href="#">
<img class="brk-header-mobile__logo-1 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://localhost/SePrepareBem/public/img/logo-se-prepare-bem.png" alt="alt">
<img class="brk-header-mobile__logo-2 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://localhost/SePrepareBem/public/img/logo-se-prepare-bem.png" alt="alt">
</a>
</div>
</div>
Parte do conteúdo que NÃO funciona
<!DOCTYPE html>
<html lang="en" data-brk-skin="brk-purple.css">
<head>
<title>Blog - Se Prepare Bem</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" href="http://localhost/SePrepareBem/public/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="http://localhost/SePrepareBem/public/favicon.ico">
<meta name="theme-color" content="#2775FF">
<meta name="keywords" content="themeforest, theme, html, template">
<meta name="description" content="themeforest, theme, html, template">
<link rel="stylesheet" id="brk-direction-bootstrap" href="http://localhost/SePrepareBem/public/css/assets/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" id="brk-skin-color" href="http://localhost/SePrepareBem/public/css/skins/brk-purple.css">
<link id="brk-base-color" rel="stylesheet" href="http://localhost/SePrepareBem/public/css/skins/brk-base-color.css">
<link rel="stylesheet" id="brk-direction-offsets" href="http://localhost/SePrepareBem/public/css/assets/offsets.css">
<link id="brk-css-min" rel="stylesheet" href="http://localhost/SePrepareBem/public/css/assets/styles.min.css">
</head>
<body>
<div class="brk-header-mobile">
<div class="brk-header-mobile__open brk-header-mobile__open_white">
<span></span>
</div>
<div class="brk-header-mobile__logo">
<a href="#">
<img class="brk-header-mobile__logo-1 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://localhost/SePrepareBem/public/img/logo-se-prepare-bem.png" alt="alt">
<img class="brk-header-mobile__logo-2 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://localhost/SePrepareBem/public/img/logo-se-prepare-bem.png" alt="alt">
</a>
</div>
</div>
Essa imagem é da rota /blog -> Veja o topo na cor roxa
Essa é a imagem da rota /blog/detalhes -> veja que a cor preta sobrescreve a cor roxa
.blade.php
, o endereço do css e do js... e mostra a estrutura onde o css e o js está. Acho que pode ser o blade – Flávio Santos 14/10/19 às 19:04{{asset('js/scripts.min.js')}}
– Flávio Santos 15/10/19 às 11:25asset()
resolve isso... Alternativamente (e mais difícil um pouco), Tem um jeito "oficial" de se trabalhar com assets no Laravel: laravel.com/docs/5.8/frontend e laravel.com/docs/5.8/mix – Flávio Santos 16/10/19 às 12:08