I'm new in laravel, I'm creating the layout structure, I would like know how can transform to blade this section:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
with css and scripts I know how do it, but this have sizes and other attributes.
Thank you for your help!
You don't need to change this section of code, because It's not needed
Related
I am getting the below error when running application,
Undefined variable: header (View: C:\blog\resources\views\pages\welcome.blade.php)
My getIndex() function in Controller:
public function getIndex(){
\View::make('pages/welcome')->nest('header', 'layout.header');
return view('pages/welcome');
}
My welcome.blade.php
{{ $header }}
<body>
....
</body>
My _partial/header.blade.php,
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<link rel="icon" href="../../favicon.ico">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
After following the answer, the html looks like,
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<link rel="icon" href="../../favicon.ico">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://127.0.0.1:8000/css/style.css" rel="stylesheet">
</head>
You're creating a view with a nested subview, then creating & returning a totally new view without the nested subview instead:
public function getIndex(){
\View::make('pages/welcome')->nest('header', 'layout.header');
return view('pages/welcome');
}
Should be
public function getIndex(){
return \View::make('pages/welcome')->nest('header', 'layout.header');
}
Note that view() is an alias of \View::make().
You can prevent the HTML from being escaped by using {!! $header !!} instead.
With Laravel 5+ development, you should be using Components and Slots to inject templates into your views instead.
I have a problem with my favicon icons, they are in public folder inside img folder and html looks like this:
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/manifest.json">
<link rel="shortcut icon" href="img/favicon.ico">
<meta name="msapplication-config" content="img/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
I am 100% sure that the href is correct because if I copy it it shows me the image, however the icon is not displayed in the tab. What can I do about it?
Try to add ?version=1 to href. Google Chrome caches favicons very hard.
Try this
<link rel="icon" type="image/png" sizes="16x16" href="{{URL::asset('img/favicon-16x16.png')}}">
<html lang="en">
<head>
<title>Corey Maller</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
I want to make some small changes to my css file but the website is not responding to them. Is there any kind of caching html code I could add to the header?
Im hosting a laravel app on a CentOS VPS and I use git, after pushing some modifications and checking the site suddenly the site stoped loading local files like css and js (404 not found) but yet loading external files from CDNS like bootstrap and jquery...
Please advice
snippet of code from the head of master page
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('assets/favicons/apple-icon-57x57.png')}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('assets/favicons/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('assets/favicons/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('assets/favicons/apple-icon-76x76.png')}}">
<link rel="apple-touch-icon" sizes="114x114" href="{{asset('assets/favicons/apple-icon-114x114.png')}}">
<link rel="apple-touch-icon" sizes="120x120" href="{{asset('assets/favicons/apple-icon-120x120.png')}}">
<link rel="apple-touch-icon" sizes="144x144" href="{{asset('assets/favicons/apple-icon-144x144.png')}}">
<link rel="apple-touch-icon" sizes="152x152" href="{{asset('assets/favicons/apple-icon-152x152.png')}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/favicons/apple-icon-180x180.png')}}">
<link rel="icon" type="image/png" sizes="192x192" href="{{asset('assets/favicons/android-icon-192x192.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/favicons/favicon-32x32.png')}}">
<link rel="icon" type="image/png" sizes="96x96" href="{{asset('assets/favicons/favicon-96x96.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/favicons/favicon-16x16.png')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/shutter-modal.css')}}">
<link rel="manifest" href="{{asset('assets/favicons/manifest.json')}}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{asset('assets/favicons/ms-icon-144x144.png')}}">
<meta name="theme-color" content="#ffffff">
<meta name="_token" content="{{csrf_token()}}">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
{{-- <link rel="stylesheet" type="text/css" href='{{asset("assets/css/all.css")}}'> --}}
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/themify-icons.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/font-awesome-4.7.0/css/font-awesome.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/magnific-popup.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.carousel.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.theme.default.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/animate.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/bootstrap.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/style-MF.css")}}'>
and as I said this was ok and I didnt touch it in any way !
If you are using root to update your code, change owner of your files to website user. You can use chown command to change owner and -R argument for applying recursively.
chown -R groupname:username *
Note: In most of time, groupname and username are same!
I'm new to Spring Boot and my problem is that I have Spring Boot project and I am intending to view my HTML pages with Thymeleaf but Spring can't resolve my JavaScript and CSS files.
Full picture of my IDE:
Those are my Thymeleaf configurations
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=true
This is my HTML page head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<title>404 Page</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<meta name="viewport" content="width=device-width"/>
<!-- Css Files Start -->
<link href="/src/main/resources/static/css/style.css" rel="stylesheet" type="text/css" media="screen"/><!-- All css -->
<link href="/src/main/resources/static/css/bs.css" rel="stylesheet" type="text/css" media="screen"/><!-- Bootstrap Css -->
<link rel="stylesheet" type="text/css" href="/src/main/resources/static/css/main-slider.css" media="screen"/><!-- Main Slider Css -->
<!--[if lte IE 10]>
<link rel="stylesheet" type="text/css" href="/static/css/customIE.css" media="screen"/><![endif]-->
<link href="/src/main/resources/static/css/font-awesome.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome Css -->
<link href="/src/main/resources/static/css/font-awesome-ie7.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome iE7 Css -->
<noscript>
<link rel="stylesheet" type="text/css" href="/static/css/noJS.css"/>
</noscript>
<!-- Css Files End -->
</head>
You should use relative path to your JavaScript and CSS files:
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="screen"/>
or you can use th:href Thymeleaf's tag as well:
<link th:href="#{css/style.css}" href="../../static/css/style.css"
rel="stylesheet" type="text/css" media="screen"/>
I have found that Spring automatically searches for: /resources/.
So what I did was removed all the pre-directories by using find all.
So, in my case what used to be for example: /static/css/style.css & /templates/index.html
became: /css/style.css & /index.html
Now the question remains how does Spring boot know what folder to look in without you defining it: Spring looks at the extension. When spring boot sees .html, it looks for it in a folder called /templates.