summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEltrac <eltrac233@gmail.com>2024-11-27 16:05:45 +0800
committerEltrac <eltrac233@gmail.com>2024-11-27 16:05:45 +0800
commit51be0de76699d09114d045e1865788694340af82 (patch)
tree5bb3c26e009f4a6d9d19c8e01bfb963e2e79ec15
parent0ecef21d36abda707d22369d711bbab42dde9790 (diff)
feat(theme): use swup to boost UX
Diffstat
-rw-r--r--hugo.toml19
-rw-r--r--themes/yinyang/assets/css/index.css15
-rw-r--r--themes/yinyang/assets/js/lazyload.min.js (renamed from themes/yinyang/static/js/lazyload.min.js)0
-rw-r--r--themes/yinyang/assets/js/waline.js (renamed from themes/yinyang/static/js/waline.js)0
-rw-r--r--themes/yinyang/layouts/_default/list.html52
-rw-r--r--themes/yinyang/layouts/_default/single.html149
-rw-r--r--themes/yinyang/layouts/index.html111
-rw-r--r--themes/yinyang/layouts/partials/footer.html8
-rw-r--r--themes/yinyang/layouts/partials/head.html8
-rw-r--r--themes/yinyang/layouts/partials/scripts.html20
-rw-r--r--themes/yinyang/layouts/partials/uselibs/swup.html22
-rw-r--r--themes/yinyang/layouts/partials/uselibs/vercel-analytics.html4
-rw-r--r--themes/yinyang/layouts/partials/uselibs/waline.html0
13 files changed, 209 insertions, 199 deletions
diff --git a/hugo.toml b/hugo.toml
index 5db21c04..42cd882b 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -19,25 +19,6 @@ hasCJKLanguage = true
[params]
headTitle = "極客死亡計劃"
mainSections = ["posts"]
-postFooterContent = '''
-<div id="waline"></div>
- <script type="module">
- import { init } from '/js/waline.js';
-
- const options = {
- el: '#waline',
- serverURL: 'https://waline.geedea.pro',
- dark: 'auto',
- pageview: true,
- };
-
- if (location.href.includes('localhost') || location.href.includes('127.0.0.1')) {
- options.pageview = false;
- }
-
- init(options);
- </script>
-'''
favicon = "/favicon.png"
[[params.socials]]
diff --git a/themes/yinyang/assets/css/index.css b/themes/yinyang/assets/css/index.css
index 8db19108..674d8304 100644
--- a/themes/yinyang/assets/css/index.css
+++ b/themes/yinyang/assets/css/index.css
@@ -561,4 +561,17 @@ a.blog-link img {
height: var(--size);
border-radius: 100%;
z-index: 0;
-} \ No newline at end of file
+}
+
+/* transition animation */
+
+/* Define a transition duration during page visits */
+html.is-changing .transition-fade {
+ transition: opacity 0.25s;
+ opacity: 1;
+}
+
+/* Define the styles for the unloaded pages */
+html.is-animating .transition-fade {
+ opacity: 0;
+}
diff --git a/themes/yinyang/static/js/lazyload.min.js b/themes/yinyang/assets/js/lazyload.min.js
index de094a9f..de094a9f 100644
--- a/themes/yinyang/static/js/lazyload.min.js
+++ b/themes/yinyang/assets/js/lazyload.min.js
diff --git a/themes/yinyang/static/js/waline.js b/themes/yinyang/assets/js/waline.js
index 8cbc5d36..8cbc5d36 100644
--- a/themes/yinyang/static/js/waline.js
+++ b/themes/yinyang/assets/js/waline.js
diff --git a/themes/yinyang/layouts/_default/list.html b/themes/yinyang/layouts/_default/list.html
index ff829709..18c01247 100644
--- a/themes/yinyang/layouts/_default/list.html
+++ b/themes/yinyang/layouts/_default/list.html
@@ -3,36 +3,38 @@
{{ partial "head.html" . }}
<body>
- <article class="posts">
- <div class="row">
- <div class="col-xs-12">
- {{ partial "header.html" . }}
-
- <h1 class="taxonomy-term">{{.Data.Term}}</h1>
- <div id="posts-list">
- {{ range .Pages }}
- <div class="row posts-line">
- <div class="posts-date col-xs-2">
- <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "06/01/02"}}</time>
- </div>
- <div class="posts-title col-xs-10">
- <div class="row">
- <div class="col-xs-12">
- <a href="{{ .RelPermalink }}">
- {{ .Title }}{{ with .Params.subtitle }}：<span class="posts-subtitle">{{. }}</span>
- {{ end }}
- </a>
+ <main id="swup" class="transition-fade">
+ <article class="posts">
+ <div class="row">
+ <div class="col-xs-12">
+ {{ partial "header.html" . }}
+
+ <h1 class="taxonomy-term">{{.Data.Term}}</h1>
+ <div id="posts-list">
+ {{ range .Pages }}
+ <div class="row posts-line">
+ <div class="posts-date col-xs-2">
+ <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "06/01/02"}}</time>
+ </div>
+ <div class="posts-title col-xs-10">
+ <div class="row">
+ <div class="col-xs-12">
+ <a href="{{ .RelPermalink }}">
+ {{ .Title }}{{ with .Params.subtitle }}：<span class="posts-subtitle">{{. }}</span>
+ {{ end }}
+ </a>
+ </div>
</div>
</div>
</div>
- </div>
- {{ end }}
+ {{ end }}
+ </div>
+
+ {{ partial "footer.html" . }}
</div>
-
- {{ partial "footer.html" . }}
</div>
- </div>
- </article>
+ </article>
+ </main>
{{ partial "scripts.html" . }}
</body>
diff --git a/themes/yinyang/layouts/_default/single.html b/themes/yinyang/layouts/_default/single.html
index c194ccb2..2c8c6473 100644
--- a/themes/yinyang/layouts/_default/single.html
+++ b/themes/yinyang/layouts/_default/single.html
@@ -3,87 +3,98 @@
{{ partial "head.html" . }}
<body>
- <article class="post {{ .Site.Language.LanguageName }}" id="article">
- <div class="row">
- <div class="col-xs-12">
- <div class="site-header">
- {{ partial "header.html" . }}
- </div>
- <header class="post-header">
- <h1 class="post-title">
- {{ .Title }}
- {{ with .Params.subtitle }}
- <small class="post-subtitle">{{ . }}</small>
- {{ end }}
- </h1>
-
-
- {{ if in .Site.Params.mainSections .Type }}
- <div class="row post-desc">
- <div class="col-xs-6">
- {{ if .Date }}
- <time class="post-date" datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">
- {{ .Date.Format "02 Jan 2006" }}
- </time>
+ <main id="swup" class="transition-fade">
+ <article class="post {{ .Site.Language.LanguageName }}" id="article">
+ <div class="row">
+ <div class="col-xs-12">
+ <div class="site-header">
+ {{ partial "header.html" . }}
+ </div>
+ <header class="post-header">
+ <h1 class="post-title">
+ {{ .Title }}
+ {{ with .Params.subtitle }}
+ <small class="post-subtitle">{{ . }}</small>
{{ end }}
- <span> / </span>
- <span>
- <span class="waline-pageview-count">…</span>
- Views
- </span>
- </div>
- <div class="col-xs-6">
- {{ if .Site.Author.name }}
- <div class="post-author">
- <a target="_blank" href="{{ .Site.Author.homepage }}">@{{ .Site.Author.name }}</a>
+ </h1>
+
+
+ {{ if in .Site.Params.mainSections .Type }}
+ <div class="row post-desc">
+ <div class="col-xs-6">
+ {{ if .Date }}
+ <time class="post-date" datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">
+ {{ .Date.Format "02 Jan 2006" }}
+ </time>
+ {{ end }}
+ <span> / </span>
+ <span>
+ <span class="waline-pageview-count">…</span>
+ Views
+ </span>
+ </div>
+ <div class="col-xs-6">
+ {{ if .Site.Author.name }}
+ <div class="post-author">
+ <a target="_blank" href="{{ .Site.Author.homepage }}">@{{ .Site.Author.name }}</a>
+ </div>
+ {{ end }}
</div>
- {{ end }}
- </div>
- </div>
- {{ end }}
- </header>
-
- <div class="post-content markdown-body">
- {{ .Site.Params.postHeaderContent | safeHTML }}
- {{ .Content }}
- </div>
-
- <div class="row middle-xs">
- <div class="col-xs-12">
- {{ range .Params.tags }}
- <div class="post-tags">
- <a href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">
- {{ . }}
- </a>
</div>
{{ end }}
+ </header>
+
+ <div class="post-content markdown-body">
+ {{ .Site.Params.postHeaderContent | safeHTML }}
+ {{ .Content }}
</div>
- </div>
- {{ if in .Site.Params.mainSections .Type }}
- <div class="row">
+
+ <div class="row middle-xs">
<div class="col-xs-12">
- {{ .Site.Params.postFooterContent | safeHTML }}
+ {{ range .Params.tags }}
+ <div class="post-tags">
+ <a href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">
+ {{ . }}
+ </a>
+ </div>
+ {{ end }}
</div>
</div>
+ {{ if in .Site.Params.mainSections .Type }}
+ <div class="row">
+ <div class="col-xs-12">
+ {{ .Site.Params.postFooterContent | safeHTML }}
+ </div>
+ </div>
- {{ partial "related.html" . }}
+ <!-- waline -->
+ <div style="height: 50px;"></div>
+ <div class="post-comments">
+ <div id="waline"></div>
+ <script type="module">
+ import { init } from '/js/waline.js'
- {{ if .Site.Params.postAds }}
- <div class="post-ads">{{ .Site.Params.postAds | safeHTML }}</div>
- {{ end }}
- <!-- split -->
- <div style="height: 50px;"></div>
- {{ if .Site.Params.disqus }}
- <div class="post-comments">
- {{ partial "disqus.html" . }}
- </div>
- {{ end }}
- {{ end }}
+ const options = {
+ el: '#waline',
+ serverURL: 'https://waline.geedea.pro',
+ dark: 'auto',
+ pageview: true,
+ };
+
+ if (location.href.includes('localhost') || location.href.includes('127.0.0.1')) {
+ options.pageview = false;
+ }
- {{ partial "footer.html" . }}
+ init(options);
+ </script>
+ </div>
+ {{ end }}
+
+ {{ partial "footer.html" . }}
+ </div>
</div>
- </div>
- </article>
+ </article>
+ </main>
{{ partial "scripts.html" . }}
{{ if .Site.Params.extraBody }}
diff --git a/themes/yinyang/layouts/index.html b/themes/yinyang/layouts/index.html
index baf542f6..c1d463fe 100644
--- a/themes/yinyang/layouts/index.html
+++ b/themes/yinyang/layouts/index.html
@@ -3,69 +3,70 @@
{{ partial "head.html" . }}
<body>
- <article class="posts">
- <div class="row">
- <div class="col-xs-12">
- {{ partial "header.html" . }}
- <div id="posts-list">
- {{ $currentYear := now.Format "2006" }} <!-- 获取当前年份 -->
-
- {{ $isFirstPost := true }} <!-- 用于标记首页的第一篇文章 -->
-
- {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}}
- <section class="posts-year-section">
- <h1 class="site-date-catalog posts-year-title">{{ .Key }}</h1>
-
- {{ range .Pages.GroupByDate "01" }}
- <h2>{{ .Key }} 月</h2>
- <ul>
- {{ range .Pages }}
- <li class="{{ if $isFirstPost }}first-post{{ end }}">
- <!-- 首页第一篇文章特殊展示 -->
- <div class="row posts-line {{ if $isFirstPost }}featured-post{{ end }}">
- <div class="posts-date col-xs-3 col-sm-2">
- <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "Jan 02" }}</time>
- </div>
- <div class="posts-title col-xs-9 col-sm-10">
- <div class="row">
- <div class="col-xs-11 col-sm-10">
- <a href="{{ .RelPermalink }}">{{ .Title }}</a>
- <div class="posts-excerpt">
- {{ if $isFirstPost }}
- {{ if .Params.description }}
- <p>{{.Params.description }}</p>
- {{ else }}
- {{ .Summary }}
+ <main id="swup" class="transition-fade">
+ <article class="posts">
+ <div class="row">
+ <div class="col-xs-12">
+ {{ partial "header.html" . }}
+ <div id="posts-list">
+ {{ $currentYear := now.Format "2006" }} <!-- 获取当前年份 -->
+
+ {{ $isFirstPost := true }} <!-- 用于标记首页的第一篇文章 -->
+
+ {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}}
+ <section class="posts-year-section">
+ <h1 class="site-date-catalog posts-year-title">{{ .Key }}</h1>
+
+ {{ range .Pages.GroupByDate "01" }}
+ <h2>{{ .Key }} 月</h2>
+ <ul>
+ {{ range .Pages }}
+ <li class="{{ if $isFirstPost }}first-post{{ end }}">
+ <!-- 首页第一篇文章特殊展示 -->
+ <div class="row posts-line {{ if $isFirstPost }}featured-post{{ end }}">
+ <div class="posts-date col-xs-3 col-sm-2">
+ <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "Jan 02" }}</time>
+ </div>
+ <div class="posts-title col-xs-9 col-sm-10">
+ <div class="row">
+ <div class="col-xs-11 col-sm-10">
+ <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+ <div class="posts-excerpt">
+ {{ if $isFirstPost }}
+ {{ if .Params.description }}
+ <p>{{.Params.description }}</p>
+ {{ else }}
+ {{ .Summary }}
+ {{ end }}
+ {{ $isFirstPost = false }}
{{ end }}
- {{ $isFirstPost = false }}
- {{ end }}
+ </div>
</div>
- </div>
- <div class="col-xs-1 col-sm-2 posts-categories">
- {{ with .Params.categories }}
- <div class="posts-category">
- <a href="/categories/{{ . }}/"><strong>{{ . }}</strong></a>
+ <div class="col-xs-1 col-sm-2 posts-categories">
+ {{ with .Params.categories }}
+ <div class="posts-category">
+ <a href="/categories/{{ . }}/"><strong>{{ . }}</strong></a>
+ </div>
+ {{ end }}
</div>
- {{ end }}
</div>
</div>
</div>
- </div>
- </li>
- {{ end }}
- </ul>
- {{ end }}
-
- </section>
- <hr>
- {{ end }}
+ </li>
+ {{ end }}
+ </ul>
+ {{ end }}
+
+ </section>
+ <hr>
+ {{ end }}
+ </div>
+
+ {{ partial "footer.html" . }}
</div>
-
- {{ partial "footer.html" . }}
</div>
- </div>
- </article>
-
+ </article>
+ </main>
{{ partial "scripts.html" . }}
</body>
diff --git a/themes/yinyang/layouts/partials/footer.html b/themes/yinyang/layouts/partials/footer.html
index 4e6a2566..eb47b194 100644
--- a/themes/yinyang/layouts/partials/footer.html
+++ b/themes/yinyang/layouts/partials/footer.html
@@ -1,10 +1,10 @@
<div class="site-footer">
-
+ <!-- 全站字数统计-->
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
-<div class="site-footer-item">🪦 {{$scratch.Get "total" }} 字在这里<span style="display:inline-block; transform:rotate(7deg) translateY(0.15rem); filter: blur(1px)">死去</span></div>
+ <div class="site-footer-item">🪦 {{$scratch.Get "total" }} 字在这里<span style="display:inline-block; transform:rotate(7deg) translateY(0.15rem); filter: blur(1px)">死去</span></div>
<p style="text-align: center;">You've reached the end.</p>
@@ -16,8 +16,4 @@
<!-- <div class="site-footer-item">
<a href="https://github.com/joway/hugo-theme-yinyang" target="_blank">Theme</a>
</div> -->
- <script>
- window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
- </script>
- <script defer src="/_vercel/insights/script.js"></script>
</div> \ No newline at end of file
diff --git a/themes/yinyang/layouts/partials/head.html b/themes/yinyang/layouts/partials/head.html
index e8178a62..8a11ad2e 100644
--- a/themes/yinyang/layouts/partials/head.html
+++ b/themes/yinyang/layouts/partials/head.html
@@ -59,14 +59,6 @@
<link href="{{ .Site.Params.staticPrefix }}{{ "index.xml" | relURL }}" rel="alternate" type="application/rss+xml"
title="{{ .Site.Title }}">
- <!-- quicklink require -->
- <!-- <script>
- /* Disable minification (remove `.min` from URL path) for more info
- https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver
- */
- (function (undefined) { }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
- </script> -->
-
{{ if .Site.Params.TwitterCards }}{{ template "_internal/twitter_cards.html" . }}{{ end }}
{{ .Site.Params.extraHead | safeHTML }}
</head>
diff --git a/themes/yinyang/layouts/partials/scripts.html b/themes/yinyang/layouts/partials/scripts.html
index d2fa2810..3764145d 100644
--- a/themes/yinyang/layouts/partials/scripts.html
+++ b/themes/yinyang/layouts/partials/scripts.html
@@ -1,16 +1,4 @@
-<!-- <script src="https://unpkg.com/quicklink@0.1.1/dist/quicklink.umd.js"></script> -->
-{{ if and .Site.Params.lazyImage (not .IsHome) -}}
-<script src="{{ .Site.Params.staticPrefix }}{{ "js/lazyload.min.js" | relURL }}"></script>
-<script>
- var lazyImage = new LazyLoad({
- container: document.getElementById('article')
- });
-</script>
-{{ end }}
-<script>
- // var posts = document.getElementById('posts-list');
- // posts && quicklink({
- // el: posts,
- // priority: true,
- // });
-</script>
+
+<!-- 脚本 -->
+{{ partial "uselibs/vercel-analytics.html" . }}
+{{ partial "uselibs/swup.html" . }} \ No newline at end of file
diff --git a/themes/yinyang/layouts/partials/uselibs/swup.html b/themes/yinyang/layouts/partials/uselibs/swup.html
new file mode 100644
index 00000000..18f29152
--- /dev/null
+++ b/themes/yinyang/layouts/partials/uselibs/swup.html
@@ -0,0 +1,22 @@
+<script src="https://unpkg.com/swup@4"></script>
+<script type="module">
+ import { init } from '/js/waline.js'
+ const swup = new Swup();
+
+ swup.hooks.on('page:view', (visit) => {
+ if (!location.href.includes('/posts')) return;
+
+ const options = {
+ el: '#waline',
+ serverURL: 'https://waline.geedea.pro',
+ dark: 'auto',
+ pageview: true,
+ };
+
+ if (location.href.includes('localhost') || location.href.includes('127.0.0.1')) {
+ options.pageview = false;
+ }
+
+ init(options);
+ });
+</script>
diff --git a/themes/yinyang/layouts/partials/uselibs/vercel-analytics.html b/themes/yinyang/layouts/partials/uselibs/vercel-analytics.html
new file mode 100644
index 00000000..9fe89461
--- /dev/null
+++ b/themes/yinyang/layouts/partials/uselibs/vercel-analytics.html
@@ -0,0 +1,4 @@
+<script>
+ window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+</script>
+<script defer src="/_vercel/insights/script.js"></script> \ No newline at end of file
diff --git a/themes/yinyang/layouts/partials/uselibs/waline.html b/themes/yinyang/layouts/partials/uselibs/waline.html
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/themes/yinyang/layouts/partials/uselibs/waline.html