I'm creating a project with Springboot and Thymeleaf. I configured the whole project, found the template and the pages, so my template can not find the css and js files;
I'm use Springboot version 1.4.2.RELEASE.
Html
<link rel="stylesheet" th:href="#{/bootstrap/css/bootstrap.min.css}"/>
application.properties
# --- CONFIGURAÇÃO TYMELEAF ---
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false
spring.thymeleaf.content-type=text/html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.enabled=true
WebMvcConfigurerAdapter
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**")
.addResourceLocations("/resources/")
.addResourceLocations("/static/")
.addResourceLocations("/static/**")
.addResourceLocations("/resources/static/")
.addResourceLocations("/resources/static/**")
.addResourceLocations("/")
.addResourceLocations("/**");
}
Folders
UPDATE
I did as recommended and removed all the settings. So this time my page opens, so it does not load the starter page.
index
<div class="content-wrapper" th:replace="/starter :: content">
</div>
starter
<div class="content-wrapper" th:frament="content">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Esse é o Prototipo do layout
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<h1>Oi eu sou goku!!</h1>
</section>
<!-- /.content -->
</div>
try this,
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"/>
you don't have to use th:href here.
Related
I have a spring web application that loads the templates correctly, but does not load static assets like CSS and images. I have added my static resources within the src/main/resources/static directory, added thymeleaf annotations, added configurations and checked them against similar questions here on StackOverflow, but none of my CSS/image files are getting loaded:
Console Error
Refused to apply style from 'http://localhost:8080/login' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Directory Structure
TemplateConfig.java
package com.valencra.recipes.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.extras.springsecurity4.dialect.SpringSecurityDialect;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
#Configuration
public class TemplateConfig {
#Bean
public SpringResourceTemplateResolver templateResolver() {
final SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
templateResolver.setPrefix("classpath:/templates/");
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode("LEGACYHTML5");
return templateResolver;
}
#Bean
public SpringTemplateEngine templateEngine() {
final SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
springTemplateEngine.addTemplateResolver(templateResolver());
springTemplateEngine.addDialect(new SpringSecurityDialect());
return springTemplateEngine;
}
#Bean
public ThymeleafViewResolver viewResolver() {
final ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(templateEngine());
viewResolver.setOrder(1);
return viewResolver;
}
}
layout.html
<!DOCTYPE html>
<html lang="en">
<head th:fragment="head">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My Recipes</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" th:href="#{/css/unsemantic-grid-responsive.css}">
<link rel="stylesheet" th:href="#{/css/styles.css}">
</head>
<body>
<nav th:fragment="nav">
<a th:href="#{|/profile|}" th:text="${currentUser.name}">
Chandra S.
</a>
•
<form th:action="#{/logout}" method="post" style="display: inline">
logout
</form>
</nav>
<div th:fragment="home">
<div class="grid-100">
<a th:href="#{|/|}">
<h1>
<img th:src="#{/images/chefbot.svg}" height="60px">
<br>
My Recipes
</h1>
</a>
</div>
</div>
<div th:fragment="favorite">
<form th:action="#{|/recipes/${recipe.id}/favorite|}" method="post" style="display:inline">
<button type="submit">
<img th:src="${recipe.isFavorite(currentUser)} ? #{/images/favorited.svg} : #{/images/favorite.svg}" style="height: 15px;">
</button>
</form>
</div>
</body>
</html>
login.html
<!doctype html>
<html lang="en">
<head th:replace="layout :: head"></head>
<body>
<nav>
<a th:href="#{/signup}">
sign-up
</a>
</nav>
<div class="grid-container">
<div th:replace="layout :: home"></div>
<div class="grid-100">
<div class="recipes">
<form th:action="#{|/login|}" method="post" th:object="${user}">
<div class="prefix-20 grid-60 suffix-20">
<p>
<input placeholder="Username" th:field="*{username}"> </input>
</p>
</div> <div class="clear"></div>
<div class="prefix-20 grid-60 suffix-20">
<p>
<input placeholder="Password" type="password" th:field="*{password}"> </input>
</p>
</div> <div class="clear"></div>
<div class="prefix-20 grid-60 suffix-20">
<p>
<button>Login</button>
</p>
</div> <div class="clear"></div>
</form>
</div> <!-- recipes -->
</div> <!-- grid-100 -->
</div> <!-- grid-container -->
</body>
</html>
It looks like your CSS is served as HTML.
Since you put the Stylesheets in src/main/resources/static Spring should set up most things based on sensible defaults, including setting the correct content-type header.
I assume you are using Spring Security, since you showed a login form.
It could be that your resources are protected by Spring Security. Thus instead of your stylesheet you get a 30x redirect to the login page. This would explain why your browser complains about the text/html content type, which is wrong for css but the correct type for a login page.
Do you configure HttpSecurity somewhere in your project (most likely annotated with #EnableWebSecurity)?
If so, you need to allow anonymous access to your resources:
#Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/css/**", "/images/**").permitAll()
// rest of your code
If you switch to the network tab in your browser console, you should be able to inspect the redirect to the login page.
What helped in my case was answer from #phisch and the following code
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(
"/webjars/**",
"/img/**",
"/css/**",
"/js/**")
.addResourceLocations(
"classpath:/META-INF/resources/webjars/",
"classpath:/static/img/",
"classpath:/static/css/",
"classpath:/static/js/");
}
}
I can't looking for solution or understanding solution when I try use blade (laravel 4.2) for use with several sections.
For normal use (home extendes layout) not problem.
views/home.blade.php
#extends('layout')
#section('content')
Show content of home page
#endsection
view/layout.blade.php
<html>
<!-- Code html such head, template header... -->
...
#yield('content')
<!-- Rest code html such footer -->
...
</body>
</html>
But when I like move Rest code (footer) to another template file footer.blade.php I don't understand and try several ways.
view/footer.blade.php
#extends('layout')
#section('footer')
<hr>
<footer>
<p>© Tamainout Hébergement SARL 2015</p>
</footer>
</div>
#endsection
and change views/home.blade.php
<html>
<!-- Code html such head, template header... -->
...
#yield('content')
#yield('footer')
<!-- Rest code html such footer -->
...
</body>
</html>
But file footer.blade.php it isn't processed by laravel.
Apreciate some help
NOTE: I put code on github, abkrim/blade (only files envolved)
I think you have a syntax error in the views/home.blade.php.
Try:
#yield('footer')
instead of
#yield(footer')
EDIT:
include footer.blade.php in the layout.blade.php and remove extends from footer.blade.php
views/home.blade.php:
#extends('layout')
#section('content')
Show content of home page
#endsection
views/footer.blade.php:
<hr>
<footer>
<p>© Tamainout Hébergement SARL 2015</p>
</footer>
</div>
views/layout.blade.php:
#yield('content')
#include('footer')
I have a Spring Boot app, where i define my thymeleaf dependency in pom.xml with these lines:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
So when i start the application and print the predefined bean names, i see these beans (which i think are important for thymeleaf to run properly):
templateEngine
thymeleafResourceResolver
thymeleafViewResolver
The project structure looks like this:
I have defined some fragments inside the fragments.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container" th:fragment="copy">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Teamtool 2015</p>
</div>
</div>
</footer>
</div>
</body>
</html>
.. and i am trying to use those from my index.html like this:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello AngularJS</title>
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}">home</li>
...
</ul>
</div>
<div ng-view class="container"></div>
<div class="col-md-3" th:include="fragments :: copy"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
...
</body>
</html>
But my template is not added in the index.html. What do i do wrong?
Application scans Thymeleaf templates in templates folder, move index.html to templates that should work.
I try to be generic here, Spring boot considers static folder as public resources folder that it uses to serve static files from. As you are telling spring boot to also configure a templating system - thymeleaf in your case - it will start looking in templates folder. Thymeleaf templating is not static but a dynamic page building mechanism.
Now because you configured thymeleaf Springboot expects that you want to render dynamic thymeleaf template and its looking for a starting point from within templates folder. It does not find index.html file showing you a Whitelabel page. When you move index.html to template folder it has a default starting point. You can map any other file name as stating point to your application by mapping a URL path like #RequestMapping(value = "/") in one of you controller.
You can use static folder to serve angular JS files, but a template has to be in templates folder, unless you override it.
I decided to use CodeIgniter-Skeleton-master (author Anvoz) for build my web site.
I added new menus and sub menus on this example.
With setup new menus I haven't problem, because I copy example of Todo, make Todo1 and it works without any problem.
But, on all added submenus I entered under Todo1 displayed web page cannot proper access to css and js files and navbar is displayed without css and js.
Problem was caused what site url() grab controller name todo1 and css and js is in the wrong path !
Example:
todo1 ->path : http://localhost/ci3a/ ->this work ok instead all used css and js path is added onto this and have acess to their files
todo1/aboutus ->path : http://localhost/ci3a/todo1 ->this controller name-todo1 cause wrong path and css and js files cannot be used!
Organisation of files :
application
assets, contain css, images and js subfolders
system
In application/config/
assets.php I have:
$config['assets_url'] = 'assets/';
autoload.php I have:
$autoload['helper'] = array('url');
config.php I have:
$config['base_url'] = '';
$config['index_page'] = '';
routes.php I have:
$route['default_controller'] = "skeleton";
$route['404_override'] = '';
In application/skeleton/ i have
controllers and views folders
In controllers folder I have main controller skeleton.php
In application/views/header.php I have navbar menu structure.
Here I put the copy of todo menu->todo1 with 2 submenus, who work but dont display css and js
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Todo1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Todo1</li>
<li>About us</li>
<li>Where we are</li>
</ul>
</li>
I added similar functions as index (in todo1.php controller) for this new submenuus)
public function aboutus()
{
$this->load->library('template');
$this->template->set_layout('pagelet');
$this->template->set_title('Todo example');
$this->template->load_view('todo1/aboutus');
}
I dont know how to eliminate this controller name who make css, image and js unaccesible.
I tried to make new folder todo1 under root and copy access subfolder into it but the problem stayed.
In web browser, i cought errors:
GET http://localhost/ci3a/todo1/aboutus [HTTP/1.1 200 OK 63ms]
GET http://localhost/ci3a/todo1/assets/css/bootstrap.min.css [HTTP/1.1 404
Not Found 141ms]
and x similar errors
Can you someone help me ?
to load your css and js
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
so that your folder structurer would be like this
1. application
2. assets
- css
1. bootstrap.css
- js
1. bootstrap.js
- images
1. slider.jpg
2. logo.jpg
3. system
4. .htacess
5. index.php
in controller just load your particular view only
public function aboutus()
{
$this->template->set_title('Todo example');
$this->template->load_view('todo1/header');
$this->template->load_view('todo1/aboutus');//this should contain only about us details
$this->template->load_view('todo1/fotter');
}
so in header.php file
<!DOCTYPE html>
<html>
<head>
<title>my site ----</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
</head>
in so in fotter.php file
<div class="foot">
<div class="social">
<div class="news_letter">
<p>Sign Up For Newsletter</p>
<div class="new_div">
<form action="#" class="form_news" method="post">
<input type="email" class="news_input" placeholder="E-Mail" name="email" required>
<input type="submit" class="news_button" value="Subscribe" name="news_but" >
</form>
</div>
</div>
<div class="follow">
<p>Follow Me</p>
<ul class="soc">
<li><a class="soc-facebook" href="#" target="_blank"></a></li>
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-linkedin soc-icon-last" href="#"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="copyright navbar navbar-default">
<div class="copy_in">
<div class="foot_nav navbar-text">
<ul>
<li class="list_border">Home</li>
<li class="list_border">About Us</li>
<li class="list_border">Products</li>
<li class="list_border">Corsair</li>
<li>Contact Us</li>
</ul>
</div>
<div class="foot_copy_text">
<p class="navbar-text">
© 2015 - comany name. Solution By : My office name
</p>
</div>
</div>
</div>
</div>
</body>
in between (ex:about us page)
<div class="container">
<h1>Im About us</h1>
<!-- rest of code here -->
</div>
ex: contact
<div class="container">
<h1>Im contact</h1>
<!-- rest of code here -->
</div>
My site has a "nav" div, with links to different html files, a "sidebar" div with static information, and a "content" div, which the different html files get loaded into. I've also set my url base in the header. One of these html files is a long document, and I'd like to be able to include links to sections of this file. So I named the section headers and used the hashtag to link to them:
portfolio.html snippet:
<BODY>
<a id="top"></a>
<header>
PULSE OXIMETRY IN ZAMBIA<BR>
DENGUE DIAGNOSIS IN NICARAGUA<BR>
EYE HEALTH IN INDIA<BR>
MAS.531 COMPUTATIONAL CAMERA AND PHOTOGRAPHY<BR>
MAS.S60 HANDS ON FOUNDATIONS<BR>
<hr>
</header>
<header><a id="pulseox">PULSE OXIMETRY IN ZAMBIA</a></header>
<img src="pulseOx.PNG" width="500px"><BR>
lorem ipsum
</BODY>
And this works wonderfully when I've opened the html by itself. But when it's been loaded into the "content" div within the meta html file, it tries to take me to <myurlbase>#pulseox. How do I make the <a href="#pulseox"> link refer to html doc within the "content" div? I haven't set a base url in the portfolio.html file.
Here's my meta html doc, if that helps:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="index_test.css" />
<base href="http://myurl/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#content").load("home.html");
$(".nav-1").click(function(){
$("#content").load("home.html");
});
$(".nav-2").click(function(){
$("#content").load("about.html");
});
$(".nav-3").click(function(){
$("#content").load("portfolio.html");
});
$(".nav-4").click(function(){
$("#content").load("cv.html");
});
});
</script>
</HEAD>
<BODY>
<div id="nav">
<ul>
<li><a class="nav-1">HOME.</a></li>
<li><a class="nav-2">ABOUT.</a></li>
<li><a class="nav-3">PORTFOLIO.</a></li>
<li><a class="nav-4">CV.</a></li>
</ul>
</div>
<div id="sidebar">
myname
<BR><BR>
</div>
<div id="content"></div>
</BODY>
</HTML>