2013-08-17 08:34:25 -04:00
|
|
|
|
---
|
2014-05-29 18:42:05 -04:00
|
|
|
|
aliases:
|
|
|
|
|
- /layout/chrome/
|
2016-01-06 17:45:19 -05:00
|
|
|
|
lastmod: 2016-01-01
|
2014-05-29 18:42:05 -04:00
|
|
|
|
date: 2013-07-01
|
2014-04-23 03:00:11 -04:00
|
|
|
|
menu:
|
|
|
|
|
main:
|
2014-05-29 18:42:05 -04:00
|
|
|
|
parent: layout
|
|
|
|
|
next: /templates/rss
|
2016-04-02 11:34:04 -04:00
|
|
|
|
prev: /templates/blocks/
|
2014-05-29 18:42:05 -04:00
|
|
|
|
title: Partial Templates
|
|
|
|
|
weight: 80
|
2015-05-22 14:46:09 -04:00
|
|
|
|
toc: true
|
2013-08-17 08:34:25 -04:00
|
|
|
|
---
|
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
In practice, it's very convenient to split out common template portions into a
|
2014-08-29 23:42:26 -04:00
|
|
|
|
partial template that can be included anywhere. As you create the rest of your
|
2015-04-26 21:34:09 -04:00
|
|
|
|
templates, you will include templates from the /layout/partials directory, or from arbitrary subdirectories like /layout/partials/post/tag.
|
2014-06-06 16:15:19 -04:00
|
|
|
|
|
|
|
|
|
Partials are especially important for themes as it gives users an opportunity
|
|
|
|
|
to overwrite just a small part of your theme, while maintaining future compatibility.
|
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
Theme developers may want to include a few partials with empty HTML
|
2014-06-06 16:15:19 -04:00
|
|
|
|
files in the theme just so end users have an easy place to inject their
|
|
|
|
|
customized content.
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2014-05-27 18:32:57 -04:00
|
|
|
|
I've found it helpful to include a header and footer template in
|
|
|
|
|
partials so I can include those in all the full page layouts. There is
|
|
|
|
|
nothing special about header.html and footer.html other than they seem
|
|
|
|
|
like good names to use for inclusion in your other templates.
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
|
|
|
|
▾ layouts/
|
2014-05-27 18:32:57 -04:00
|
|
|
|
▾ partials/
|
2013-08-17 08:34:25 -04:00
|
|
|
|
header.html
|
|
|
|
|
footer.html
|
|
|
|
|
|
2014-05-27 18:32:57 -04:00
|
|
|
|
By ensuring that we only reference [variables](/layout/variables/)
|
2014-09-03 00:12:26 -04:00
|
|
|
|
used for both nodes and pages, we can use the same partials for both.
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2015-08-04 14:00:08 -04:00
|
|
|
|
## Partial vs Template
|
2014-06-06 16:15:19 -04:00
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
Version v0.12 of Hugo introduced the `partial` call inside the template system.
|
2014-06-06 16:15:19 -04:00
|
|
|
|
This is a change to the way partials were handled previously inside the
|
2014-09-03 00:12:26 -04:00
|
|
|
|
template system. In earlier versions, Hugo didn’t treat partials specially, and
|
2014-08-29 23:42:26 -04:00
|
|
|
|
you could include a partial template with the `template` call in the standard
|
|
|
|
|
template language.
|
2014-06-06 16:15:19 -04:00
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
With the addition of the theme system in v0.11, it became apparent that a theme
|
2014-06-06 16:15:19 -04:00
|
|
|
|
& override aware partial was needed.
|
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
When using Hugo v0.12 and above, please use the `partial` call (and leave out
|
|
|
|
|
the “partial/” path). The old approach would still work, but wouldn’t benefit from
|
2014-06-06 16:15:19 -04:00
|
|
|
|
the ability to have users override the partial theme file with local layouts.
|
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
## Example header.html
|
2015-01-27 21:17:09 -05:00
|
|
|
|
This header template is used for [spf13.com](http://spf13.com/):
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2014-05-15 09:58:55 -04:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html class="no-js" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2014-06-06 16:15:19 -04:00
|
|
|
|
{{ partial "meta.html" . }}
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2015-03-18 02:44:12 -04:00
|
|
|
|
<base href="{{ .Site.BaseURL }}">
|
2014-05-15 09:58:55 -04:00
|
|
|
|
<title> {{ .Title }} : spf13.com </title>
|
|
|
|
|
<link rel="canonical" href="{{ .Permalink }}">
|
2016-11-17 02:18:55 -05:00
|
|
|
|
{{ if .RSSLink }}<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />{{ end }}
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2014-06-06 16:15:19 -04:00
|
|
|
|
{{ partial "head_includes.html" . }}
|
2014-05-15 09:58:55 -04:00
|
|
|
|
</head>
|
|
|
|
|
<body lang="en">
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2014-09-03 00:12:26 -04:00
|
|
|
|
## Example footer.html
|
2015-01-27 21:17:09 -05:00
|
|
|
|
This footer template is used for [spf13.com](http://spf13.com/):
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2014-05-15 09:58:55 -04:00
|
|
|
|
<footer>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
2014-09-03 00:12:26 -04:00
|
|
|
|
© 2013-14 Steve Francia.
|
2015-08-04 14:00:08 -04:00
|
|
|
|
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution">Some rights reserved</a>;
|
2014-05-15 09:58:55 -04:00
|
|
|
|
please attribute properly and link back. Hosted by <a href="http://servergrove.com">ServerGrove</a>.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var _gaq = _gaq || [];
|
|
|
|
|
_gaq.push(['_setAccount', 'UA-XYSYXYSY-X']);
|
|
|
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
|
var ga = document.createElement('script');
|
2015-08-04 14:00:08 -04:00
|
|
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
|
2014-05-15 09:58:55 -04:00
|
|
|
|
'http://www') + '.google-analytics.com/ga.js';
|
|
|
|
|
ga.setAttribute('async', 'true');
|
|
|
|
|
document.documentElement.firstChild.appendChild(ga);
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2013-08-17 08:34:25 -04:00
|
|
|
|
|
2015-08-04 14:00:08 -04:00
|
|
|
|
To reference a partial template stored in a subfolder, e.g. `/layout/partials/post/tag/list.html`, call it this way:
|
2015-04-26 21:34:09 -04:00
|
|
|
|
|
|
|
|
|
{{ partial "post/tag/list" . }}
|
|
|
|
|
|
2015-08-04 14:00:08 -04:00
|
|
|
|
Note that the subdirectories you create under /layout/partials can be named whatever you like.
|
2015-04-26 21:34:09 -04:00
|
|
|
|
|
2016-01-01 16:08:39 -05:00
|
|
|
|
For more examples of referencing these templates, see
|
|
|
|
|
[single content templates](/templates/content/),
|
|
|
|
|
[list templates](/templates/list/) and
|
|
|
|
|
[homepage templates](/templates/homepage/).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Variable scoping
|
|
|
|
|
----------------
|
|
|
|
|
|
2016-08-28 09:21:19 -04:00
|
|
|
|
As you might have noticed, `partial` calls receive two parameters.
|
2016-01-01 16:08:39 -05:00
|
|
|
|
|
|
|
|
|
1. The first is the name of the partial and determines the file
|
|
|
|
|
location to be read.
|
|
|
|
|
2. The second is the variables to be passed down to the partial.
|
|
|
|
|
|
2016-04-14 23:05:24 -04:00
|
|
|
|
This means that the partial will _only_ be able to access those variables. It is
|
2016-01-01 16:08:39 -05:00
|
|
|
|
isolated and has no access to the outer scope. From within the
|
|
|
|
|
partial, `$.Var` is equivalent to `.Var`
|