New design 2024

archetypes/writing.md

@@ -5,7 +5,7 @@ lastmod: {{ .Date }}
 description:
 draft: true
 toc: false
-featuredImage: false
+featuredImage:
 tags:
   - untagged
 ---

assets/scss/partials/_gallery.scss

@@ -1,33 +0,0 @@
-.album {
-  margin-top: 2rem;
-
-  h2 {
-    font-size: 1.25rem;
-    margin-bottom: .5em;
-  }
-}
-
-.album-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5em;
-}
-
-.img-tile {
-  height: 100px;
-  width: auto;
-  max-width: 100%;
-  object-fit: cover;
-}
-
-.album-header {
-  font-size: 90%;
-
-  .feather {
-    margin-right: .5em;
-  }
-}
-
-.album-desc {
-  margin-block: .5em;
-}

assets/scss/style.scss

@@ -19,20 +19,14 @@ body {
   --c-txt-alt: #72706e;
   --c-txt-alt2: rgba(114, 112, 110, .3);
   --c-txt-em: #333333;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
   margin: 0;
   padding: 1rem;
+  min-height: 100vh;
+  min-height: 100dvh;
   line-height: 1.7;
-  letter-spacing: .04rem;
-
-  >main {
-    margin-bottom: 3.5rem;
-  }
-
-  >section,
-  >nav,
-  >footer {
-    margin-block: 3.5rem;
-  }
 }
 
 body,
