My structure
WEB-INF
└── thymeleaf
├── fragments
│ └── head.html
├── index
│ └── index.html
└── layout.html
layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{fragments/head :: head}" th:remove="tag"></head>
<body>
<!--${view} == "index/index"-->
<div th:insert="~{${view} :: content}" th:remove="tag"></div>
</body>
</html>
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title id="pageTitle">My Title with ID</title>
</head>
<body>
<div th:fragment="title">My Title With fragment</div>
<div th:fragment="content">
My page
</div>
</body>
</html>
head.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head" th:remove="tag">
<meta charset="utf-8">
<title>??????</title>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
</body>
</html>
I'm new to Spring and Thymeleaf. I'm trying to build a simple CRUD, but I'm stuck in the following situation:
What I want is: in index.html set a title variable and in head.html fragment retrieve this title variable and print it.
What can I do?
I think you are looking for 8.3 Flexible layouts The documentation is awesome and easy to follow, but here is also simple case for just inserting title string
layouts/layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="page(title)">
<head th:replace="fragments/head :: common_header(title=${title})"></head>
<body>
<div th:replace="this :: content"></div>
</body>
</html>
fragments/head.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title)">
<title th:text="${title}">The awesome application</title>
</head>
<body></body>
</html>
index.html (indexTitle comes from controller or you can just put string there)
<html xmlns:th="http://www.thymeleaf.org"
th:include="layouts/layout :: page(title=${indexTitle})">
<head></head>
<body>
<section th:fragment="content">
<div class="block">Part of index.html</div>
</section>
</body>
</html>
And here is also simplified github demo from one of my project you can play with
You should use th:include.
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="header :: title">
</head>
<body>
<div>My Title With fragment</div>
<div>
My page
</div>
</body>
</html>
head.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="title" >
<title>??????</title>
</head>
<body>
</body>
</html>
Related
I've tried implementing the basics for bootstrap into an xmb forum templare but all I get is a blank page.
Prior to bootstrap:
<?xml version=\"1.0\" encoding=\"$charset\"?>
<!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\">
<!-- $versionlong -->
<!-- Build: $versionbuild -->
<!-- $versioncompany -->
<head>
$baseelement$canonical_link
<title>{$SETTINGS[\'bbname\']} $threadSubject - $versionlong</title>
$css
<script language=\"JavaScript\" type=\"text/javascript\" src=\"./js/header.js\"></script>
</head>
and after bootstrap code:
<!-- ?xml version=\"1.0\" encoding=\"$charset\"? -->
<!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\">
<!-- $versionlong -->
<!-- Build: $versionbuild -->
<!-- $versioncompany -->
<head>
<!-- Required meta tags -->
<meta charset=\"$charset\">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
$baseelement$canonical_link
<title>{$SETTINGS[\'bbname\']} $threadSubject - $versionlong</title>
<!-- $css -->
<script language=\"JavaScript\" type=\"text/javascript\" src=\"./js/header.js\"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
Any clues as to the issue[s] appreciated.
Try to paste the link like this, everywhere else you are escaping quotes but here.
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">
Also, meta tag needs to be changed to
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I have written a website using HTML and CSS and, basically, I'm trying to get it to display now. The code is just a page of text and a few images. Currently when I go to the domain, the source code from start to finish is displayed instead of the actual content.
I just got cPanel hosting with godaddy (who naturally weren't of any help). I downloaded cyberduck. Uploaded the file containing the HTML text and called it index.html.
A CSS file was uploaded, and saved as index.css This might be the issue if something was incorrect.
On cyberduck it says there is a file called layout-style.css, perhaps I should edit that and add my CSS code to it?
Possibly the top few lines of the HTML code are missing some important command? [updated]:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class = enterprise> <br>
<p>text<p>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Also, does Bootstrap have to be installed anywhere?
I appreciate your responses.
The content must be in the body tag
The structure of an HTML document is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- CONTENT HERE -->
<div >
<h1>Site name</h1>
</div>
</body>
</html>
You should not have in the part.
This is a html5 structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Then you should put inside the part like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class= top>
</div>
<div class = enterprise>
<p> text goes here </p>
</div>
</body>
</html>
I'm in the process of converting our existing ASP.NET web form pages to support HTML5.
According to several sources, all I need to do is change my aspx page so that it has the following layout:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>/title>
</head>
<body>
</body>
</html>
Here is the top part of the ASPX page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MyForm.aspx.cs" EnableEventValidation="false"
Inherits="MyForm" ValidateRequest="false" %>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div> BLA BLA BLA </div>
</body>
</html>
My problem is, when the page is rendered in a browser, and I view the source of the page, I still see the old DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML>
<html lang="en">
<head>
.....
Any idea how I can get rid of this?
It's legal to nest SVG documents inside XHTML documents; but is it legal to nest XHTML documents inside other XHTML documents in the same fashion?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sup</title>
</head>
<body>
<h1>Hello World!</h1>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested document</title>
</head>
<body>
<p>This is a sample</p>
</body>
</html>
</body>
</html>
No, the html element is only allowed as root element of the document.
You can, using <iframe> (though not recommended and should be avoided).