New design 202410

README.md

@@ -32,7 +32,6 @@ blog
 ├── archetypes/
 ├── assets/
 ├── content/
-├── content-static/
 ├── layouts/
 ├── static/
 └── hugo.toml

archetypes/default.md

@@ -1,5 +1,5 @@
 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
 date: {{ .Date }}
 lastmod: {{ .Date }}
 draft: true

archetypes/photo.md

@@ -1,5 +1,5 @@
 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
 date: {{ .Date }}
 lastmod: {{ .Date }}
 location:

archetypes/writing.md

@@ -1,5 +1,5 @@
 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
 date: {{ .Date }}
 lastmod: {{ .Date }}
 description:

assets/scss/partials/_comments.scss

@@ -1,5 +1,6 @@
 #comments {
   margin-top: 3rem;
+  margin-bottom: 1rem;
   overflow-wrap: break-word;
   text-align: initial;
 }

assets/scss/style.scss

@@ -10,42 +10,24 @@
   navigation: auto;
 }
 
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes fade-out {
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slide-in {
-  from {
-    transform: translateY(30px);
-  }
-}
+.skip-to-content-link {
+  position: absolute;
+  z-index: 100;
+  padding: .5em;
+  transform: translateY(-200%);
+  transition: transform 0.3s;
+  background-color: var(--c-bg-alt);
 
-@keyframes slide-out {
-  to {
-    transform: translateY(-30px);
+  &:focus {
+    transform: translateY(0);
   }
 }
 
-::view-transition-old(root) {
-  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out;
-}
-
-::view-transition-new(root) {
-  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in;
-}
-
 html {
   -moz-tab-size: 4;
   tab-size: 4;
   scroll-behavior: smooth;
+  line-height: 1.7;
   --c-bg: #f3f6f6;
   --c-bg-alt: #dee8e5;
   --c-txt: #545250;
@@ -55,14 +37,10 @@ html {
 }
 
 body {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
   margin: 0;
   padding: 1rem;
   min-height: 100vh;
   min-height: 100dvh;
-  line-height: 1.7;
 }
 
 body,
@@ -106,7 +84,6 @@ h4,
 h5,
 h6 {
   font-weight: bold;
-  font-family: var(--fonts-serif);
   margin-bottom: 1rem;
 }
 
@@ -289,180 +266,87 @@ textarea {
   height: 1em;
 }
 
-// Layouts
-//
 .wrapper {
-  max-width: 48rem;
-  width: 100%;
-  margin: auto;
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
-
-  >main {
-    flex-grow: 1;
-  }
 }
 
 .site-header {
-  display: none;
-  border-right: 2px solid var(--c-bg-alt);
-  color: var(--c-txt-alt);
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.header-inner {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  padding-bottom: 1rem;
+  margin-bottom: .5rem;
+  line-height: 1.2;
+  border-bottom: 1px solid var(--c-bg-alt);
   view-transition-name: site-header;
 }
 
-.site-nav {
-  margin: 0 0 2em;
-  padding-right: 1rem;
-
-  a {
-    display: block;
-    padding: .25em 0;
-    border-bottom: 1px dotted var(--c-bg-alt);
-  }
-}
-
-.active {
-  &::after {
-    content: '※';
-    float: right;
-    margin-left: 1em;
-    color: var(--c-txt-alt2);
-  }
-}
-
-#TableOfContents {
-  margin-top: -.75em;
-  font-size: 90%;
-
-  ul {
-    padding-right: 1rem;
-  }
-
-  a {
-    display: block;
-  }
-}
-
-.back-btn {
-  display: inline-block;
-  width: 100%;
-  font-size: 125%;
-}
-
-h1 {
-  margin: 0 0 .25rem;
-  font-size: 162.5%;
-  line-height: 1.4;
-}
-
 .site-title {
-  margin-top: .5rem;
-}
-
-.section {
-  margin-top: 1.5rem;
+  font-weight: bold;
 }
 
-.section-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px dashed var(--c-bg-alt);
-
-  h2 {
-    margin: 0;
-  }
-
-  >object {
-    text-align: right;
+.site-nav {
+  display: none;
+  flex-grow: 1;
+  text-align: center;
 
-    >a {
-      display: block;
+  a {
+    position: relative;
+    margin: 0 .5rem;
+
+    &.active::after {
+      content: '*';
+      position: absolute;
+      top: 0;
+      right: -.5em;
+      font-size: 90%;
+      color: $accent;
     }
   }
 }
 
-a.section-title:hover {
-  border-color: $accent;
-}
-
-.post-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: .375em 0;
-  border-bottom: 1px dashed var(--c-bg-alt);
-  transition: border-color .3s;
-
-  &:hover {
-    border-color: $accent;
-  }
+.rss-icon {
+  text-align: right;
 }
 
-.post-title {
+.site-main {
   flex: 1;
 }
 
-.home-photo-group {
-  display: flex;
-  gap: .5em;
-  overflow-x: hidden;
-  flex-grow: 1;
-
-  &::after {
-    content: "";
-    display: block;
-    flex-grow: 1;
-  }
-
-  .home-photo-item {
-    max-height: 50px;
-    width: auto;
-  }
-}
-
-
 .site-footer {
-  padding-top: .5rem;
-  margin-top: 3rem;
-  border-top: 2px solid var(--c-bg-alt);
+  padding-top: 1rem;
+  margin-top: 2rem;
   font-size: 80%;
+  border-top: 1px solid var(--c-bg-alt);
+  view-transition-name: site-footer;
 }
 
-.description {
-  font-size: 75%;
-  font-style: italic;
+.page-title {
+  max-width: 48em;
+  margin: auto;
 }
 
-.post-info {
-  width: 14rem;
-  max-width: 100%;
-  padding-top: .5em;
-  margin-bottom: 1em;
-  font-size: 75%;
-  border-top: 2px solid var(--c-bg-alt);
+h1 {
+  margin: 1rem 0 .25rem;
+  font-size: 175%;
+  line-height: 1.4;
 }
 
-.post-tag {
-  margin-right: .5em;
-  margin-bottom: .5rem;
+.post-info {
+  font-size: 90%;
+  margin-bottom: 1rem;
 
-  &::before {
-    content: "#";
+  a {
+    margin-right: .25em;
+    &::before {
+      content: "#";
+    }
   }
 }
 
 .content {
-  text-justify: inter-ideograph; //For IE/Edge
+  max-width: 48em;
+  margin: auto;
   overflow-wrap: break-word;
 
   figure {
@@ -472,7 +356,7 @@ a.section-title:hover {
   }
 
   figcaption>p {
-    margin: 0;
+    margin: 0 0 1em;
     font-size: 75%;
     color: var(--c-txt-alt);
 
@@ -511,17 +395,33 @@ a.section-title:hover {
   }
 }
 
+// single.html
+//
+.toc-wrapper {
+  padding: .5rem;
+  margin: 1em 0;
+  border: 1px dashed var(--c-bg-alt);
+  font-size: 90%;
+}
 .footnotes {
-  font-size: 80%;
+  padding: .5rem .75rem;
   margin-top: 1.5rem;
+  font-size: 80%;
+  background: var(--c-bg-alt);
 
-  p {
-    margin: 0;
+  &::before {
+    content: "Footnotes";
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  hr {
+    display: none;
   }
 
-  hr::after {
-    content: "# FOOTNOTES #";
-    font-size: 1rem;
+  ol,
+  p {
+    margin: 0;
   }
 }
 
@@ -548,11 +448,50 @@ a.footnote-ref {
 
 .post-footer {
   margin-top: 3rem;
-  font-size: 80%;
+  font-size: 90%;
+
+  .post-item {
+    padding: 0;
+  }
 }
 
-// list.html for Photo section
+// list.html
 //
+.section {
+  max-width: 48em;
+  margin: 1.5rem auto 0;
+}
+
+.section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--c-txt-alt);
+
+  h2 {
+    margin: 0;
+  }
+
+  span {
+    font-size: 120%;
+  }
+}
+
+.post-item {
+  display: flex;
+  align-items: center;
+  gap: .5em;
+  padding: .25em 0;
+
+  time {
+    flex-shrink: 0;
+  }
+}
+
+.dotted-line {
+  flex: 1;
+  border-top: 2px dotted var(--c-bg-alt);
+}
 
 .album-row {
   display: flex;
@@ -568,67 +507,59 @@ a.footnote-ref {
   object-fit: cover;
 }
 
-@import "syntax.scss", "partials/comments";
-
-@media all and (min-width: 55em) {
-  body {
-    padding-top: 3rem;
-  }
+.home-photo-group {
+  display: flex;
+  gap: .5em;
+  overflow-x: hidden;
 }
 
-@media all and (min-width: 81em) {
-  body {
-    padding-top: 5rem;
-  }
+.home-photo-item {
+  max-height: 50px;
+  width: auto;
+}
 
-  .back-btn {
-    display: none;
-  }
+@import "syntax.scss", "partials/comments";
 
-  .site-title {
-    margin-top: 0;
+@media all and (min-width: 55em) {
+  .site-header {
+    grid-template-columns: 1fr 2fr 1fr;
   }
 
-  .site-header {
+  .site-nav {
     display: block;
-    flex-basis: 14rem;
   }
 
-  .header-inner {
-    position: sticky;
-    top: 1rem;
+  .site-main {
+    margin-top: 2rem;
   }
 
-  .wrapper {
-    flex-basis: 63rem;
-    max-width: 63rem;
-    margin: 0;
+  .site-footer {
+    display: flex;
+    justify-content: space-between;
   }
+}
 
-  .content>* {
-    max-width: 48rem;
+@media all and (min-width: 79em) {
+  .site-main {
+    margin-top: 5rem;
   }
 
-  .content>figure.big {
+  .page-title {
     max-width: 100%;
-    margin: 1rem 0;
-    text-align: left;
+    margin-bottom: 2rem;
+    text-align: center;
   }
 
-  .content>.highlight,
-  .content>pre,
-  .content>table {
-    max-width: 100%;
+  figure.big {
+    width: 76rem;
+    margin: 2rem 0 2rem -14rem;
   }
 
-  .post-info.writing {
-    float: right;
-    padding-top: 0;
-    border-top: none;
-    border-left: 2px solid var(--c-bg-alt);
+  figure.left {
+    margin-left: -14rem;
+  }
 
-    >li {
-      padding-left: 1em;
-    }
+  figure.right {
+    margin-right: -14rem;
   }
 }

hugo.toml

@@ -1,6 +1,5 @@
 baseURL = "https://zak.ee"
 title = "Zakee's Planet"
-staticDir = ["static", "content-static"]
 languageCode = "zh-CN"
 defaultContentLanguage = 'zh'
 hasCJKLanguage = true
@@ -35,35 +34,35 @@ copyright = "This work is licensed under a Creative Commons Attribution-NonComme
 [menu]
 
   [[menu.main]]
-    name = "主页 — Intro"
+    name = "Intro"
     pageref = "/"
     weight = 1
     [menu.main.params]
       description = "主页"
 
   [[menu.main]]
-    name = "文章 — Writing"
+    name = "Writing"
     pageref = "/writing"
     weight = 10
     [menu.main.params]
       description = "文章"
 
   [[menu.main]]
-    name = "照片 — Photo"
+    name = "Photo"
     pageref = "/photo"
     weight = 20
     [menu.main.params]
       description = "照片"
 
   [[menu.main]]
-    name = "联结 — Link"
+    name = "Link"
     pageref = "/link"
     weight = 30
     [menu.main.params]
       description = "联结"
 
   [[menu.main]]
-    name = "关于 — About"
+    name = "About"
     pageref = "/about"
     weight = 40
     [menu.main.params]

layouts/404.html

@@ -1,9 +1,12 @@
 {{ define "main" }}
-		<p>服务器找不到请求的页面，可能原因有:</p>
-		<ul>
-			<li>您可能输入了错误的网址;</li>
-			<li>网址已被转移;</li>
-			<li>网址从未存在。</li>
-		</ul>
-		<p>请再次检查网址，或返回<a title="主页" href="{{"" | relURL}}">主页</a>。</p>
+		<div class="content">
+			<h2>404.</h2>
+			<p>服务器找不到请求的页面，可能原因有:</p>
+			<ul>
+				<li>您可能输入了错误的网址;</li>
+				<li>网址已被转移;</li>
+				<li>网址从未存在。</li>
+			</ul>
+			<p>请再次检查网址，或返回<a title="主页" href="{{"" | relURL}}">主页</a>。</p>
+		</div>
 {{- end }}

layouts/_default/baseof.html

@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<meta name="color-scheme" content="dark light">
+	<meta name="color-scheme" content="light dark">
 	<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
 	{{ if .IsHome -}}
 	<meta name="keywords" content="{{ range .Keywords }}{{ . }}{{ end }}">
@@ -21,59 +21,42 @@
 	<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} - {{ end }}{{ .Site.Title }}{{ end }}</title>
 	<link rel="dns-prefetch" href="//pb.zak.ee">
 	<link rel="dns-prefetch" href="//seccdn.libravatar.org">
-	<link rel="openid.delegate" href="https://zak.ee/">
-	<link rel="openid.server openid2.provider" href="https://indieauth.com/openid">
-	<link rel="authorization_endpoint" href="https://indieauth.com/auth">
 	{{ range .AlternativeOutputFormats -}}
 	{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
 	{{ end -}}
-	{{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "css/style.css" . | toCSS | minify |
-	fingerprint -}}
-	<link rel="stylesheet" href="{{ $style.RelPermalink }}" {{ printf "integrity=%q" $style.Data.Integrity | safeHTMLAttr}}>
+	{{ with resources.Get "scss/style.scss" | toCSS | minify | fingerprint }}
+	<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
+	{{ end }}
 </head>
 
-<body>
-	<header class="site-header">
-		<div class="header-inner">
-			{{ with site.Menus.main -}}
-			<nav class="site-nav">
-				{{- range . }}
-				{{- if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
-				<a class="active" aria-current="page" href="{{ .URL }}" title="{{ .Params.description }}">{{ .Name }}</a>
-				{{- else }}
-				<a href="{{ .URL }}" title="{{ .Params.description }}">{{ .Name }}</a>
-				{{- end -}}
-				{{ end }}
-			</nav>
-			{{ end -}}
-			{{ if .Params.toc -}}
-			<details open>
-				<summary>目录</summary>
-				{{ .TableOfContents }}
-			</details>
-			{{- end }}
+<body class="wrapper">
+	<a class="skip-to-content-link tdln" href="#main">Skip to content</a>
+	<header class="site-header tdln">
+		<a href="{{"" | relURL}}" class="site-title">{{ .Site.Title }}</a>
+		{{ with site.Menus.main -}}
+		<nav class="site-nav">
+		{{- range . }}
+			{{- if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
+			<a class="active" aria-current="page" href="{{ .URL }}" title="{{ .Params.description }}">{{ .Name }}</a>
+			{{- else }}
+			<a href="{{ .URL }}" title="{{ .Params.description }}">{{ .Name }}</a>
+			{{- end -}}
+		{{ end }}
+		</nav>
+		{{ end -}}
+		<div class="rss-icon">
+			<a href="{{ "index.xml" | absURL }}" target="_blank" title="RSS"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
 		</div>
 	</header>
 
-	<div class="wrapper">
-		<main>
-			{{ if .IsHome -}}
-			<h1 class="site-title">{{.Title}}</h1>
-			{{ else -}}
-			<a title="主页" href="{{"" | relURL}}" class="tdln dim back-btn">←</a>
-			<h1>{{.Title}}</h1>
-			{{ end -}}
-			{{ block "main" . }}
-			{{ end }}
-		</main>
-		<footer class="site-footer">
-			<ul class="lsn dim">
-				<li>&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author.name }}</a>. Content licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank" rel="noopener">CC BY-NC 4.0</a>.</li>
-				<li>Check "<a href="/about/" title="关于">About</a>" to learn more. Keep track via <a href="{{ "index.xml" | absURL }}" target="_blank">RSS</a>.</li>
-				<li class="tdln"><a href="https://xn--sr8hvo.ws/%F0%9F%90%A3%F0%9F%8E%91%F0%9F%8D%A5/previous">←</a> An <a href="https://xn--sr8hvo.ws/">IndieWeb Webring</a> 🕸💍 <a href="https://xn--sr8hvo.ws/%F0%9F%90%A3%F0%9F%8E%91%F0%9F%8D%A5/next">→</a></li>
-			</ul>
-		</footer>
-	</div>
+	<main class="site-main" id="main">
+		{{ block "main" . }}{{ end }}
+	</main>
+
+	<footer class="site-footer dim">
+		<div>&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author.name }}</a>. Content licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank" rel="noopener">CC BY-NC 4.0</a>.</div>
+		<div><a href="https://xn--sr8hvo.ws/%F0%9F%90%A3%F0%9F%8E%91%F0%9F%8D%A5/previous">←</a> An <a href="https://xn--sr8hvo.ws/">IndieWeb Webring</a> 🕸💍 <a href="https://xn--sr8hvo.ws/%F0%9F%90%A3%F0%9F%8E%91%F0%9F%8D%A5/next">→</a></div>
+	</footer>
 
 	<script src="/js/instantpage-5.2.0.js" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
 </body>

layouts/_default/list.html

@@ -1,25 +1,26 @@
 {{ define "main" }}
+		<div class="page-title">
+			<h1>{{.Title}}</h1>
+		</div>
 		<div class="content">
 			{{ with .Content -}}{{ . }}{{ end }}
-			{{ range .Pages.GroupByDate "2006" -}}
-			<section class="section">
-				<div class="section-title">
-					<h2 id="{{ .Key }}">{{ .Key }}</h2>
-				</div>
-				<ul class="lsn">
-					{{ range .Pages -}}
-					<li class="post-item">
-						<a href="{{.RelPermalink}}" class="tdln post-title">
-							{{.Title}}
-							{{- with .Params.description -}}
-							<div class="description dim">{{ . }}</div>
-							{{ end -}}
-						</a>
-						<span class="dim">{{ .Date.Format "01/02" }}</span>
-					</li>
-					{{- end }}
-				</ul>
-			</section>
-			{{ end -}}
 		</div>
+		{{ range .Pages.GroupByDate "2006" -}}
+		<section class="section">
+			<div class="section-title">
+				<h2 id="{{ .Key }}">{{ .Key }}</h2>
+			</div>
+			<ul class="lsn">
+				{{ range .Pages -}}
+				<li>
+					<a href="{{.RelPermalink}}" class="post-item tdln">
+						<span>{{.Title}}</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ .Date.Format "01-02" }}</time>
+					</a>
+				</li>
+				{{- end }}
+			</ul>
+		</section>
+		{{ end -}}
 {{- end }}

layouts/_default/single.html

@@ -1,4 +1,7 @@
 {{ define "main" }}
+		<div class="page-title">
+			<h1>{{.Title}}</h1>
+		</div>
 		<div class="content">
 			{{ with .Content -}}{{ . }}{{ end }}
 			<ul class="lsn dim post-footer">

layouts/index.html

@@ -1,43 +1,43 @@
 {{ define "main" }}
-		{{ if .Content -}}
 		<div class="content">
-			{{ .Content }}
+			{{ with .Content -}}{{ . }}{{ end }}
 		</div>
-		{{- end }}
-		<section class="section content">
+		<section class="section">
 			<a href="{{"writing/" | relURL}}" class="tdln section-title">
 				<h2>Writing</h2>
-				<object width="24" height="24" title="RSS">
-					<a href="{{"writing/index.xml" | relURL}}" target="_blank" aria-label="RSS"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
-				</object>
+				<span>→</span>
 			</a>
 			<ul class="lsn">
 				{{ range first 3 (where site.RegularPages "Type" "in" "writing") -}}
-				<li class="post-item">
-					<a href="{{.RelPermalink}}" class="tdln post-title">{{.Title}}</a>
-					<span class="dim">{{ .Date.Format "2006/01/02" }}</span>
+				<li>
+					<a href="{{.RelPermalink}}" class="post-item tdln">
+						<span>{{.Title}}</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ .Date.Format "2006-01-02" }}</time>
+					</a>
 				</li>
-				{{ end }}
+				{{- end }}
 			</ul>
 		</section>
 		<section class="section content">
 			<a href="{{"photo/" | relURL}}" class="tdln section-title">
 				<h2>Photo</h2>
-				<object width="24" height="24" title="RSS">
-					<a href="{{"photo/index.xml" | relURL}}" target="_blank" aria-label="RSS"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
-				</object>
+				<span>→</span>
 			</a>
 			<ul class="lsn">
 				{{ range first 3 ((where site.RegularPages "Type" "in" "photo").ByParam "shot_date").Reverse -}}
-				<li class="post-item" >
-					<a href="{{ .RelPermalink }}" class="home-photo-group">
-						{{ with .Resources.Match "*thumbnail*" -}}
-						{{ range first 3 . -}}
-						<img src="{{.RelPermalink}}" loading="lazy" class="home-photo-item" alt="thumbnail" width="{{.Width}}" height="{{.Height}}">
-						{{- end }}
-						{{- end }}
+				<li>
+					<a href="{{ .RelPermalink }}" class="post-item tdln">
+						<span class="home-photo-group">
+							{{ with .Resources.Match "*thumbnail*" -}}
+							{{ range first 3 . -}}
+							<img src="{{.RelPermalink}}" class="home-photo-item" alt="thumbnail" width="{{.Width}}" height="{{.Height}}">
+							{{- end }}
+							{{- end }}
+						</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ dateFormat "2006-01-02" .Params.shot_date }}</time>
 					</a>
-					<span class="dim">{{ dateFormat "2006/01/02" .Params.shot_date }}</span>
 				</li>
 				{{ end }}
 			</ul>

layouts/photo/list.html

@@ -1,13 +1,13 @@
 {{ define "main" }}
-		{{ with .Content -}}
+		<div class="page-title">
+			<h1>{{.Title}}</h1>
+		</div>
 		<div class="content">
-			{{ . }}
+			{{ with .Content -}}{{ . }}{{ end }}
 		</div>
-		{{- end }}
-
 		{{- range (.Pages.ByParam "shot_date").Reverse}}
-		<section class="section">
-			<a href="{{ .RelPermalink }}" class="tdln section-title">
+		<section class="section tdln">
+			<a href="{{ .RelPermalink }}" class="section-title">
 				<h2>{{.Title}}</h2>
 			</a>
 			<a href="{{ .RelPermalink }}" class="album-row">
@@ -18,5 +18,5 @@
 				{{- end }}
 			</a>
 		</section>
-		{{- end }}
+		{{ end -}}
 {{- end }}

layouts/photo/single.html

@@ -1,8 +1,7 @@
 {{ define "main" }}
-		{{ with .Params.description -}}
-		<p class="description dim">{{ . }}</p>
-		{{ end -}}
-		<div class="content">
+		<div class="page-title">
+			<h1>{{.Title}}</h1>
+
 			<ul class="lsn dim post-info">
 				{{ with .Params.shot_date -}}
 				<li>
@@ -19,15 +18,37 @@
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> {{ . }}
 				</li>
 				{{ end -}}
+				{{ with .GetTerms "tags" }}
+				<li>
+					{{ range . }}<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}
+				</li>
+				{{ end -}}
 			</ul>
+			{{ with .Params.description -}}
+			<p class="dim">{{ . }}</p>
+			{{ end -}}
+		</div>
+		<div class="content">
 			{{ with .Content -}}{{ . }}{{ end }}
 			<ul class="lsn dim post-footer">
 				<li>/* 最后更新于{{ dateFormat "2006-01-02 15:04 MST" .Lastmod.UTC }} */</li>
 				{{- with .PrevInSection }}
-				<li>上一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+				<li>
+					<a href="{{.RelPermalink}}" class="post-item tdln">
+						<span>上一篇：{{.Title}}</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ .Date.Format "2006-01-02" }}</time>
+					</a>
+				</li>
 				{{- end }}
 				{{- with .NextInSection }}
-				<li>下一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+				<li>
+					<a href="{{.RelPermalink}}" class="post-item tdln">
+						<span>下一篇：{{.Title}}</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ .Date.Format "2006-01-02" }}</time>
+					</a>
+				</li>
 				{{- end }}
 			</ul>
 			{{ partialCached "comments.html" . }}

layouts/writing/single.html

@@ -1,7 +1,11 @@
 {{ define "main" }}
-		{{ with .Params.description -}}
-		<p class="description dim">{{ . }}</p>
-		{{ end -}}
+		<div class="page-title">
+			<h1>{{.Title}}</h1>
+			<div class="dim post-info">{{ dateFormat ":date_long" .Date.Local }} · {{ .WordCount }}字
+				{{- with .GetTerms "tags" }} · {{ range . }}<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end -}}
+				{{ end -}}
+			</div>
+		</div>
 		<div class="content">
 			{{ with .Params.featuredImage -}}
 			{{ with $.Resources.GetMatch . -}}
@@ -10,27 +14,32 @@
 			</figure>
 			{{ end -}}
 			{{ end -}}
-			<ul class="lsn dim post-info writing">
-				<li>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> {{ dateFormat ":date_long" .Date.Local }}
-				</li>
-				<li>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> {{ .WordCount }}字
-				</li>
-				{{ with .Params.tags -}}
-				<li>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg> {{ range . -}}<a href="{{ "tags/" | relURL }}{{ . | urlize }}" class="post-tag">{{.}}</a>{{ end }}
-				</li>
-				{{ end -}}
-			</ul>
+			{{ if .Params.toc -}}
+			<details class="toc-wrapper">
+				<summary>目录</summary>
+				{{ .TableOfContents }}
+			</details>
+			{{- end }}
 			{{ with .Content -}}{{ . }}{{ end }}
 			<ul class="lsn dim post-footer">
 				<li>/* 最后更新于{{ dateFormat "2006-01-02 15:04 MST" .Lastmod.UTC }} */</li>
 				{{- with .PrevInSection }}
-				<li>上一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+				<li>
+					<a href="{{.RelPermalink}}" class="post-item tdln">
+						<span>上一篇：{{.Title}}</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ .Date.Format "2006-01-02" }}</time>
+					</a>
+				</li>
 				{{- end }}
 				{{- with .NextInSection }}
-				<li>下一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+				<li>
+					<a href="{{.RelPermalink}}" class="post-item tdln">
+						<span>下一篇：{{.Title}}</span>
+						<span class="dotted-line"></span>
+						<time class="dim">{{ .Date.Format "2006-01-02" }}</time>
+					</a>
+				</li>
 				{{- end }}
 			</ul>
 			{{ partialCached "comments.html" . }}