@@ -49,7 +43,7 @@ textarea {
 // Auto light/dark mode
 @media (prefers-color-scheme: dark) {
   body {
-    --c-bg: #1b1f23;
+    --c-bg: #1c1f21;
     --c-bg-alt: #313a3f;
     --c-txt: #bababa;
     --c-txt-alt: #8f8f8f;
@@ -67,54 +61,6 @@ textarea {
   }
 }
 
-// Layouts
-//
-.wrapper {
-  max-width: 48rem;
-  margin-inline: auto;
-}
-
-h1 {
-  margin-block: 1.5rem;
-  line-height: 1.4;
-  font-size: 1.75em;
-}
-
-#home-social a {
-  margin-right: 1rem;
-}
-
-.recent-posts-list {
-  li {
-    margin-top: .125rem;
-  }
-
-  span {
-    color: var(--c-txt-alt);
-    font-size: 75%;
-    font-style: italic;
-
-    &::before {
-      content: "/ ";
-      color: var(--c-txt-alt2);
-    }
-  }
-}
-
-.site-nav {
-  li {
-    margin-top: .125rem;
-  }
-
-  a {
-    display: block;
-  }
-}
-
-.site-footer {
-  font-size: 75%;
-}
-
 // Global style
 //
 h1,
@@ -125,7 +71,7 @@ h5,
 h6 {
   font-weight: bold;
   font-family: var(--fonts-serif);
-  color: var(--c-txt-em);
+  margin-bottom: 1rem;
 }
 
 ul,
@@ -136,22 +82,17 @@ ol {
 li::marker {
   font-size: 90%;
   color: var(--c-txt-alt);
-  letter-spacing: normal;
 }
 
 // lsn -> list-style: none
-ul.lsn {
+.lsn {
   list-style: none;
   padding-inline-start: 0;
-}
-
-// lsc -> list-style: circle
-ul.lsc {
-  list-style: circle;
+  margin: 0;
 }
 
 // tdln -> text-decoration-line: none
-a.tdln,
+.tdln,
 .tdln a {
   text-decoration-line: none;
 }
@@ -179,26 +120,12 @@ a {
   &:active {
     text-decoration-style: dashed;
   }
-
-  &.home {
-    position: absolute;
-    line-height: 1;
-    font-size: 75%;
-    font-style: italic;
-    text-decoration: none;
-    color: var(--c-txt-alt);
-
-    &:hover {
-      color: $accent;
-    }
-  }
 }
 
 pre,
 code,
 pre tt {
   font-family: var(--fonts-mono);
-  letter-spacing: normal;
 }
 
 pre {
@@ -223,9 +150,8 @@ code {
 }
 
 blockquote {
-  margin: 1.5em 1em;
+  margin: 1.5rem 1rem;
   font: italic 125% var(--fonts-serif);
-  letter-spacing: normal;
   color: var(--c-txt-alt);
 
   &::before {
@@ -233,7 +159,7 @@ blockquote {
     position: absolute;
     z-index: -1;
     line-height: 1;
-    font-size: 5rem;
+    font-size: 500%;
     transform: translate(-1rem, -1rem);
     color: var(--c-bg-alt);
   }
@@ -279,11 +205,12 @@ hr {
   border: none;
   text-align: center;
   color: var(--c-txt-alt2);
+  margin-left: 0;
 
   &::after {
     content: "* * *";
     display: block;
-    font-size: 1.5rem;
+    font-size: 150%;
   }
 }
 
@@ -326,22 +253,189 @@ textarea {
   height: 1em;
 }
 
+// Layouts
+//
+.wrapper {
+  max-width: 48rem;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  >main {
+    flex-grow: 1;
+  }
+}
+
+body>header {
+  display: none;
+  border-right: 2px solid var(--c-bg-alt);
+  color: var(--c-txt-alt);
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.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 {
+  font-size: 125%;
+}
+
+h1 {
+  margin: 0 0 .25rem;
+  font-size: 162.5%;
+  line-height: 1.4;
+}
+
+.section {
+  margin-top: 2rem;
+}
+
+.section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: .25rem;
+  border-bottom: 1px dashed var(--c-bg-alt);
+
+  h2 {
+    margin: 0;
+  }
+
+  >object {
+    text-align: right;
+    >a {
+      display: block;
+    }
+  }
+}
+
+a.section-title:hover {
+  border-color: $accent;
+}
+
+.post-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: .5em 0;
+  border-bottom: 1px dashed var(--c-bg-alt);
+  transition: border-color .3s;
+
+  &:hover {
+    border-color: $accent;
+  }
+}
+
+.post-title {
+  flex: 1;
+}
+
+.home-photo-group {
+  display: flex;
+  gap: .5em;
+  overflow-x: hidden;
+  height: 50px;
+  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);
+  font-size: 80%;
+}
+
+.description {
+  font-size: 75%;
+  font-style: italic;
+}
+
+.post-info {
+  width: 14rem;
+  max-width: 100%;
+  padding-top: .5em;
+  margin-bottom: 1em;
+  font-size: 75%;
+  border-top: 2px solid var(--c-bg-alt);
+}
+
+.post-tag {
+  margin-right: .5em;
+  margin-bottom: .5rem;
+
+  &::before {
+    content: "#";
+  }
+}
+
 .content {
   text-justify: inter-ideograph; //For IE/Edge
   overflow-wrap: break-word;
 
   figure {
     height: auto;
-    margin: 0;
+    margin: 0 0 .25rem;
     text-align: center;
   }
 
   figcaption>p {
-    margin-top: .1rem;
-    margin-bottom: 1rem;
+    margin: 0;
     font-size: 75%;
-    font-style: italic;
+    font-weight: bold;
     color: var(--c-txt-alt);
+
+    &::before {
+      content: "↑";
+      margin-right: .25em;
+      color: var(--c-txt-alt2);
+    }
   }
 
   figure.left {
@@ -372,45 +466,9 @@ textarea {
   }
 }
 
-.post-info {
-  margin-top: -1.25rem;
-  margin-bottom: 1rem;
-  font-size: 90%;
-
-  label {
-    cursor: pointer;
-  }
-}
-
-#toc-toggle {
-  display: none;
-}
-
-#toc {
-  display: none;
-  margin-top: .75rem;
-  border-top: 1px dashed var(--c-bg-alt);
-  border-bottom: 1px dashed var(--c-bg-alt);
-  font-style: italic;
-
-  a {
-    display: block;
-    color: var(--c-txt-alt);
-    text-decoration: none;
-
-    &:hover {
-      color: $accent;
-    }
-  }
-}
-
-#toc-toggle:checked+#toc {
-  display: block;
-}
-
 .footnotes {
   font-size: 80%;
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 
   p {
     margin: 0;
@@ -448,77 +506,78 @@ a.footnote-ref {
   font-size: 80%;
 }
 
-.post-tag {
-  margin-right: .5em;
-  margin-bottom: .5rem;
-
-  &::before {
-    content: "#";
-  }
-}
+// list.html for Photo section
+//
 
-.post-group {
-  margin-top: 2rem;
-  padding-left: 2px;
+.album-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5em;
+  margin-top: .5em;
 }
 
-.post-year {
-  margin-bottom: .5rem;
-  font-weight: bold;
-  letter-spacing: .125em;
+.img-tile {
+  height: 100px;
+  width: auto;
+  max-width: 100%;
+  object-fit: cover;
 }
 
-.post-list {
-  margin: 0;
-}
+@import "partials/comments";
 
-.post-item {
-  display: flex;
-  margin-bottom: .25rem;
-}
+@media all and (min-width: 34em) {}
 
-.post-day {
-  display: inline-block;
-  min-width: 4em;
+@media all and (min-width: 55em) {
+  body {
+    padding-top: 3rem;
+  }
 }
 
-@import "partials/comments", "partials/gallery";
+@media all and (min-width: 81em) {
+  .back-btn {
+    display: none;
+  }
 
-@media all and (min-width: 550px) {
-  .post-group {
-    display: flex;
-    gap: 1.5rem;
+  body>header {
+    display: block;
+    flex-basis: 14rem;
   }
-}
 
-@media all and (min-width: 880px) {
-  h1 {
-    margin-top: 4rem;
-    font-size: 2em;
+  .header-inner {
+    position: sticky;
+    top: 1rem;
   }
 
-  a.anchor {
-    float: left;
-    margin-left: -.75em;
+  .wrapper {
+    flex-basis: 63rem;
+    max-width: 63rem;
+    margin: 0;
   }
-}
 
-@media all and (min-width: 1300px) {
-  h1 {
-    margin-top: 8rem;
+  .content>* {
+    max-width: 48rem;
   }
 
-  figure.big {
-    width: 70rem;
-    margin-left: -10rem;
-    margin-block: 3rem;
+  .content>figure.big {
+    max-width: 100%;
+    margin: 1rem 0;
+    text-align: left;
   }
 
-  figure.left {
-    margin-left: -10rem;
+  .content>.highlight,
+  .content>pre,
+  .content>table {
+    max-width: 100%;
   }
 
-  figure.right {
-    margin-right: -10rem;
+  .post-info.writing {
+    float: right;
+    padding-top: 0;
+    border-top: none;
+    border-left: 2px solid var(--c-bg-alt);
+
+    >li {
+      padding-left: 1em;
+    }
   }
 }

hugo.toml

@@ -35,35 +35,35 @@ copyright = "This work is licensed under a Creative Commons Attribution-NonComme
 [menu]
 
   [[menu.main]]
-    name = "Home"
+    name = "主页 — Intro"
     pageref = "/"
     weight = 1
     [menu.main.params]
       description = "主页"
 
   [[menu.main]]
-    name = "Writing"
+    name = "文章 — Writing"
     pageref = "/writing"
     weight = 10
     [menu.main.params]
-      description = "文章归档"
+      description = "文章"
 
   [[menu.main]]
-    name = "Gallery"
-    pageref = "/gallery"
+    name = "照片 — Photo"
+    pageref = "/photo"
     weight = 20
     [menu.main.params]
-      description = "相册"
+      description = "照片"
 
   [[menu.main]]
-    name = "Link"
+    name = "联结 — Link"
     pageref = "/link"
     weight = 30
     [menu.main.params]
-      description = "链接与留言板"
+      description = "联结"
 
   [[menu.main]]
-    name = "About"
+    name = "关于 — About"
     pageref = "/about"
     weight = 40
     [menu.main.params]

layouts/404.html

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

layouts/_default/baseof.html

@@ -33,34 +33,46 @@
 </head>
 
 <body>
-	{{ if not .IsHome -}}
 	<header>
-		<a title="主页" href="{{"" | relURL}}" class="home">← {{.Site.Title}}</a>
-	</header>
-	{{- end -}}
-	{{ block "main" . }}
-	{{ end }}
-	{{- if not .IsHome }}
-	<hr>
-	{{- end }}
-	<nav class="wrapper site-nav">
-		<h2>Index / 索引</h2>
-		<ul class="lsc">
-			{{- range .Site.Menus.main -}}
-			<li>
+		<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>
-			</li>
+				{{- end -}}
+				{{ end }}
+			</nav>
+			{{ end -}}
+			{{ if .Params.toc -}}
+			<details open>
+				<summary>目录</summary>
+				{{ .TableOfContents }}
+			</details>
 			{{- end }}
-		</ul>
-	</nav>
-	<footer class="wrapper">
-		<h2>About / 关于</h2>
-		<ul class="lsn dim site-footer">
-			<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="{{ "writing/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>
+	</header>
+
+	<div class="wrapper">
+		<main>
+			{{ if not .IsHome -}}
+			<a title="主页" href="{{"" | relURL}}" class="tdln dim back-btn">←</a>
+			{{ end -}}
+			<h1>{{.Title}}</h1>
+			{{ 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>
+
 	<script src="/js/instantpage-5.2.0.js" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
 </body>
 

layouts/_default/list.html

@@ -1,24 +1,25 @@
 {{ define "main" }}
-	<main class="wrapper">
-		<h1>{{.Title}}</h1>
-		{{ if .Content -}}
 		<div class="content">
-			{{ .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>
-		{{- end }}
-
-		{{ range .Pages.GroupByDate "2006" -}}
-		<div class="post-group">
-			<div class="post-year" id="{{ .Key }}">{{ .Key }}</div>
-			<ul class="lsn post-list">
-				{{ range .Pages -}}
-				<li class="post-item">
-					<span class="dim post-day">{{ .Date.Format "01/02" }}</span>
-					<a href="{{.RelPermalink}}" class="post-title">{{.Title}}</a>
-				</li>
-				{{- end }}
-			</ul>
-		</div>
-		{{ end }}
-	</main>
 {{- end }}

layouts/_default/single.html

@@ -1,13 +1,9 @@
 {{ define "main" }}
-	<main class="wrapper">
-		<h1>{{.Title}}</h1>
-		{{ if .Content -}}
 		<div class="content">
-			{{ .Content }}
+			{{ with .Content -}}{{ . }}{{ end }}
+			<ul class="lsn dim post-footer">
+				<li>/* 最后更新于{{ dateFormat "2006-01-02 15:04 MST" .Lastmod.UTC }} */</li>
+			</ul>
+			{{ with .Params.comments -}}{{ partialCached "comments.html" . }}{{- end }}
 		</div>
-		{{- end }}
-		{{ with .Params.comments -}}
-		{{ partialCached "comments.html" . }}
-		{{- end }}
-	</main>
 {{- end }}

layouts/gallery/single.html

@@ -1,38 +0,0 @@
-{{ define "main" }}
-	<main class="wrapper">
-		<h1>{{.Title}}</h1>
-		<ul class="lsn dim album-header">
-			{{ with .Params.location -}}
-			<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-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>{{ . }}</li>
-			{{ end -}}
-			{{ with .Params.shot_date -}}
-			<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>{{ . }}</li>
-			{{ end -}}
-			{{ with .Params.shot_with -}}
-			<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-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 .Params.description -}}
-			<li class="album-desc">{{ . }}</li>
-			{{ end -}}
-		</ul>
-		{{ if .Content -}}
-		<div class="content">
-			{{ .Content }}
-		</div>
-		{{- end }}
-		<ul class="lsn dim post-footer">
-			<li>发布于{{ dateFormat "2006-01-02 15:04 MST" .Date.UTC }}，更新于{{ dateFormat "2006-01-02 15:04 MST" .Lastmod.UTC }}</li>
-			{{- with .Params.tags }}
-			<li>标&emsp;签：{{- range . -}}<a href="{{ "tags/" | relURL }}{{ . | urlize }}" class="post-tag">{{.}}</a>{{ end }}</li>
-			{{- end }}
-			{{- $list := (where site.RegularPages "Type" "in" "gallery") }}
-			{{- with ($list.ByParam "shot_date").Reverse.Prev . }}
-			<li>上一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-			{{- end }}
-			{{- with ($list.ByParam "shot_date").Reverse.Next . }}
-			<li>下一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-			{{- end }}
-		</ul>
-		{{ partialCached "comments.html" . }}
-	</main>
-{{- end }}

layouts/index.html

@@ -1,21 +1,45 @@
 {{ define "main" }}
-	<main class="wrapper">
-		<h1>{{.Title}}</h1>
 		{{ if .Content -}}
 		<div class="content">
 			{{ .Content }}
 		</div>
 		{{- end }}
-	</main>
-	<section class="wrapper">
-		<h2>Latest / 最新</h2>
-		<ul class="recent-posts-list lsc">
-			{{ range first 3 (where site.RegularPages "Type" "in" "writing") -}}
-			<li>
-				<a href="{{.RelPermalink}}">{{.Title}}</a>
-				<span>{{ .Date.Local.Format "2006-01-02" }}</span>
-			</li>
-			{{ end }}
-		</ul>
-	</section>
+		<section class="section content">
+			<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>
+			</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>
+				{{ 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>
+			</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 }}
+					</a>
+					<span class="dim">{{ dateFormat "2006/01/02" .Params.shot_date }}</span>
+				</li>
+				{{ end }}
+			</ul>
+		</section>
 {{- end }}

layouts/gallery/list.html → layouts/photo/list.html

@@ -1,24 +1,22 @@
 {{ define "main" }}
-	<main class="wrapper">
-		<h1>{{.Title}}</h1>
-		{{ if .Content -}}
+		{{ with .Content -}}
 		<div class="content">
-			{{ .Content }}
+			{{ . }}
 		</div>
 		{{- end }}
 
 		{{- range (.Pages.ByParam "shot_date").Reverse}}
-		<div class="album">
-			{{ $abulmLink := .RelPermalink -}}
-			<h2><a href="{{ $abulmLink }}" class="tdln">{{.Title}}</a></h2>
-			<a href="{{ $abulmLink }}" class="album-row">
+		<section class="section">
+			<a href="{{ .RelPermalink }}" class="tdln section-title">
+				<h2>{{.Title}}</h2>
+			</a>
+			<a href="{{ .RelPermalink }}" class="album-row">
 				{{ with .Resources.Match "*thumbnail*" -}}
 				{{ range . -}}
 				<img class="img-tile" loading="lazy" src="{{.RelPermalink}}" alt="thumbnail" width="{{.Width}}" height="{{.Height}}">
 				{{- end }}
 				{{- end }}
 			</a>
-		</div>
+		</section>
 		{{- end }}
-	</main>
 {{- end }}

layouts/photo/single.html

@@ -0,0 +1,35 @@
+{{ define "main" }}
+		{{ with .Params.description -}}
+		<p class="description dim">{{ . }}</p>
+		{{ end -}}
+		<div class="content">
+			<ul class="lsn dim post-info">
+				{{ with .Params.shot_date -}}
+				<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" . }}
+				</li>
+				{{ end -}}
+				{{ with .Params.location -}}
+				<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-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg> {{ . }}
+				</li>
+				{{ end -}}
+				{{ with .Params.shot_with -}}
+				<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-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 -}}
+			</ul>
+			{{ 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>
+				{{- end }}
+				{{- with .NextInSection }}
+				<li>下一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+				{{- end }}
+			</ul>
+			{{ partialCached "comments.html" . }}
+		</div>
+{{- end }}

layouts/shortcodes/photo.html

@@ -9,13 +9,12 @@
 			 {{- with $image.Height }} height="{{ . }}"{{ end -}}
 	/><!-- Closing img tag -->
 	<figcaption>
-		{{ with (.Get "title") -}}
+		{{- with (.Get "title") -}}
 		<h4>{{ . }}</h4>
 		{{ end -}}
-		{{- if or (.Get "caption") $image.Exif -}}
+		{{ if or (.Get "caption") $image.Exif -}}
 		<p>
 			{{- .Get "caption" | markdownify -}}
-			{{ end -}}
 			{{ with $image.Exif -}}
 			<span class="image_meta">
 				{{ with .Tags.Model }}{{.}} {{ end -}}
@@ -26,5 +25,6 @@
 			</span>
 			{{ end -}}
 		</p>
+		{{ end -}}
 	</figcaption>
 </figure>

layouts/writing/single.html

@@ -1,43 +1,38 @@
 {{ define "main" }}
-	<main class="wrapper">
-		<h1>{{.Title}}</h1>
-		<div class="dim post-info">
-			{{ dateFormat ":date_long" .Date.Local }}
-			{{- if .Params.toc -}}
-			&nbsp;&#183;
-			<label for="toc-toggle">目录</label>
-			<input type="checkbox" id="toc-toggle">
-			<div id="toc">
-				{{ .TableOfContents }}
-			</div>
-			{{- end }}
-		</div>
-		{{ if .Content -}}
+		{{ with .Params.description -}}
+		<p class="description dim">{{ . }}</p>
+		{{ end -}}
 		<div class="content">
 			{{ with .Params.featuredImage -}}
 			{{ with $.Resources.GetMatch . -}}
 			<figure class="big">
 				<img src="{{.RelPermalink}}" alt="featured image" width="{{.Width}}" height="{{.Height}}">
 			</figure>
-			{{- end }}
-			{{- end }}
-			{{ .Content }}
+			{{ 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>
+			{{ 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>
+				{{- end }}
+				{{- with .NextInSection }}
+				<li>下一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+				{{- end }}
+			</ul>
+			{{ partialCached "comments.html" . }}
 		</div>
-		{{- end }}
-		<ul class="lsn dim post-footer">
-			<li>发布于{{ dateFormat "2006-01-02 15:04 MST" .Date.UTC }}，更新于{{ dateFormat "2006-01-02 15:04 MST" .Lastmod.UTC }}</li>
-			<li>字&emsp;数：{{ .WordCount }}</li>
-			{{- with .Params.tags }}
-			<li>标&emsp;签：{{- range . -}}<a href="{{ "tags/" | relURL }}{{ . | urlize }}" class="post-tag">{{.}}</a>{{ end }}</li>
-			{{- end }}
-			<li></li>
-			{{- with .PrevInSection }}
-			<li>上一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-			{{- end }}
-			{{- with .NextInSection }}
-			<li>下一篇：<a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-			{{- end }}
-		</ul>
-		{{ partialCached "comments.html" . }}
-	</main>
 {{- end }}

vercel.json

@@ -11,6 +11,11 @@
       "destination": "/writing/$1",
       "permanent": true
     },
+    {
+      "source": "/gallery/(.*)",
+      "destination": "/photo/$1",
+      "permanent": true
+    },
     {
       "source": "/friends/",
       "destination": "/link/",