layouts/_partials/header.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<header class="pagefind-exclude">
  <!-- Header Title -->
  <div class="flex flex-col items-center gap-2">
    {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
    <a class="text-8 font-900 text-center tracking-widest
        xerox underline-offset-10 underline-3"
        href="{{ .Site.LanguagePrefix }}/"
      >{{ .Site.Title }}</a
    >
  </div>
  <!-- Navigation -->
  <div class="flex justify-center items-center gap-3 pl-4">
      <nav class="my-4 flex justify-center items-center w-fit rounded-4 overflow-hidden">
        {{ range .Site.Params.nav }}
        <a class="inline-block py-1 px-2 first:pl-3 last:pr-3
            block hover:no-underline
            {{ if strings.Contains $.Page.RelPermalink .link }}
            text-[var(--text-color)] bg-[var(--block-background-color)]
            {{ else }}
            text-[var(--background-color)] bg-[var(--text-color)]
            {{ end }}"
        href="{{ .link }}" target="{{ .target }}" data-umami-event="💊 Click header navigation">{{ .name }}</a>
        {{ end }}
      </nav>

      {{- $lang := .Site.Language.Lang -}}
      {{- $switch := dict "en" (dict "url" "/zh/" "label" "切换至中文") "zh" (dict "url" "/en/" "label" "Switch to English") -}}
      {{- $entry := index $switch $lang -}}
      <a href="{{ $entry.url }}" data-umami-event="🌍 Switch Language"
          class="no-swup" title="{{ $entry.label }}">
        <img src="/img/globe.svg" class="invert-if-dark block w-[1.2em] h-[1.2em]">
      </a>
  </div>
</header>