Partials

Implement modularity with partials. Possible modules/parts: header, main body, footer, navigation/menu, table of contents, social media links, breadcrumbs.

Create layouts/partials/header.html (creating partials dir)

Version 1

layouts/partials/header.html

<h3>Header partial</h3>
<h1>{{ .Title }}</h1>
<p>{{ .Date }}</p>
Written By : {{ .Params.author }}
<hr />

layouts/_default/single.html

{{ partial "header" . }}

Passing . to partial
Passing the current page as context to the partial so that it would use this page’s title and date. I.e. passing the scope of this page, i.e. all the variables of this scope/page so that the partial can use these variables.

Version 2

layouts/_default/single.html

<h3>Header partial</h3>
<h1>{{ .myTitle }}</h1>
<p>{{ .myDate }}</p>
<hr />

Note that we also use a . (.myTitle)

layouts/_default/single.html Pass in a dictionary, instead of the current page context.

layouts/_default/single.html

{{ partial "header" (dict "myTitle" "myCustomTitle" "myDate" "myCustomDate") }}

Example 3

To pass in a custom CSS color into the partial.
Partial:

<header style="”background-color:" {{ .color }}”>
  <h1>Mike's Travel Blog</h1>
  <hr />
</header>

Layout template that includes this partial:

{{ partial “header.html” (dict “color” “blue” )}}

Data Files Build