Thymeleaf. Why each html file have sections: html, head, body? - thymeleaf

I was wondering Why Thymeleaf always have same tags like:
<html>
<head></head>
<body></body>
</html>
In each file with template html?

That's the standard structure for an HTML file. Everything goes inside these tags.

Related

In Grails, how do I combine the head tags of a view and a template?

I'm creating a Grails plugin which has a template. The idea is that the developer can just call and get all of the rendering functionality that I build in the template.
The issue I'm facing has to do with the head tags of both the view and the template. Currently, the template in the plugin has a <head> tag with multiple JS files. If the developer of another Grails project decides to use <g:render/>and call my template, the head tag of the view is getting replaced by the head tag of the template.
Is there any way to combine the two? Essentially, if view.gsp has a head tag and my own template (pulled in from another plugin) has a head tag, I want them to be combined.
From this
http://docs.grails.org/3.1.1/guide/theWebLayer.html#layouts
It shows that you can have the head tag of a template and view exists as long as the :
<g:layoutHead />
is in the head of the template to load the head of the view
8.2.4 Layouts with Sitemesh
Creating Layouts
Grails leverages Sitemesh, a decorator engine, to support view layouts. Layouts are located in the grails-app/views/layouts directory. A typical
<html>
<head>
<title><g:layoutTitle default="An example decorator" /></title>
<g:layoutHead />
</head>
<body onload="${pageProperty(name:'body.onload')}">
<div class="menu"><!--my common menu goes here--></div>
<div class="body">
<g:layoutBody />
</div>
</body>
</html>
The key elements are the layoutHead, layoutTitle and layoutBody tag invocations:
layoutTitle - outputs the target page's title
layoutHead - outputs the target page's head tag contents
layoutBody - outputs the target page's body tag contents

Automatically embed HTML files at page load

I'm looking to embed html files at page load (of home page, index). All html files are in the same directory as index. The html files are random file names, and are always being added. They need to be automatically loaded at page load, for that reason.
I'm not great with HTML, but it seems you can't do it with just HTML. I've been searching for some kind of method, but haven't found anything. What do I use? Javascript? PHP?
Using HTML:
Include an import on your page by declaring a <link rel="import">
<head>
.....
<link rel="import" href="/path/to/imports/stuff.html">
</head>
Using PHP
<?php include("/path/to/imports/stuff.html"); ?>
Or
<?php require_once("/path/to/imports/stuff.html"); ?>

Config attributes in <html> with Rails

Generally Rails main application views/layout omits the <html> tag, focusing on defining what should be inside of it, like the <head> and <body> tags.
What I'm actually trying to do is to define a simple attribute inside of the <html> top level tag, but I don't know where to write it.
Any tips?
It's available in application.html.erb in the views/layout folder
This file in included by default in all your views.

Render HTML file with CSS and local variables

I have the following content in an HTML file placed under public/company/ with a CSS file css/style.css:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div class="title">Name {name}</div>
</body>
</html>
I want to render this HTML file with the CSS stylesheet from an action and replace {name} without changing the physical file content and place. I can render the HTML file but the CSS file would not be found. Can anyone help me render the HTML file with the CSS file and replace the {name}?
css/style.css when called from company/file.html will try to load company/css/style.css.
Click here to see an article the way you can do that. Hope it will help!
But, I'm not sure why you are looking to render that way where Rails has all the features in place.
If your CSS file is located at /public/company/css/style.css, then your static HTML file should link it with an absolute path. Use a leading / in the resource's path indicate an absolute path.:
<link href="/company/css/style.css" rel="stylesheet" type="text/css" media="all"/>
Note that the Rails router will likely catch this request and raise an exception. Depending on the web server, you may need to enable static assets or serve directly, bypassing Rails altogether.
Changing the content of a static HTML file server-side without actually modifying it (ie. adding ERb) isn't straightforward. You could:
inject some javascript into the response to perform modifications client-side. (ugly)
load the static HTML file using Nokogiri, et. al., modify the content, and send the output to the client. (expensive)
Sounds to me like these vanilla HTML/CSS files are third party (designer? client?) and you would like to drop it in /public and have it work automatically with Rails. That would be nice, but it's not that easy. You'd be better off using Rails' built-in templating system, but that means modifying files and moving them to the expected locations.

Grails Layout, how to do that?

I have a grails app named qotd which has a controller named quote. I have written view file for this controller named as random.gsp file as :
<html>
<head>
<title>Random Quote</title>
</head>
<body>
<div id ="quote">
<q>${content}</q>
<p>${author}</p>
</div>
</body>
Now i have to write down the Grails Layout for this controller. For example i have to locate my .css and images files etc, how to do that(better if an example is shown)? And where i should place that file?
Thanks in advance.
When you create a Grails application with grails create-app qotd, you get a file grails-app/views/layout/main.gsp. Take a look at that file, as it shows you how to include css, js and images. This file is the default Sitemesh layout file. To use it, change your random.gsp to
<head>
<meta name='layout' content='main'/>
<title>Random Quote</title>
</head>
<body>
<div id ="quote">
<q>${content}</q>
<p>${author}</p>
</div>
</body>
Then the layout file main.gsp will be wrapped around your content.
To learn more about Sitemesh, take a look at chapter 7 in the Grails documentation

Resources