Modèles Partiels

Ordre de Recherche dans le Modèle Partiel

Les modèles partiels—comme les modèles de page unique et les modèles de page liste—ont un ordre de recherche spécifique. Néanmoins, les partiels sont plus simples dans le fait que Hugo ne vérifiera que deux endroits :

layouts/partials/*<NOMPARTIEL>.html
themes/<THEME>/layouts/partials/*<NOMPARTIEL>.html

Ce qui permet à un utilisateur final de thème de copier un contenu de partiel à l’intérieur d’un fichier du même nom pour une personnalisation.

Utilisez les Partiels dans vos Modèles

Tous les partiels de votre projet Hugo sont situés dans un unique dossier layouts/partials. Pour une meilleure organisation, vous pouvez tout aussi bien créer plusieurs sous-répertoires dans partials :

.
└── layouts
    └── partials
        ├── footer
        │   ├── scripts.html
        │   └── site-footer.html
        ├── head
        │   ├── favicons.html
        │   ├── metadata.html
        │   ├── prerender.html
        │   └── twitter.html
        └── header
            ├── site-header.html
            └── site-nav.html

Tous les partiels sont appelés dans vos modèles en utilisant le modèle suivant :

{{ partial "<PATH>/<PARTIEL>.html" . }}

Comme le montre l’exemple de structure de dossiers ci-dessus, vous pouvez imbriquer vos répertoires dans les «partials» pour une meilleure organisation source. Il suffit d’appeler le chemin imbriqué du partiel par rapport au répertoire partials :

{{ partial "header/site-header.html" . }}
{{ partial "footer/scripts.html" . }}

Portée de Variable

Le second argument dans un appel à un partiel est la variable transmise. Les exemples ci-dessus passent le ., qui indique au modèle de recevoir le partiel pour appliquer le contexte actuel.

Cela signifie que le partiel ne pourra seulement accéder à ces variables. Le partiel est isolé et n’a pas accès à la portée extérieure. Dans le partiel, $.Var équivaut à .Var.

Partiels Cachés

La fonction de modèle partialCached peut offrir une performance significative pour les modèles complexes qui n’ont pas besoin d’être re-produits à chaque invocation. L’usage le plus simple se fait comme suit :

{{ partialCached "footer.html" . }}

Vous pouvez aussi passer des paramètres supplémentaires à partialCached pour créer des variantes du partiel caché.

Par exemple, vous pouvez dire à Hugo de produire uniquement le partiel footer.html une fois par section :

{{ partialCached "footer.html" . .Section }}

Si vous devez passer des paramètres supplémentaires pour créer des variantes uniques, vous pouvez passer autant de paramètres variants que vous avez besoin :

{{ partialCached "footer.html" . .Params.country .Params.province }}

Notez que les paramètres de variantes ne sont pas mis à la disposition du modèle partiel sous-jacent. Ils ne sont utilisés que pour créer une clé de cache unique.

Exemple `header.html`

Le modèle de partiel header.html qui suit est utilisé pour spf13.com :

layouts/partials/header.html

<!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">

    {{ partial "meta.html" . }}

    <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 }}

    {{ partial "head_includes.html" . }}
</head>
<body lang="en">

Exemple `footer.html`

Le modèle de partiel footer.html qui suit est utilisé pour spf13.com :

layouts/partials/footer.html

<footer>
  <div>
    <p>
    &copy; 2013-14 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>