mirror of
https://gitee.com/butubb8/blowfish.git
synced 2025-12-05 14:17:50 +08:00
300 lines
11 KiB
HTML
300 lines
11 KiB
HTML
{{/* Logo section */}}
|
|
{{ define "HeaderLogo" }}
|
|
{{ if .Site.Params.Logo }}
|
|
{{ $logo := resources.Get .Site.Params.Logo }}
|
|
{{ if $logo }}
|
|
<div>
|
|
<a href="{{ "" | relLangURL }}" class="flex">
|
|
<span class="sr-only">{{ .Site.Title | markdownify }}</span>
|
|
{{ if eq $logo.MediaType.SubType "svg" }}
|
|
<span class="logo object-scale-down object-left nozoom">
|
|
{{ $logo.Content | safeHTML }}
|
|
</span>
|
|
{{ else }}
|
|
<img
|
|
src="{{ $logo.RelPermalink }}"
|
|
width="{{ div $logo.Width 2 }}"
|
|
height="{{ div $logo.Height 2 }}"
|
|
class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom"
|
|
alt="{{ .Site.Title }}">
|
|
{{ end }}
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
{{- end }}
|
|
{{ end }}
|
|
|
|
{{/* Desktop navigation */}}
|
|
{{ define "HeaderDesktopNavigation" }}
|
|
<nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
|
|
{{ if .Site.Menus.main }}
|
|
{{ range .Site.Menus.main }}
|
|
{{ partial "header/header-option.html" . }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ partial "translations.html" . }}
|
|
{{ if .Site.Params.enableA11y | default false }}
|
|
{{ template "HeaderA11y" (dict "prefix" "desktop-" "Site" .Site) }}
|
|
{{ end }}
|
|
|
|
{{ if .Site.Params.enableSearch | default false }}
|
|
<button
|
|
id="search-button"
|
|
aria-label="Search"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
|
title="{{ i18n "search.open_button_title" }}">
|
|
{{ partial "icon.html" "search" }}
|
|
</button>
|
|
{{ end }}
|
|
|
|
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
|
<div class="{{ if .Site.Params.footer.showScrollToTop | default true -}}{{- end }} flex items-center">
|
|
<button
|
|
id="appearance-switcher"
|
|
aria-label="Dark mode switcher"
|
|
type="button"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400">
|
|
<div class="flex items-center justify-center dark:hidden">
|
|
{{ partial "icon.html" "moon" }}
|
|
</div>
|
|
<div class="items-center justify-center hidden dark:flex">
|
|
{{ partial "icon.html" "sun" }}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
{{ end }}
|
|
</nav>
|
|
{{ end }}
|
|
|
|
{{/* Mobile navigation */}}
|
|
{{ define "HeaderMobileNavigation" }}
|
|
<div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
|
|
<span></span>
|
|
|
|
{{ partial "translations.html" . }}
|
|
{{ if .Site.Params.enableA11y | default false }}
|
|
{{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
|
|
{{ end }}
|
|
|
|
{{ if .Site.Params.enableSearch | default false }}
|
|
<button
|
|
id="search-button-mobile"
|
|
aria-label="Search"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
|
title="{{ i18n "search.open_button_title" }}">
|
|
{{ partial "icon.html" "search" }}
|
|
</button>
|
|
{{ end }}
|
|
|
|
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
|
<button
|
|
id="appearance-switcher-mobile"
|
|
aria-label="Dark mode switcher"
|
|
type="button"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400 me-1">
|
|
<div class="flex items-center justify-center dark:hidden">
|
|
{{ partial "icon.html" "moon" }}
|
|
</div>
|
|
<div class="items-center justify-center hidden dark:flex">
|
|
{{ partial "icon.html" "sun" }}
|
|
</div>
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ define "HeaderMobileMenu" }}
|
|
<div class="-my-2 md:hidden">
|
|
<div id="menu-button" class="block">
|
|
{{ if .Site.Menus.main }}
|
|
<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
|
{{ partial "icon.html" "bars" }}
|
|
</div>
|
|
<div
|
|
id="menu-wrapper"
|
|
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
|
|
<ul
|
|
class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
|
<li id="menu-close-button">
|
|
<span
|
|
class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
|
|
{{ partial "icon.html" "xmark" }}
|
|
</span>
|
|
</li>
|
|
|
|
{{ range .Site.Menus.main }}
|
|
{{ partial "header/header-mobile-option.html" . }}
|
|
{{ end }}
|
|
|
|
</ul>
|
|
{{ if .Site.Menus.subnavigation }}
|
|
<hr>
|
|
<ul
|
|
class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
|
{{ range .Site.Menus.subnavigation }}
|
|
<li class="mb-1">
|
|
<a
|
|
href="{{ .URL }}"
|
|
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
|
|
target="_blank"
|
|
{{ end }}
|
|
class="flex items-center">
|
|
{{ if .Pre }}
|
|
<span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
|
|
{{ partial "icon.html" .Pre }}
|
|
</span>
|
|
{{ end }}
|
|
<p class="text-sm font-sm" title="{{ .Title }}">
|
|
{{ .Name | markdownify }}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ define "HeaderA11y" }}
|
|
{{- $prefix := .prefix | default "" -}}
|
|
<div class="flex items-center">
|
|
<button
|
|
id="{{ $prefix }}a11y-toggle"
|
|
aria-label="Open accessibility panel"
|
|
aria-expanded="false"
|
|
type="button"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
|
role="button"
|
|
aria-pressed="false">
|
|
{{ partial "icon.html" "a11y" }}
|
|
</button>
|
|
|
|
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
|
|
|
|
<div
|
|
id="{{ $prefix }}a11y-panel"
|
|
role="dialog"
|
|
aria-labelledby="{{ $prefix }}a11y-panel-title"
|
|
class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
|
|
style="min-width: 20rem;">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3
|
|
id="{{ $prefix }}a11y-panel-title"
|
|
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
|
{{ i18n "a11y.title" }}
|
|
</h3>
|
|
<button
|
|
id="{{ $prefix }}a11y-close"
|
|
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
|
aria-label="Close a11y panel">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-5">
|
|
{{ $toggles := slice }}
|
|
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
|
|
{{ if $shouldDisableBlur }}
|
|
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
|
|
{{ end }}
|
|
{{- $toggles = $toggles | append
|
|
(dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images"))
|
|
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
|
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
|
|
-}}
|
|
|
|
{{- range $toggles }}
|
|
<div class="flex items-center justify-between">
|
|
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
{{ .label }}
|
|
</label>
|
|
<div class="ios-toggle">
|
|
<input type="checkbox" id="{{ .id }}">
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
<label
|
|
for="{{ $prefix }}font-size-select"
|
|
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
{{ i18n "a11y.font_size" }}
|
|
</label>
|
|
<select
|
|
id="{{ $prefix }}font-size-select"
|
|
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
|
|
{{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
|
|
{{ range $fontSizes }}
|
|
<option value="{{ . }}">{{ . }}</option>
|
|
{{ end }}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{/* ========== Render HTML ========== */}}
|
|
<div
|
|
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
|
|
{{ template "HeaderLogo" . }}
|
|
<div class="flex flex-1 items-center justify-between">
|
|
<nav class="flex space-x-3">
|
|
{{ if not .Site.Params.disableTextInHeader | default true }}
|
|
<a href="{{ "" | relLangURL }}" class="text-base font-medium">
|
|
{{ .Site.Title | markdownify }}
|
|
</a>
|
|
{{ end }}
|
|
</nav>
|
|
{{ template "HeaderDesktopNavigation" . }}
|
|
{{ template "HeaderMobileNavigation" . }}
|
|
</div>
|
|
{{ template "HeaderMobileMenu" . }}
|
|
</div>
|
|
|
|
{{ if .Site.Menus.subnavigation }}
|
|
<div
|
|
class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
|
|
-mt-[15px]
|
|
{{ end }}">
|
|
<div class="hidden md:flex items-center space-x-5">
|
|
{{ range .Site.Menus.subnavigation }}
|
|
<a
|
|
href="{{ .URL }}"
|
|
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
|
target="_blank"
|
|
{{ end }}
|
|
class="flex items-center">
|
|
{{ if .Pre }}
|
|
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
|
{{ partial "icon.html" .Pre }}
|
|
</span>
|
|
{{ end }}
|
|
<p class="text-xs font-light" title="{{ .Title }}">
|
|
{{ .Name | markdownify }}
|
|
</p>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if .Site.Params.highlightCurrentMenuArea }}
|
|
<script>
|
|
(function () {
|
|
var $mainmenu = $(".main-menu");
|
|
var path = window.location.pathname;
|
|
$mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
|
|
$(e).children("p").addClass("active");
|
|
});
|
|
})();
|
|
</script>
|
|
{{ end }}
|