[Hugo] Notes sur la mise en place d'un template hugo #hugo #markdown

config.toml

[menu]
[[menu.nav]]
  name = 'Accueil'
  url = '/'
  weight = 1
[[menu.nav]]
  name = 'Blog'
  url = '/blog'
  weight = 2
[[menu.nav]]
  name = 'Talks'
  url = '/talks'
  weight = 3
[[menu.nav]]
  name = 'À propos'
  url = '/a-propos'
  weight = 4

img.html

{{ $image := $.Page.Resources.GetMatch (.Get "src")}}
{{ $desktopImage := $image.Resize "620x jpg" }}
{{ $desktopImageWebp := $image.Resize "620x webp" }}
{{ $mobileImage := $image.Resize "350x jpg" }}
{{ $mobileImageWebp := $image.Resize "350x webp" }}
<figure class="image" role="figure">
        <picture>
            {{ if gt $image.Width $mobileImage.Width}}
            <source srcset="{{ $mobileImage.RelPermalink }} {{ $mobileImage.Width }}w" media="(max-width: 399px)" type="image/jpeg">
            <source srcset="{{ $mobileImageWebp.RelPermalink }} {{ $mobileImageWebp.Width }}w" media="(max-width: 399px)" type="image/webp">
            {{ end }}
            {{ if eq $desktopImage.Width $image.Width}}
            <source srcset="{{ $image.RelPermalink }}" media="(min-width: 400px)" type="image/jpeg">
            <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Get "alt" }}" />
            {{ else }}
            <source srcset="{{ $desktopImage.RelPermalink }} {{ $desktopImage.Width }}w" media="(min-width: 400px)" type="image/jpeg">
            <source srcset="{{ $desktopImageWebp.RelPermalink }} {{ $desktopImage.Width }}w" media="(max-width: 399px)" type="image/webp">
            <a href="{{ $image.RelPermalink }}" alt="{{ $.Get "alt" }}">
                <img src="{{ $desktopImage.RelPermalink }}" width="{{ $desktopImage.Width }}" height="{{ $desktopImage.Height }}" alt="{{ $.Get "alt" }}" />
            </a>
            {{ end }}
    <figcaption>{{ .Get "alt" }}</figcaption>
</figure>

index.html

{{ define "main" }}
<div class="home">
  {{$posts := ($.Site.GetPage "section" "blog").Pages.ByPublishDate.Reverse}}
  {{ range first 1 $posts }}
    {{ partial "latest-blog-item.html" . }}
  {{ end }}
  <section class="post-list">
      <h1 class="section-title">Articles récents</h1>
      {{ range $elem_index, $elem_val := first 3 $posts }}
        {{ with $elem_index }}
          {{ partial "blog-item.html" $elem_val }}
        {{ end }}
      {{ end }}
  </section>
  <section class="post-list">
    <h1 class="section-title">Talks récents</h1>
    {{$talks := ($.Site.GetPage "section" "talks").Pages.ByPublishDate.Reverse}}
    {{ range first 2 $talks }}
      {{ partial "talk-item.html" . }}
    {{ end }}
</section>
</div>
{{ end }}

menu.html

<div class="menu-list">
    {{ $current := . }}
    {{ range .Site.Menus.nav }}
    {{ $active := or ($current.IsMenuCurrent "nav" .) ($current.HasMenuCurrent "nav" .) }}
    {{ $active = or $active (eq .Name $current.Title) }}
    {{ $active = or $active (and (eq .Name "Blog") (eq $current.Section "post")) }}
    {{ $active = or $active (and (eq .Name "Tags") (eq $current.Section "tags")) }}
    <a href="{{ .URL }}" {{ if $active }}aria-current="page" class="active"{{ end }} >{{ .Name }}</a>
    {{ end }}
</div>