I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.
Related
So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.
I have already tried changing the path (as suggested in other similar questions) to something like #{css/styles.css} instead of #{/css/styles.css} but that did not work.
Does anyone know if I'm missing something here?
Below is the HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="#{/css/styles.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">Don't have account?
Signup Now
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/loginscript.js}"></script>
</body>
where is your css folder?
css, js should be in static folder
src
main
java
resources
static
css
i18n
img
js
templates
Add this in your head tag:
<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="#{/styles.css}">
Note: Above code will only work if styles.css present in below path:
|--resources
|--static
|--css
|--styles.css
This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="#{../static/css/styles.css}". Thanks to everyone who answered!
I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />
Here is the content of my home.blade.php file:
#extends('layouts.master')
#section('content')
#extends('partials.sidebar')
#section('pagecontent')
This is home
#endsection
#endsection
layouts/master.blade.php contains the main layout which has the typical <html><head><body>structure. In it's <body>, I am yielding to a section called content:
<!DOCTYPE html>
<html>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
and in my parials/sidebar.blade.php, I am yielding to a section called pagecontent:
<div id="page-content-wrapper">
<div class="container-fluid">
#yield('pagecontent')
</div>
</div>
So I would naturally expect a DOM like this:
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
</div>
</body>
</html>
Unfortunately, that's not the DOM my blade views are rendering. My sidebar partial doesn't get injected inside the master layout, instead, it is appended to the DOM as a sibling of the Entire Document:
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
</div>
</body>
</html>
How can I fix this?
You can't use #extends like this. Use #include instead:
#include('partials.sidebar')
I'm learning how to make web pages with AngularJS (in fact, I have the exam tomorrow), and I have a problem.
I used codeCademy as the learning course, but my exam allows external (printed) files to help you, so I made the exercises offline on my computer too.
The first chapter, (no directives, just setting up your app and using controllers) is no problem. The server from ajax googleapis for angularJS is working perfect. So three weeks ago, I finished the course (always using the server from ajax googleapis), and everything worked fluently.
Today, I'm just remaking the exercises, and when I'm making the first exercise from Directives, I'm getting a bunch of errors (these exercises worked perfectly 3 weeks ago). When I'm loading the old exercises I made 3 weeks ago, they don't work either.
So I'm not getting why these errors show up now, and not 3 weeks ago.
The code:
index.html
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body ng-app="BoltNetworkApp">
<div class="header">
<div class="container">
<img src="img/logo.svg" width="180" height="34">
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-3" class="series_img">
<img ng-src="{{ program.series_img }}">
</div>
<div class="col-md-6">
<h1 class="series">{{ program.series }}</h1>
<h2 class="episode">{{ program.episode }}</h2>
<p class="description">{{ program.description }}</p>
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"><span>Date:</span>{{ program.datetime | date:'mediumDate' }}</li>
<li class="list-group-item"><span>On air:</span>{{ program.datetime | date:'EEEE' }}</li>
<li class="list-group-item"><span>Time:</span>{{ program.datetime | date:'shortTime' }}</li>
<li class="list-group-item"><span>Season:</span>{{ program.season }}</li>
<li class="list-group-item"><span>Genre:</span>{{ program.genre }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Bolt</h3>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3">
<h3>More Bolt</h3>
<ul>
<li>Gift Cards</li>
<li>Trailers</li>
</ul>
</div>
<div class="col-md-3">
<h3>News</h3>
<ul>
<li>Blog</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Google+</li>
<li>Facebook</li>
</ul>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
I think there something changed with the ajax servers online, because this worked perfect 3 weeks ago.
Does anyone has a solution for this (please don't say local webserver, because it worked just fine with a server online, I wanna know how to fix this with the online server).
Thanks!
Nevermind, I fixed it. For some (dumb) reason I don't know, this doesn't work in Chrome. I loaded it in Firefox and it works perfectly.
If I add some custom tags in my spring-boot project, is it possible use them inside a thymeleaf-based file? For instance, if I had this tag defined in my TLD file (place in the directory /src/main/resources/static):
<tag>
<name>Input</name>
<tag-class>org.store.custom.taglib.form_control.InputTag</tag-class>
</tag>
Do I could use this in my view like that:
<p th:case="'Input'"><f:Input/></p>
Anyone knows if this is possible?
UPDATE
I try that, but when I run the application, the custom tags are not processed into the corresponding tags:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="/form.tld" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>cadastro</title>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">cadastro</h3>
</div>
<div class="panel-body">
<f:form th:attr="action=#{/__${command.getClass().getSimpleName()}__/cadastra}">
<div th:each="item : ${command['class'].declaredFields}">
<div th:each="item2 : ${item.declaredAnnotations}">
<div th:switch="${item2.annotationType().simpleName}" th:with="index=${itemStat.index}">
<p th:case="'Checkbox'"><f:Checkbox/></p>
<p th:case="'DataList'"><f:DataList/></p>
<p th:case="'Input'"><f:Input/></p>
<p th:case="'Radiobutton'"><f:Radiobutton/></p>
<p th:case="'Select'"><f:Select/></p>
<p th:case="'Textarea'"><f:Textarea/></p>
</div>
</div>
</div>
</f:form>
</div>
</div>
</body>
</html>
No. Thymeleaf's fundamental principle is that no alien tags should exist. (Only standard html). All dynamic content is added via custom attributes.
You can use this way
<input th:attr="your string message ='\'' + #{yourObject.meesage}" + '\''"/>
More examples: https://attacomsian.com/blog/thymeleaf-custom-html-attributes