使用 Swup 实现网页平滑过渡

{{- partial "init.html" . -}}

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noodp" />

    {{- /* Paginate  */ -}}
    {{- /* Paginate in here, To solve the problem of the canonical URL being the same in the pagination */ -}}
    {{- /* see more https://github.com/gohugoio/hugo/issues/4507 */ -}}
    {{- /* see more https://discourse.gohugo.io/t/control-pagination-and-page-collections-from-baseof-html/37643/8 */ -}}
    {{- /* see more https://discourse.gohugo.io/t/determine-if-current-page-is-result-of-pagination/37494/4 */ -}}
    {{- partial "head/paginator.html" . -}}

    <title>
        {{- block "title" . }}{{ .Site.Title }}{{ end -}}
    </title>

    {{- partial "head/meta.html" . -}}
    {{- partial "head/link.html" . -}}
    {{- partial "head/seo.html" . -}}
    
{{- $instantpage := .Scratch.Get "instantpage" | default dict -}}
{{- if $instantpage.enable -}}
    <script src="//instant.page/5.2.0" defer type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
{{- end -}}

{{- $instantpage := .Site.Params.page.instantpage.enable -}}
{{- if $instantpage -}}
{{- $js := resources.Get "/lib/instant.page/instantpage.min.js" -}}
  <script
    src="{{ $js.RelPermalink }}"
    defer
    type="module"
  ></script>
{{- end -}}
    <script src="https://cdn.staticfile.net/swup/4.5.1/Swup.umd.min.js"></script>
    <script src="https://unpkg.com/@swup/scripts-plugin@2"></script>
    <script data-swup-ignore-script>
        const swup = new Swup({
            plugins: [new SwupScriptsPlugin({
                body: true,
                head: true
            })]
        });
        document.addEventListener('DOMContentLoaded', () => {
            console.log("Swup Running");
        });
    </script>
</head>

<body header-desktop="{{ .Site.Params.header.desktopMode }}" header-mobile="{{ .Site.Params.header.mobileMode }}">
    {{- /* Check theme isDark before body rendering */ -}}
    {{- $theme := .Site.Params.defaulttheme -}}
    <script data-swup-ignore-script type="text/javascript">
        function setTheme(theme) {
          document.body.setAttribute('theme', theme); 
          document.documentElement.style.setProperty('color-scheme', theme === 'light' ? 'light' : 'dark');
          if (theme === 'light') {
            document.documentElement.classList.remove('tw-dark')
          } else {
            document.documentElement.classList.add('tw-dark')
          }
          window.theme = theme;   
          window.isDark = window.theme !== 'light' 
        }
        function saveTheme(theme) {window.localStorage && localStorage.setItem('theme', theme);}
        function getMeta(metaName) {const metas = document.getElementsByTagName('meta'); for (let i = 0; i < metas.length; i++) if (metas[i].getAttribute('name') === metaName) return metas[i]; return '';}
        if (window.localStorage && localStorage.getItem('theme')) {let theme = localStorage.getItem('theme');theme === 'light' || theme === 'dark' || theme === 'black' ? setTheme(theme) : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? setTheme('dark') : setTheme('light')); } else { if ('{{ $theme }}' === 'light' || '{{ $theme }}' === 'dark' || '{{ $theme }}' === 'black') setTheme('{{ $theme }}'), saveTheme('{{ $theme }}'); else saveTheme('auto'), window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? setTheme('dark') : setTheme('light');}
        let metaColors = {'light': '#f8f8f8','dark': '#252627','black': '#000000'}
        getMeta('theme-color').content = metaColors[document.body.getAttribute('theme')];
        window.switchThemeEventSet = new Set()
    </script>
    <div id="back-to-top"></div>
    <div id="mask"></div>

    {{- /* Body wrapper */ -}}
    <div class="wrapper">
        {{- partial "header.html" . -}}
        <main class="main transition-fade" id="swup">
            <div class="container">
                {{- block "content" . }}{{ end -}}
            </div>
            {{- /* Load JavaScript scripts and CSS */ -}}
            {{- partial "assets.html" . -}}
        </main>
        {{- partial "footer.html" . -}}
    </div>

    <div id="fixed-buttons" class="print:!tw-hidden">
        {{- /* top button */ -}}
        <a href="#back-to-top" id="back-to-top-button" class="fixed-button" title="{{ T `backToTop` }}">
            {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "arrow-up") }}
        </a>

        {{- /* comment button */ -}}
        <a href="#" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
            {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "comment") }}
        </a>
    </div>


</body>

</html>