Does Google Closure Templates support extending templates

177 views
Skip to first unread message

Marcel Overdijk

unread,
Apr 12, 2013, 2:16:14 AM4/12/13
to Closure Templates Discuss
E.g. I want my page templates page1.soy, page2.soy, pageX.soy to
extend my base.soy template which includes a header and footer.

Is this supported?

This is common functionality in e.g. Django and Jinja2 template
engines.

Johannes Nel

unread,
Apr 12, 2013, 3:02:33 AM4/12/13
to closure-temp...@googlegroups.com
look at delegate templates



--

---
You received this message because you are subscribed to the Google Groups "Closure Templates Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to closure-templates-...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.





--
j:pn
\\no comment

Marcel Overdijk

unread,
Apr 12, 2013, 7:02:00 AM4/12/13
to Closure Templates Discuss
I don't see how delegate templates can solve this.

What I would basically want is something like:

{template .base}
<html>
<head>
<title>{page.theTitle}</title>
<link href=".." />
<script src=".." />
</head>
<body>
<h1>Header</h1>
<div class="content">
{page.theBody}
</div>
<p>Footer</p>
<body>
</html>
{/template}

{template .page1 extend .base}
<html>
<head>
<title>Page 1</title>
</head>
<body>
<p>Content of page1</p>
</body>
</html>
{/template}

which would result in:

<html>
<head>
<title>Page 1</title>
<link href=".." />
<script src=".." />
</head>
<body>
<h1>Header</h1>
<div class="content">
<p>Content of page1</p>
</div>
<p>Footer</p>
<body>
</html>

This way I can extend the base template in my pages so I have to
maintain my header, footer, etc. only in 1 place.
It's a common practice in templating systems.

On 12 apr, 09:02, Johannes Nel <johannes....@gmail.com> wrote:
> look at delegate templates
>
> On Fri, Apr 12, 2013 at 7:16 AM, Marcel Overdijk
> <marceloverd...@gmail.com>wrote:
>
>
>
>
>
>
>
>
>
> > E.g. I want my page templates page1.soy, page2.soy, pageX.soy to
> > extend my base.soy template which includes a header and footer.
>
> > Is this supported?
>
> > This is common functionality in e.g. Django and Jinja2 template
> > engines.
>
> > --
>
> > ---
> > You received this message because you are subscribed to the Google Groups
> > "Closure Templates Discuss" group.
> > To unsubscribe from this group and stop receiving emails from it, send an
> > email to closure-templates-...@googlegroups.com.
> > For more options, visithttps://groups.google.com/groups/opt_out.

Johannes Nel

unread,
Apr 12, 2013, 7:08:51 AM4/12/13
to closure-temp...@googlegroups.com
this is exactly what delegate templates allow you to do. consider this

{tremplate page}
  {delcall header/}
  {delcall body variant="$variant"/}
  {delcall footer}
{/template}

...the standard implementations of those

{deltemplate body variant="'your-page"} your crap in here{/deltemplate} 


variants and delegates solve this very nicely. 




For more options, visit https://groups.google.com/groups/opt_out.


Marcel Overdijk

unread,
Apr 12, 2013, 8:16:17 AM4/12/13
to Closure Templates Discuss
hmm, still trying to understand.

This means you would always call the base page, and as variant use the
actual pages.
I can see this solves some parts.. but not everything.

For exmaple I want 'pull' the title in the head from the page inside
the base template.
I don't want to create separate templates with variant for this.

I'm looking for something similar like Sitemesh (Java) or Jinja2
(Python) which support Template Inheritance
http://jinja.pocoo.org/docs/templates/#template-inheritance

E.g. base template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
&copy; Copyright 2008 by <a href="http://domain.invalid/">you</
a>.
{% endblock %}
</div>
</body>

and the child template:

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}

I'm sorry I/m overflooding with other languages/frameworks, but I
think this is the easiest way to explain for what I'm looking for.
It would be greate if I can use the delegate templates and variants
for it, but I'm missing the point at the moment.


Thanks for your patience.

On 12 apr, 13:08, Johannes Nel <johannes....@gmail.com> wrote:
> this is exactly what delegate templates allow you to do. consider this
>
> {tremplate page}
>   {delcall header/}
>   {delcall body variant="$variant"/}
>   {delcall footer}
> {/template}
>
> ...the standard implementations of those
>
> {deltemplate body variant="'your-page"} your crap in here{/deltemplate}
>
> variants and delegates solve this very nicely.
>
> On Fri, Apr 12, 2013 at 12:02 PM, Marcel Overdijk
> <marceloverd...@gmail.com>wrote:

Kai Huang

unread,
Apr 12, 2013, 5:50:37 PM4/12/13
to closure-temp...@googlegroups.com
You don't need to use delegates. You only need delegates if you need to dynamically select which subtemplate to use at render time.

If all you're looking to do is share some common header/footer code, you can have your specific page call your base page template. Here's the equivalent of your example in Soy code:

/**
 * Base page structure.
 * @param title
 * @param? headExtrasHtml
 * @param contentHtml
 */
{template .basePage}

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <link rel="stylesheet" href="style.css" />
    <title>{$title} - My Webpage</title>
    {if $headExtrasHtml}{$headExtrasHtml}{/if}

  </head>
  <body>
    <div id="content">
      {$contentHtml}
    </div>
    <div id="footer">
      &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>.
    </div>
  </body>
  </html>
{/template}

/**
 * A specific page.
 */
{template .specificPage}
  {call .basePage}
    {param title kind="text"}Index{/param}
    {param headExtrasHtml kind="html"}

      <style type="text/css">
        .important { color: #336699; }
      </style>
    {/param}
    {param contentHtml kind="html"}

      <h1>Index</h1>
      <p class="important">
        Welcome on my awesome homepage.
      </p>
    {/param}
  {/call}
{/template}


Marcel Overdijk

unread,
Apr 15, 2013, 2:18:20 AM4/15/13
to Closure Templates Discuss
Thanks! This looks very suitable for my situation.

Thanks again,
Marcel
Reply all
Reply to author
Forward
0 new messages