<!DOCTYPE html> <html> <head> <title><g:layoutTitle default="Grails"/></title> <style> #header {background-color:#ffe0e0;text-align: center;} #footer {background-color:#e0e0ff;text-align: center;} </style> <g:layoutHead/> </head> <body> <div id="header">HEADER</div> <g:layoutBody/> <div id="footer">FOOTER</div> </body> </html>To use it, just specify the layout meta tag in your specific GSP. For example:
<!DOCTYPE html> <html> <head> <meta name="layout" content="test"/> <title>I am a test page</title> <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css"> </head> <body> <p>The quick brown fox jumps over the lazy dog.</p> </body> </html>
The portion in the template that says:
<title><g:layoutTitle default="Grails"/></title>
Will be replaced with the value inside the title tag in your gsp page. Since we have:
<title>I am a test page</title>The content I am a test page will replace the layoutTitle.
The portion in your template with:
<g:layoutHead/>will be replaced with what you have inside the head tag, except the title:
<meta name="layout" content="test"/> <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
The portion in your template with:
<g:layoutBody/>will be replaced with what you have inside the body tag:
<p>The quick brown fox jumps over the lazy dog.</p>
<!DOCTYPE html> <html> <head> <title>I am a test page</title> <style> #header {background-color:#ffe0e0;text-align: center;} #footer {background-color:#e0e0ff;text-align: center;} </style> <meta name="layout" content="test"/> <link rel="stylesheet" href="/sample/static/css/main.css" type="text/css"> </head> <body> <div id="header">HEADER</div> <p>The quick brown fox jumps over the lazy dog.</p> <div id="footer">FOOTER</div> </body> </html>