My webpage is rendering each page (~20 pages) with a general wrapper and including it via Thymeleaf (th:include="wrapper :: page"). Im adding ViewControllers for those pages as follows: "registry.addViewController("/").setViewName("index");" (example)
Now my question.. since i want to change the title html tag dynamically for each page..( <meta name="title" th:content="${title}"/>)... is it OK if i change my current addViewController methods for a new Controller, #RequestMapping each page and adding a model model.addAttribute("title", titleVariable);?
Or it would be seen as bad practice to add so many #RequestMapping methods for just changing the html title attribute? is there otherwise another better way of changing the title tag dynamically?
Add this to the page-layout head:
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Site name</title>
and it will pull in all titles on your included pages when you have the template setup like this:
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{direcory/pagename}">
<head>
<title>This title will appear</title>
</head>
Are you allowed to use jQuery?
$('title').text($('meta[name="title"]')[0].content);
or store it in a variable first
var title = $('meta[name="title"]')[0].content;
$('title').text(title);
Related
I have a Spring-Boot project with Velocity templating all configured and working fine...
In my velocity view, I have the following;
<head>
<!-- some other meta tags here -->
<meta name="csrf-token" content="$!_csrf.token">
</head>
Here's what the output looks like when I inspect in chrome;
<meta name="csrf-token" content="$!_csrf.token">
However on this same page I have a form that looks something like this;
<form method="post" action="/post/to/wherever">
<input type="hidden" id="csrf" name="$!_csrf.parameterName" value="$!_csrf.token" data-header="$!_csrf.headerName"/>
<!-- other fields here -->
</form>
And the browser inspection shows the following;
<input type="hidden" name="_csrf" value="69799b81-7c45-4042-9269-3a83769df682" data-header="X-CSRF-TOKEN">
So obviously, the _csrf attribute gets injected and resolved within the form body but not within the head meta tags.
QUESTION: What would cause a thing like this?
Ok I eventually found out that what was happening here was due to a very simple oversight.
I had the <head>...</head> section in a separate template and was including it to other templates as follows;
#include("/pages/common/header.vm")
Well, for users of velocity, it's quite obvious that the above just includes the template as-is (i.e all content is translated as text) and wouldn't resolve any velocity context attributes declared within. So I just needed to change it to the following
#parse("/pages/common/header.vm")
This ensures that any velocity attributes declared within the header.vm template are appropriately parsed and the values accordingly read.
I was initially going to delete the question thinking it shouldn't have been asked in the first place, but I realized, well this is StackOverflow, better to just point out the mistake and save somebody else some little time. Essentially, make the world a better place for everyone... Cheers!
I trying to use Spring's localization bundle with Thymeleaf templates. It works well if it is used in normal templates, but fails if I apply th:include attribute at container tag.
I put the view code to Gist: https://gist.github.com/hron84/386bbf855148a601a3dc
The problematic localization is at line 4 and line 10. In the line 10 I see the correct expansion ("New machine") but in line 4, i just get "null" as the page title.
Could you please point me what do I wrong?
As Martin says, your th:include is replacing your title tag, you should do somthing like this:
<head>
<title th:text="#{page.title.machine.new}"> </title>
<dif th:include="widgets/_head :: head" th:remove="tag"></dif>
</head>
The th:remove="tag" will remove the dif tag.
The Thymeleaf website has some usefull documentation about the th:include and th:replace tags.
With th:include your are replacing the inner conten, ie the title tag, with the content fetched from the fragment. As you did not post the head fragment template i cannot give you more hints for that one. I suspect your title tag in the head fragment is doing something different for the title tag?
I've website with MVC3 which is not coming up in Google search. As part of SEO optimization, I want to put the meta tags in _layout.cshtml. Is it good to put meta tags only in master page or in the content page as well? What is better technique for SEO? The meta tags are static. Thanks in advance.
Meta tags which are common to all site should places in _layout.cshtml
Meta tags which describes some custom page should be defines in this page in your custom section.
Example:
_layout.chtml
<head>
<title>#Html.Raw(ViewBag.Title)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
... other common tags
#RenderSection("Meta", required: false) // your section
...
</head>
in custom page you should use
#model SomeModel
#section Meta
{
<meta name="description" content="your custom tag" />
// other custom tags
}
// some html or other code
Since the meta tags are placed on the head, they should be placed only on the layout. You may also want to check the article "SEO is more than meta-tags and good content"
i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...
here is the website: http://demos.kendoui.com/web/validator/index.html...
for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...
i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)
It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.
Normal:
<html>
<head>
<head>
<body>
<div id="divToUpdate"></div>
#Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
<body>
</html>
Partial:
<span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
It says here that it is not within HTML4, though I don't really see where that's spelled out in the text.
From what I can tell, based on this, it is ok to do so in HTML5 but I'm not entirely sure (assuming style is an HTML element?)
I am using this to rotate out a stylesheet and want it to be as valid as possible according to HTML5 specs, so wondering if I should rewrite it with a data-* element.
+1 Interesting question!
Instead of using a style block, you should consider linking (link) to your stylesheets and then switch them out by referencing an id or a class.
That said, title is perfectly acceptable for a style tag in HTML5. You can use this as a hook for your stylesheet switching.
http://www.w3.org/TR/html5/semantics.html#the-style-element
Fyi... this validates
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style title="whatever"></style>
</head>
<body>
Test body
</body>
</html>
http://validator.w3.org/#validate_by_input+with_options
I've just put the following code into the W3C validator and it has no errors :)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style id="test"></style>
</head>
<body>
Test body
</body>
</html>
I think the W3C Validator is a good resource for this type of thing, it is marked as experimental but that's because the standard is yet to be be finalised.
It is not valid in HTML4 (as per the spec) and data-* attributes are not either. That is, the document will not validate against the Doctype spec if you use these attributes.
Regardless of whether the document validates or not, browsers will ignore elements that they do not recognize.
Style tags are DOM elements like any other tag, so you can add any attributes you want.