hugo/docs/content/templates/partials.md

106 lines
3.7 KiB
Markdown
Raw Normal View History

2013-08-17 08:34:25 -04:00
---
2014-05-29 18:42:05 -04:00
aliases:
- /layout/chrome/
date: 2013-07-01
menu:
main:
2014-05-29 18:42:05 -04:00
parent: layout
next: /templates/rss
prev: /templates/views
title: Partial Templates
weight: 80
2013-08-17 08:34:25 -04:00
---
It's not a requirement to have this, but in practice it's very
convenient to split out common template portions into a partial template
that can be included anywhere. As you create the rest of your templates
you will include templates from the /layout/partials directory.
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.
In fact theme developers may want to include a few partials with empty html
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
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/
▾ partials/
2013-08-17 08:34:25 -04:00
header.html
footer.html
By ensuring that we only reference [variables](/layout/variables/)
used for both nodes and pages we can use the same partials for both.
2013-08-17 08:34:25 -04:00
## Partial vs Template
Version v0.12 of Hugo introduced the partial call inside the template system.
This is a change to the way partials were handled previously inside the
template system. This is a change to hthe way partials were handled previously.
Previously Hugo didnt treat partials specially and you could include a partial
template with the `template` call in the standard template language.
With the addition of the theme system in v0.11 it became apparent that a theme
& override aware partial was needed.
When using Hugo v0.12 and above please use the `partial` call (and leave out
the “partial/” path). The old approach will still work, but wont benefit from
the ability to have users override the partial theme file with local layouts.
2013-08-17 08:34:25 -04:00
## example header.html
This header template is used for [spf13.com](http://spf13.com).
<!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
{{ partial "meta.html" . }}
2013-08-17 08:34:25 -04:00
<base href="{{ .Site.BaseUrl }}">
<title> {{ .Title }} : spf13.com </title>
<link rel="canonical" href="{{ .Permalink }}">
{{ if .RSSlink }}<link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />{{ end }}
2013-08-17 08:34:25 -04:00
{{ partial "head_includes.html" . }}
</head>
<body lang="en">
2013-08-17 08:34:25 -04:00
## example footer.html
This header template is used for [spf13.com](http://spf13.com).
<footer>
<div>
<p>
&copy; 2013 Steve Francia.
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution">Some rights reserved</a>;
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');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'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
**For examples of referencing these templates, see [single content
templates](/templates/content), [list templates](/templates/list) and [homepage templates](/templates/homepage)**