|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
mohrt Administrator
Joined: 16 Apr 2003 Posts: 7368 Location: Lincoln Nebraska, USA
|
Posted: Mon Aug 30, 2010 8:52 pm Post subject: Smarty 3: Add to head with Template Inheritance |
|
|
An age old problem. You are creating an HTML page, and the page requires some specific javascript or CSS files to be loaded. We would like to load these in the <head></head> of the document, but the problem is we have already gone past that point of rendering. So we begin the process of hacking the header template to make an exception for our rule. This can get quite messy. So it's time to make this task an easy one, with Template Inheritance, new to Smarty 3.
Before template inheritance, we were stuck with using includes to use repeated content, such as headers and footers. Here is an example:
THE OLD WAY, NO INHERITANCE:
header.tpl:
Code: | <html>
<head>
<title>{$title|default:"Default Page Title"}</title>
</head>
<body> |
footer.tpl:
mypage.tpl:
Code: | {include file="header.tpl" title="My Page Title"}
My HTML Page Body goes here
{include file="footer.tpl"} |
output:
Code: | <html>
<head>
<title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html> |
And now, we'll rewrite this with template inheritance:
THE NEW WAY, WITH TEMPLATE INHERITANCE
layout.tpl:
Code: | <html>
<head>
<title>{block name=title}Default Page Title{/block}</title>
</head>
<body>
{block name=body}{/block}
</body>
</html> |
mypage.tpl:
Code: | {extends file=layout.tpl}
{block name=title}My Page Title{/block}
{block name=body}My HTML Page Body goes here{/block} |
output:
Code: | <html>
<head>
<title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html> |
As you can see, your layout is defined in one template, and your child templates extend the parent, and replace defined blocks of content.
So how do we address the need to have special scripts/css loaded in the header? Simply add a new block to the layout (parent), and use it in the child template(s):
layout.tpl:
Code: | <html>
<head>
<title>{block name=title}Default Page Title{/block}</title>
{block name=head}{/block}
</head>
<body>
{block name=body}{/block}
</body>
</html> |
mypage.tpl:
Code: | {extends file=layout.tpl}
{block name=title}My Page Title{/block}
{block name=head}
<link href="/css/mypage.css" rel="stylesheet" type="text/css"/>
<script src="/js/mypage.js"></script>
{/block}
{block name=body}My HTML Page Body goes here{/block} |
output:
Code: | <html>
<head>
<title>My Page Title</title>
<link href="/css/mypage.css" rel="stylesheet" type="text/css"/>
<script src="/js/mypage.js"></script>
</head>
<body>
My HTML Page Body goes here
</body>
</html> |
As you can see, we have now passed control of specific header file loading to the child template(s). This is the basics of template inheritance. You can quickly see how it makes hard/messy problems easy to handle! |
|
Back to top |
|
HellMind Smarty n00b
Joined: 04 Aug 2011 Posts: 1
|
Posted: Thu Aug 04, 2011 8:13 pm Post subject: |
|
|
{extends file=layout.tpl}
Should be
{extends file="layout.tpl"}
Or with ' |
|
Back to top |
|
CircleDev Smarty Rookie
Joined: 27 Jul 2011 Posts: 7
|
Posted: Mon Nov 07, 2011 1:44 pm Post subject: |
|
|
Thanks for this awesome tip!.
I am transitioning a completely php (heavily embedded logic) management system using this inheritance method you outlined and it makes everything so much simpler and easier.
Thanks again for the great tip from a smarty noob |
|
Back to top |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|