awin/hugo_blog.awin.one
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add post: 暗黑能天使

Browse Source
This commit is contained in:
Awin Huang
2022-05-10 01:13:38 +08:00
parent e0a0b033ae
commit 90b654e708
104 changed files with 3185 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
layouts/partials/header.html Normal file
View File

@@ -0,0 +1,130 @@
<script>
let storageColorScheme = localStorage.getItem("lightDarkMode")
{{- if eq .Site.Params.colorScheme "light" }}
if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
document.getElementsByTagName('html')[0].classList.add('dark')
}
{{- else if eq .Site.Params.colorScheme "dark" }}
if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: light)").matches) || storageColorScheme == "Light") {
document.getElementsByTagName('html')[0].classList.remove('dark')
}
{{- else }}
if (((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
document.getElementsByTagName('html')[0].classList.add('dark')
}
{{- end }}
</script>
<nav class="flex items-center justify-between flex-wrap px-4 py-4 md:py-0">
<a href="{{ "/" | relLangURL }}" class="me-6 text-primary-text text-xl font-bold">{{ .Site.Title }}</a>
<button id="navbar-btn" class="md:hidden flex items-center px-3 py-2" aria-label="Open Navbar">
<i class="fas fa-bars"></i>
</button>
<div id="target"
class="hidden block md:flex md:grow md:justify-between md:items-center w-full md:w-auto text-primary-text z-20">
<div class="md:flex md:h-16 text-sm md:grow pb-4 md:pb-0 border-b md:border-b-0">
{{- $relPermalink := .RelPermalink }}
{{- range .Site.Menus.main }}
{{- $url := .URL | relLangURL }}
<a href="{{ $url }}" class="block mt-4 md:inline-block md:mt-0 md:h-(16-4px) md:leading-(16-4px) box-border md:border-t-2 md:border-b-2 {{ if hasPrefix $relPermalink $url }} selected-menu-item {{ else }} border-transparent {{ end }} me-4">{{ .Name }}</a>
{{- end }}
</div>
<div class="flex">
<div class="relative pt-4 md:pt-0">
<div class="cursor-pointer hover:text-eureka" id="lightDarkMode">
{{- if eq .Site.Params.colorScheme "dark" }}
<i class="fas fa-moon"></i>
{{- else if eq .Site.Params.colorScheme "light" }}
<i class="fas fa-sun"></i>
{{- else }}
<i class="fas fa-adjust"></i>
{{- end }}
</div>
<div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open">
</div>
<div class="absolute flex flex-col start-0 md:start-auto end-auto md:end-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
id='lightDarkOptions'>
<span class="px-4 py-1 hover:text-eureka" name="Light">{{i18n "light"}}</span>
<span class="px-4 py-1 hover:text-eureka" name="Dark">{{i18n "dark"}}</span>
<span class="px-4 py-1 hover:text-eureka" name="Auto">{{i18n "auto"}}</span>
</div>
</div>
{{- if .IsTranslated }}
<div class="relative pt-4 ps-4 md:pt-0">
<div class="cursor-pointer hover:text-eureka" id="languageMode">
<i class="fas fa-globe"></i>
<span class="ps-1">{{ .Language.LanguageName }}</span>
</div>
<div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open-lang">
</div>
<div class="absolute flex flex-col start-0 md:start-auto end-auto md:end-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
id='languageOptions'>
<a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
{{- range .Translations }}
<a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
{{- end }}
</div>
</div>
{{- end }}
</div>
</div>
<div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-0" id="is-open-mobile">
</div>
</nav>
<script>
// change icon and add listener if auto
let element = document.getElementById('lightDarkMode')
{{- if eq .Site.Params.colorScheme "light" }}
if (storageColorScheme == 'Auto') {
element.firstElementChild.classList.remove('fa-sun')
element.firstElementChild.setAttribute("data-icon", 'adjust')
element.firstElementChild.classList.add('fa-adjust')
document.addEventListener('DOMContentLoaded', () => {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
})
} else if (storageColorScheme == "Dark") {
element.firstElementChild.classList.remove('fa-sun')
element.firstElementChild.setAttribute("data-icon", 'moon')
element.firstElementChild.classList.add('fa-moon')
}
{{- else if eq .Site.Params.colorScheme "dark" }}
if (storageColorScheme == 'Auto') {
element.firstElementChild.classList.remove('fa-moon')
element.firstElementChild.setAttribute("data-icon", 'adjust')
element.firstElementChild.classList.add('fa-adjust')
document.addEventListener('DOMContentLoaded', () => {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
})
} else if (storageColorScheme == "Light") {
element.firstElementChild.classList.remove('fa-moon')
element.firstElementChild.setAttribute("data-icon", 'sun')
element.firstElementChild.classList.add('fa-sun')
}
{{- else }}
if (storageColorScheme == null || storageColorScheme == 'Auto') {
document.addEventListener('DOMContentLoaded', () => {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
})
} else if (storageColorScheme == "Light") {
element.firstElementChild.classList.remove('fa-adjust')
element.firstElementChild.setAttribute("data-icon", 'sun')
element.firstElementChild.classList.add('fa-sun')
} else if (storageColorScheme == "Dark") {
element.firstElementChild.classList.remove('fa-adjust')
element.firstElementChild.setAttribute("data-icon", 'moon')
element.firstElementChild.classList.add('fa-moon')
}
{{- end }}
document.addEventListener('DOMContentLoaded', () => {
getcolorscheme();
switchBurger();
{{- if .IsTranslated }}
switchLanguage()
{{- end }}
});
</script>