diff options
Diffstat (limited to 'layouts')
25 files changed, 1850 insertions, 0 deletions
diff --git a/layouts/layouts/404.html b/layouts/layouts/404.html new file mode 100644 index 0000000..76d46d9 --- /dev/null +++ b/layouts/layouts/404.html @@ -0,0 +1,29 @@ +{{ define "title" }}404{{ end }} {{ define "main" }} +<style> +footer{display:none} +.not-found { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; +} + +.not-found * { + margin: 2rem; + line-height: 0; + } + + h1 { + padding-bottom: 0.45em; + font-size: 5rem; + } + +</style> +<div class="not-found"> + <h1>🏝️</h1> + <h3>OHHHHH~ + </h3> + <h3>Who lives in a pineapple under the sea?</h3> +</div> +{{ end }} diff --git a/layouts/layouts/_default/_markup/render-image.html b/layouts/layouts/_default/_markup/render-image.html new file mode 100644 index 0000000..bf19bf9 --- /dev/null +++ b/layouts/layouts/_default/_markup/render-image.html @@ -0,0 +1,4 @@ +<figure class="image-caption"> + <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}"> + <figcaption>{{ .Text }}</figcaption> +</figure>
\ No newline at end of file diff --git a/layouts/layouts/_default/baseof.html b/layouts/layouts/_default/baseof.html new file mode 100644 index 0000000..72b2954 --- /dev/null +++ b/layouts/layouts/_default/baseof.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}"> + <head> + <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett" /> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + {{- partial "favicon.html" . -}} + <title>{{ .Title }}</title> + + {{- partial "seo_tags.html" . -}} + <meta name="referrer" content="no-referrer-when-downgrade" /> + + {{ with .OutputFormats.Get "rss" -}} {{ printf ` + <link rel="%s" type="%s" href="%s" title="%s" /> + ` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} {{- + partial "style.html" . -}} + + <!-- A partial to be overwritten by the user. + Simply place a custom_head.html into + your local /layouts/partials-directory --> + {{- partial "custom_head.html" . -}} + </head> + + <body> + <main>{{- block "main" . }}{{- end }}</main> + <footer>{{- partial "footer.html" . -}}</footer> + + <!-- A partial to be overwritten by the user. + Simply place a custom_body.html into + your local /layouts/partials-directory --> + {{- partial "custom_body.html" . -}} + </body> +</html> diff --git a/layouts/layouts/_default/list.html b/layouts/layouts/_default/list.html new file mode 100644 index 0000000..8c1db86 --- /dev/null +++ b/layouts/layouts/_default/list.html @@ -0,0 +1,70 @@ +{{ define "main" }} +<content> + {{ if .Site.Params.postSearch }} + <input + id="search-input" + type="text" + placeholder="Search..." + style="margin-top: 16px" + /> + <script> + // 等待 DOM 完全加载后执行 + document.addEventListener('DOMContentLoaded', function () { + // 缓存 DOM 元素 + const searchInput = document.getElementById('search-input'); + const posts = document.querySelectorAll('.blog-posts li'); + const years = document.querySelectorAll('.blog-posts h3'); + + // 更新搜索结果 + function updateSearchResults(searchTerm) { + let visiblePosts = 0; + const displayedYears = new Set(); + posts.forEach(function (post) { + const title = post.querySelector('a').textContent.toLowerCase(); + const year = post.querySelector('time').getAttribute('datetime').split('-')[0]; + if (title.includes(searchTerm)) { + post.style.display = ''; + visiblePosts++; + displayedYears.add(year); + } else { + post.style.display = 'none'; + } + }); + + {{ if .Site.Params.groupByYear }} + years.forEach(function (y) { + const year = y.textContent; + y.style.display = displayedYears.has(year) ? '' : 'none'; + }); + {{ end }} + } + + searchInput.addEventListener('input', function () { + updateSearchResults(this.value.toLowerCase().trim()); + }); + }); + </script> + {{ end }} + <ul class="blog-posts"> + {{ $currentYear := 0 }} {{ range .Pages }} {{ if and (not .Params.hidden) + (not (in .Params.categories "往昔")) }} + + <li> + <span + class="{{ if .Site.Params.groupByYear }} grouped {{ else }} ungrouped {{ end }}" + > + <i> + <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate> + {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }} + </time> + </i> + </span> + <a href="{{ .Permalink }}">{{ .Title }}</a> + </li> + + {{ end }} {{ else }} + <li>No posts yet</li> + {{ end }} + </ul> +</content> +{{ end }} diff --git a/layouts/layouts/_default/rss.xml b/layouts/layouts/_default/rss.xml new file mode 100644 index 0000000..e480a4b --- /dev/null +++ b/layouts/layouts/_default/rss.xml @@ -0,0 +1,82 @@ +{{- /* Deprecate site.Author.email in favor of site.Params.author.email */}} +{{- $authorEmail := "" }} +{{- with site.Params.author }} + {{- if reflect.IsMap . }} + {{- with .email }} + {{- $authorEmail = . }} + {{- end }} + {{- end }} +{{- else }} + {{- with site.Author.email }} + {{- $authorEmail = . }} + {{- warnf "The author key in site configuration is deprecated. Use params.author.email instead." }} + {{- end }} +{{- end }} + +{{- /* Deprecate site.Author.name in favor of site.Params.author.name */}} +{{- $authorName := "" }} +{{- with site.Params.author }} + {{- if reflect.IsMap . }} + {{- with .name }} + {{- $authorName = . }} + {{- end }} + {{- else }} + {{- $authorName = . }} + {{- end }} +{{- else }} + {{- with site.Author.name }} + {{- $authorName = . }} + {{- warnf "The author key in site configuration is deprecated. Use params.author.name instead." }} + {{- end }} +{{- end }} + +{{- $pctx := . }} +{{- if .IsHome }}{{ $pctx = .Site }}{{ end }} +{{- $pages := slice }} +{{- if or $.IsHome $.IsSection }} +{{- $pages = where $pctx.RegularPages "Type" "in" (slice "posts" "post") }} +{{- else }} +{{- $pages = where $pctx.Pages "Type" "in" (slice "posts" "post") }} +{{- end }} + +{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }} +<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> + <channel> + <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }}</title> + <link>{{ .Permalink }}</link> + <description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }}</description> + <generator>Hugo</generator> + <language>{{ site.LanguageCode }}</language> + {{ with $authorEmail }} + <managingEditor>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</managingEditor> + {{ end }} + {{ with $authorEmail }} + <webMaster>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</webMaster> + {{ end }} + {{ with .Site.Params.copyright }} + <copyright>{{ . }}</copyright> + {{ end }} + {{ if not .Date.IsZero }} + <lastBuildDate>{{ (index $pages.ByLastmod.Reverse 0).Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate> + {{ end }} + {{ if and .Site.Params.RSS.followFeedId .Site.Params.RSS.followUserId }} + <follow_challenge> + <feedId>{{ .Site.Params.RSS.followFeedId }}</feedId> + <userId>{{ .Site.Params.RSS.followUserId }}</userId> + </follow_challenge> + {{ end }} + {{- with .OutputFormats.Get "RSS" }} + {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }} + {{- end }} + {{- range $pages }} + <item> + <title>{{ .Title }}</title> + <link>{{ .Permalink }}</link> + <pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> + {{- with $authorEmail }}<author>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</author>{{ end }} + <guid>{{ .Permalink }}</guid> + <description>{{ .Content | transform.XMLEscape | safeHTML }}</description> + </item> + {{- end }} + </channel> +</rss> diff --git a/layouts/layouts/_default/single.html b/layouts/layouts/_default/single.html new file mode 100644 index 0000000..6b3f0a4 --- /dev/null +++ b/layouts/layouts/_default/single.html @@ -0,0 +1,319 @@ +{{ define "main" }} +<header>{{- partial "header.html" . -}}</header> + +<article class="h-entry"> +<h2 class="post-title"> + <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a> +</h2> + + <div class="e-content">{{ .Content }}</div> +</article> +<a class="u-url" href="{{ .Permalink }}" style="display: none">Permalink</a> + +<hr> + +{{ partial "post_meta.html" . }} + +{{ $upvoteEnabled := default .Site.Params.upvote .Params.upvote }} {{ if $upvoteEnabled }} +<div class="upvote-container"> + <small class="upvote"> + <button class="upvote-btn" id="upvote-btn"> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + width="24" + height="24" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + class="css-i6dzq1" + > + <polyline points="17 11 12 6 7 11"></polyline> + <polyline points="17 18 12 13 7 18"></polyline> + </svg> + <span class="upvote-count" id="upvote-count">0</span> + </button> + </small> +</div> + + +<script> + let hasUpvoted = false; + let upvoteBtn; + let upvoteCount; + + // 页面加载时获取点赞数量 + document.addEventListener("DOMContentLoaded", function () { + const slug = "{{ .Slug }}"; + upvoteBtn = document.getElementById("upvote-btn"); + upvoteCount = document.getElementById("upvote-count"); + getCount(slug); + + // 处理点赞按钮的点击事件 + upvoteBtn.addEventListener("click", handleUpvote); + }); + + // 点赞方法 + async function handleUpvote() { + if (hasUpvoted) { + console.log("You have already upvoted this post!"); + return; + } + const slug = "{{ .Slug }}"; + + // 禁用按钮以防止重复点击 + upvoteBtn.disabled = true; + // 给按钮添加 upvoted 类以赋以点击过的样式 + upvoteBtn.classList.add("upvoted"); + // 更新 upvote-count 的值 +1 + upvoteCount.innerText = parseInt(upvoteCount.innerText) + 1; + + try { + const response = await fetch("{{ .Site.Params.upvoteURL }}upvote", { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ postId: slug, diff: 1 }), + }); + + if (response.ok) { + console.log("Upvote successful!"); + hasUpvoted = true; + await getCount(slug, 3); + } else { + console.log("Upvote failed!"); + } + } catch (error) { + console.error("Error: ", error); + } finally { + upvoteBtn.disabled = false; + } + } + + // 获取 Upvote 数量的方法，支持设置重试次数，默认不重试 + async function getCount(slug, retryCount = 0) { + try { + const response = await fetch( + "{{ .Site.Params.upvoteURL }}count?post=" + slug, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }, + ); + + const data = await response.json(); + + if (data.code === 0) { + const count = data.data.count; + upvoteCount.innerText = count; + hasUpvoted = data.data.hasUpvoted; + if (hasUpvoted) { + upvoteBtn.classList.add("upvoted"); + } else { + upvoteBtn.classList.remove("upvoted"); + } + } else { + console.error("Failed to get upvote count: ", data.msg); + } + } catch (error) { + console.error("Error: ", error); + if (retryCount > 0) { + setTimeout(() => { + getCount(slug, retryCount - 1); + }, 1000); + } + } + } +</script> +{{ end }} + +<!-- Place the TOC at the end to ensure the article content loads first. --> +{{ $tocEnabled := default .Site.Params.toc .Params.toc }} {{ if $tocEnabled }} +<div class="toc">{{ partial "toc.html" . }}</div> +{{ end }} + +{{ if .Params.comments | default true }} +<div class="comments-and-webmentions"> + <details> + <summary> + <p style="display: inline">评论 与 Webmentions</p> + </summary> + <div id="giscus-container"></div> + + <div class="wm"> + <div id="webmentions"></div> + <script + src="/js/webmention.min.js" + data-id="webmentions" + data-page-url="https://www.glowisle.me{{ .RelPermalink }}" + data-max-webmentions="50" + data-wordcount="30" + data-sort-by="published" + data-sort-dir="up" + async + ></script> + + <p> + 若想回复本文，请在你的博客或社媒发布含有本文链接的帖子，然后在下方表单提交链接。 + </p> + <div class="wm-guide-content"> + <div class="webmention-form"> + <form + id="webmention-submit-form" + action="https://webmention.io/www.glowisle.me/webmention" + method="post" + > + <!-- 自动填充的目标文章链接 --> + <input + type="hidden" + name="target" + value="https://www.glowisle.me{{ .RelPermalink }}" + /> + <div> + <label for="webmention-source">你的文章链接：</label> + <input + type="url" + id="webmention-source" + name="source" + required + pattern="https?://.+" + /> + <button type="submit" id="webmention-submit-btn">提交</button> + </div> + <div id="webmention-form-feedback"></div> + </form> + <p> + 也可以<a href="mailto:i@glowisle.me?subject=回复《{{ .Title }}》">发送邮件</a>评论。 + </p> + <a href="https://indieweb.org/webmention" + >关于 Webmention 的更多信息</a + > + 以及 + <a href="https://www.glowisle.me/posts/tear-hypocrisy-apart/" + >为什么要这么做？</a + > + </div> + + <script> + function getInitialTheme() { + // 1. 优先检查 localStorage 中的用户偏好 + if ( + typeof localStorage !== "undefined" && + localStorage.getItem("theme") + ) { + return localStorage.getItem("theme"); + } + // 2. 检查系统偏好 + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + return "dark"; + } + // 3. 默认值 + return "light"; + } + + const currentTheme = getInitialTheme(); + const giscusTheme = currentTheme === "dark" ? "dark" : "light"; + + const giscusScript = document.createElement("script"); + giscusScript.src = "https://giscus.app/client.js"; + giscusScript.setAttribute( + "data-repo", + "yingyu5658/yingyu5658.github.io", + ); + giscusScript.setAttribute("data-repo-id", "R_kgDOOBetsA"); + giscusScript.setAttribute("data-category", "Announcements"); + giscusScript.setAttribute("data-category-id", "DIC_kwDOOBetsM4CoF_Z"); + giscusScript.setAttribute("data-mapping", "title"); + giscusScript.setAttribute("data-strict", "0"); + giscusScript.setAttribute("data-reactions-enabled", "0"); + giscusScript.setAttribute("data-emit-metadata", "0"); + giscusScript.setAttribute("data-input-position", "bottom"); + giscusScript.setAttribute("data-theme", giscusTheme); + giscusScript.setAttribute("data-lang", "zh-CN"); + giscusScript.crossOrigin = "anonymous"; + giscusScript.async = true; + + document.getElementById("giscus-container").appendChild(giscusScript); + + document.addEventListener("DOMContentLoaded", function () { + const form = document.getElementById("webmention-submit-form"); + const submitBtn = document.getElementById("webmention-submit-btn"); + const feedbackEl = document.getElementById( + "webmention-form-feedback", + ); + + if (!form) return; + + form.addEventListener("submit", async function (e) { + e.preventDefault(); + + // 禁用提交按钮防止重复提交 + const originalBtnText = submitBtn.textContent; + submitBtn.disabled = true; + submitBtn.textContent = "发送中..."; + + // 清除之前的反馈信息 + feedbackEl.textContent = ""; + + try { + // 使用 FormData 收集表单数据 + const formData = new FormData(form); + + // 发送 POST 请求 + const response = await fetch(form.action, { + method: "POST", + headers: { + Accept: "application/json", + }, + body: new URLSearchParams(formData), + }); + + const result = await response.json(); + + if (response.ok) { + // 成功响应 + feedbackEl.textContent = + "✅ 提交成功！Webmention 正在处理中。"; + form.reset(); + } else { + // 错误响应 + let errorMsg = "提交失败："; + if (result.error || result.summary) { + errorMsg += result.error || result.summary; + } + feedbackEl.textContent = errorMsg; + } + } catch (error) { + // 网络错误 + feedbackEl.textContent = + "❌ 提交过程中出现网络错误，请稍后重试。"; + } finally { + // 恢复提交按钮状态 + submitBtn.disabled = false; + submitBtn.textContent = originalBtnText; + } + }); + }); + </script> + + {{ end }} + </div> + </div> + </details> + + {{ if not .Params.comments }} + {{ with .Params.reason }} + <div class="reason"> + <p>评论区已关闭。</p> + <strong>{{ . | markdownify }}</strong> + </div> + {{ end }} + {{ end }} +</div> +{{ end }} diff --git a/layouts/layouts/_default/term.html b/layouts/layouts/_default/term.html new file mode 100644 index 0000000..0d55fc1 --- /dev/null +++ b/layouts/layouts/_default/term.html @@ -0,0 +1,36 @@ +{{ define "main" }} +<div class="taxonomy-term"> + <h2>{{ .Title }}</h2> + + <div class="posts-list"> + {{ range .Pages }} + + <li style="list-style-type: none; margin-bottom: 12px"> + <span + class="post-date" + {{ + if + .Site.Params.groupByYear + }} + grouped + {{ + else + }} + ungrouped + {{ + end + }} + > + <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate> + {{ .Date.Format "2006-01-02" }} + </time> + </span> + <a href="{{ .Permalink }}">{{ .Title }}</a> + </li> + + {{ else }} + <p>该分类下还没有文章。</p> + {{ end }} + </div> +</div> +{{ end }} diff --git a/layouts/layouts/archives/single.html b/layouts/layouts/archives/single.html new file mode 100644 index 0000000..698fc46 --- /dev/null +++ b/layouts/layouts/archives/single.html @@ -0,0 +1,96 @@ +{{ define "main" }} +<header>{{- partial "header.html" . -}}</header> +<content> + {{ if .Site.Params.postSearch }} + <input + id="search-input" + type="text" + placeholder="搜索文章..." + style="margin-top: 16px" + /> + <script> + document.addEventListener('DOMContentLoaded', function () { + const searchInput = document.getElementById('search-input'); + const posts = document.querySelectorAll('.blog-posts li'); + const years = document.querySelectorAll('.blog-posts h3'); + + function updateSearchResults(searchTerm) { + let visiblePosts = 0; + const displayedYears = new Set(); + + posts.forEach(function (post) { + const titleLink = post.querySelector('a'); + const timeElement = post.querySelector('time'); + + if (titleLink && timeElement) { + const title = titleLink.textContent.toLowerCase(); + const year = timeElement.getAttribute('datetime').split('-')[0]; + + if (title.includes(searchTerm)) { + post.style.display = ''; + visiblePosts++; + displayedYears.add(year); + } else { + post.style.display = 'none'; + } + } + }); + + {{ if .Site.Params.groupByYear }} + years.forEach(function (y) { + const year = y.textContent; + y.style.display = displayedYears.has(year) ? '' : 'none'; + }); + {{ end }} + + {{ if .Site.Params.showPostCount }} + const countText = `找到 ${visiblePosts} 篇文章`; + const countElement = document.getElementById('post-count'); + if (countElement) { + countElement.innerHTML = countText; + } + {{ end }} + } + + if (searchInput) { + searchInput.addEventListener('input', function () { + updateSearchResults(this.value.toLowerCase().trim()); + }); + } + }); + </script> + {{ end }} {{ $allPosts := where .Site.RegularPages "Type" "eq" "posts" }} + {{ $excludePosts := where $allPosts "Params.categories" "intersect" (slice "1") }} + + {{ $postPages := $allPosts | complement $excludePosts }} {{ if + .Site.Params.showPostCount }} + <p id="post-count">共有 {{ len $postPages }} 篇文章</p> + {{ end }} + + <ul class="blog-posts"> + {{ if gt (len $postPages) 0 }} {{ $pagesToShow := $postPages.ByDate.Reverse + }} {{ $currentYear := 0 }} {{ range $pagesToShow }} {{ if .Date }} {{ $year + := .Date.Year }} {{ if and (.Site.Params.groupByYear) (ne $year + $currentYear) }} + <h3>{{ $year }}</h3> + {{ $currentYear = $year }} {{ end }} {{ end }} + + <li> + <span + class="{{ if .Site.Params.groupByYear }}grouped{{else}}ungrouped{{end}}" + > + <i> + <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate> + {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }} + </time> + </i> + </span> + <a href="{{ .Permalink }}">{{ .Title }}</a> + </li> + {{ end }} {{ else }} + <li>暂无文章</li> + {{ end }} + </ul> +</content> +<hr /> +{{ end }} diff --git a/layouts/layouts/index.html b/layouts/layouts/index.html new file mode 100644 index 0000000..2c47df5 --- /dev/null +++ b/layouts/layouts/index.html @@ -0,0 +1,3 @@ +{{ define "main" }} +<header>{{- partial "header.html" . -}}</header> +{{ .Content }} {{ end }} diff --git a/layouts/layouts/partials/custom_body.html b/layouts/layouts/partials/custom_body.html new file mode 100644 index 0000000..126375a --- /dev/null +++ b/layouts/layouts/partials/custom_body.html @@ -0,0 +1,3 @@ +<!-- A partial to be overwritten by the user. + Simply place a custom_body.html into + your local /layouts/partials-directory --> diff --git a/layouts/layouts/partials/custom_head.html b/layouts/layouts/partials/custom_head.html new file mode 100644 index 0000000..051d3d9 --- /dev/null +++ b/layouts/layouts/partials/custom_head.html @@ -0,0 +1,21 @@ +<meta name="msvalidate.01" content="2E1AACF009206F2DDBAAD4B98E881460" /> +<meta name="fediverse:creator" content="@Verdant@c7.io" /> +<link + rel="prefetch" + as="image" + href="https://www.blogsclub.org/badge/www.glowisle.me" +/> +<link href="https://github.com/yingyu5658" rel="me" /> +<link href="https://c7.io/@Verdant" rel="me" /> +<link + rel="webmention" + href="https://webmention.io/www.glowisle.me/webmention" +/> +<link + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" +/><link + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" +/> +<link rel="shortcut icon" href="/favicon.ico" /> diff --git a/layouts/layouts/partials/favicon.html b/layouts/layouts/partials/favicon.html new file mode 100644 index 0000000..ccf1a5d --- /dev/null +++ b/layouts/layouts/partials/favicon.html @@ -0,0 +1,2 @@ +{{ with .Site.Params.favicon }} +<link rel="shortcut icon" href="{{ . | absURL }}" />{{ end }} diff --git a/layouts/layouts/partials/footer.html b/layouts/layouts/partials/footer.html new file mode 100644 index 0000000..5cd0d54 --- /dev/null +++ b/layouts/layouts/partials/footer.html @@ -0,0 +1,8 @@ +<div class="copyright"> + {{ .Site.Params.footer.content }} + <div class="rss-icon"> + <a href="/rss"> + <i class="fa fa-rss"></i> + </a> + </div> +</div> diff --git a/layouts/layouts/partials/header.html b/layouts/layouts/partials/header.html new file mode 100644 index 0000000..1efdd22 --- /dev/null +++ b/layouts/layouts/partials/header.html @@ -0,0 +1,4 @@ +<a href="{{ "" | relURL }}" class="title"> + <h1>{{ .Site.Title }}</h1> +</a> +<nav>{{- partial "nav.html" . -}}</nav> diff --git a/layouts/layouts/partials/nav.html b/layouts/layouts/partials/nav.html new file mode 100644 index 0000000..96bf26b --- /dev/null +++ b/layouts/layouts/partials/nav.html @@ -0,0 +1,6 @@ +{{ range .Site.Menus.main }} +<a href="{{ .URL }}">{{ .Name }}</a> +{{ end }} +{{ with .Site.GetPage "/blog" }} +<a href="{{ "posts/" | relURL }}">Blog</a> +{{ end }} diff --git a/layouts/layouts/partials/post_meta.html b/layouts/layouts/partials/post_meta.html new file mode 100644 index 0000000..741efd2 --- /dev/null +++ b/layouts/layouts/partials/post_meta.html @@ -0,0 +1,39 @@ +{{ if ne (.Params.showMeta | default true) false }} +<div class="post-meta"> + + <div class="post-meta-item post-author"> + {{ with .Params.author | default "Verdant" }} + <p> + <svg t="1768726817979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4715" width="200" height="200"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="4716"></path></svg> + {{ . }} + </p> + {{ end }} + </div> + + <div class="post-meta-item post-date"> + <svg t="1768727464189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5925" width="200" height="200"><path d="M341.333333 170.666667h341.333334V85.333333h85.333333v85.333334h42.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333h42.666667V85.333333h85.333333v85.333334zM213.333333 341.333333v512h597.333334V341.333333H213.333333z m85.333334 128h85.333333v85.333334H298.666667v-85.333334z m170.666666 0h85.333334v85.333334h-85.333334v-85.333334z m170.666667 0h85.333333v85.333334h-85.333333v-85.333334z m0 170.666667h85.333333v85.333333h-85.333333v-85.333333z m-170.666667 0h85.333334v85.333333h-85.333334v-85.333333z m-170.666666 0h85.333333v85.333333H298.666667v-85.333333z" fill="#000000" p-id="5926"></path></svg> + <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> + + {{ .Date.Format "January 02, 2006" }} + </time> + </div> + + <div class="post-meta-item post-category"> + <svg t="1768727819011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7095" width="200" height="200"><path d="M85.312 153.6v716.8h853.376V288H471.36L364.416 153.6h-279.04zM0 64h404.288L511.36 198.4H1024V960H0V64z" fill="#262626" p-id="7096"></path></svg> + {{ range .Params.categories }} + {{ $url := printf "/categories/%s/" (. | urlize) }} + <a href="{{ $url }}" class="category-link">{{ . }}</a> + {{ end }} + </div> + + <div class="post-meta-item post-tag"> + <svg t="1768727897449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8070" width="200" height="200"><path d="M512 910.208L910.208 512 480.832 82.624l-378.816 24.448-19.776 373.376L512 910.208zM0 512L25.472 31.36 512 0l512 512-512 512-512-512z m293.376-128.96a85.952 85.952 0 1 0 0-171.904 85.952 85.952 0 0 0 0 171.904z" fill="#262626" p-id="8071"></path></svg> + {{ $tags := .GetTerms "tags" }} + {{ $len := len $tags }} + {{ range $index, $tag := $tags }} + <a href="{{ .Permalink }}">{{ $tag.LinkTitle }}</a> + {{ if lt (add $index 1) $len }}, {{ end }} + {{ end }} + </div> +</div> +{{ end }} diff --git a/layouts/layouts/partials/seo_tags.html b/layouts/layouts/partials/seo_tags.html new file mode 100644 index 0000000..06e90cd --- /dev/null +++ b/layouts/layouts/partials/seo_tags.html @@ -0,0 +1,15 @@ +<!-- Primary Meta Tags --> +<meta name="title" content="{{ with .Title }}{{ . }}{{ else }}{{ .Site.Title }}{{ end }}" /> +<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.Description }}{{ . }}{{ end }}{{ end }}{{ end }}" /> +<meta name="keywords" content="{{ if .IsPage }}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}" /> + +<link rel="canonical" href="{{ .Permalink }}"> + +<!-- Open Graph / Facebook --> +{{ template "_internal/opengraph.html" . }} + +<!-- Twitter --> +{{ template "_internal/twitter_cards.html" . }} + +<!-- Microdata --> +{{ template "_internal/schema.html" . }} diff --git a/layouts/layouts/partials/style.html b/layouts/layouts/partials/style.html new file mode 100644 index 0000000..470a611 --- /dev/null +++ b/layouts/layouts/partials/style.html @@ -0,0 +1,846 @@ +<style> + @font-face { + font-family: "Source Serif Pro"; + src: url("/fonts/SourceSerifPro-Regular.otf"); + } + + article p, .summary p { + line-height: 35px; + } + + div.footnotes hr::before { + content: "Footnotes"; + display: block; + font-size: 1.5em; + color: var(--bold-text-color); + margin-top: 16px; + + } + + .recent-posts-item { + margin: 0; + margin-bottom: 120px; + } + + .recent-post-title { + } + + .post-meta { + margin-top: 20px; + margin-bottom: 5px; + } + + .recent-item { + position: relative; + margin-bottom: 8px; + display: flex; + align-items: flex-start; + } + + .item-link { + width: 100%; + display: inline-block; + text-decoration: none; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + font-size: 1.6em; + word-wrap: break-word; + white-space: normal; + word-wrap: break-word; + } + + .post-title a.item-link { + width: 100%; + display: inline-block; + text-decoration: none; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + font-size: 1.25em; + word-wrap: break-word; + white-space: normal; + word-wrap: break-word; + + } + + .post-date { + font-size: 0.9em; + color: #666; + display: inline-block; + min-width: 80px; + flex-shrink: 0; + } + + .recent-empty { + text-align: center; + font-style: italic; + } + + @media (max-width: 720px) { + .post-date { + min-width: auto; + font-size: 0.85em; + } + + .item-link { + white-space: normal; + overflow: visible; + } + +} + + .post-meta-item svg { + display: inline; + width: var(--svg-size); + height: var(--svg-size); + } + + .post-meta-item { + margin-right: 0.8em; + display: inline-block; + font-size: var(--font-size-secondary); + } + + .post-tag a { + font-size: var(--font-size-secondary) !important; + } + .post-meta-item p { + margin: 0; + } + + .recent-posts .post-meta { + margin-bottom: 6em; + } + + :root { + --width-max: 700px; + --font-primary: "Source Serif Pro", "Source Han Serif SC", serif; + --font-secondary: monospace; + --font-size-primary: 1.15rem; + --font-size-secondary: 1rem; + --body-bg-color: #ffffff; + --bold-text-color: #222; + --body-text-color: #444; + --link-color: #222; + --link-visited-color: #222; + --table-border-color: #f2f2f2; + --table-th-bg-color: #f2f2f2; + --img-border-color: #f2f2f2; + --code-bg-color: #f2f2f2; + --code-text-color: #222; + --blockquote-border-color: #666; + --blockquote-text-color: #646464; + --upvoted-color: #fa8072; + --caption-text-color: #666; + --toc-text-color: #e5e5e5; + --toc-hover-color: #655e5e; + + --music-bg-hover-light: #e5e5e5; /* neutral-200 */ + --music-bg-light: rgba(229, 229, 229, 0.5); /* neutral-200/50 */ + --music-text-secondary: #666; + --music-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --summary-text-color: #4e4e4e; + --svg-size: 0.85em; + } + + .social-icons { + margin: 15px; + margin-top: 5px; + text-align: center; + } + + .social-icons a { + padding: 5px 5px; + } + + .booklist { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 20px; + } + + .booklist-item { + transform: translateZ(0); + transition: transform 0.25s, box-shadow 0.25s; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + + .booklist-item img { + height: 100%; + } + + .booklist-item:hover { + transform: translateY(-5px) translateZ(20px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + } + + .rss-icon { + display: inline; + font-size: 16px; + float: right; + font-family: var(--font-primary); + } + + img.missing { + display: none; + } + + nav a, + h1.post-title a, + .blog-posts li a { + text-decoration: none !important; + } + + nav a:hover, + .post-title a:hover, + .blog-posts a:hover { + text-decoration: underline 0.5px !important; + } + + .wm { + border: 1px #d0d7de solid; + border-radius: 0.25em; + padding-top: 0; + padding: 1.5vw; + background-color: #fffaed; + margin-top: 1vh; + } + + .wm p { + margin-top: 1px; + } + + article p, div.summary { + margin-top: 20px; + font-weight: 400; + } + + .item-link { + white-space: nowrap; + overflow: hidden; + } + + h1.post-title { + margin-top: 2vh; + margin-bottom: 10px; + } + + h1.post-title a { + font-weight: 700; + } + + .recent-list { + padding-left: 2vw; + } + + .recent-item { + list-style-type: none; + } + + .post-date { + display: inline; + } + + .post-date, + .post-date-shortcode { + margin-left: auto; + } + + .music-card img { + border: none !important; + } + + /* --- 主容器 --- */ + /* flex flex-col gap-2 */ + .music-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; + } + + /* --- 信息区域 (左侧) --- */ + /* flex gap-5 items-center */ + .music-info { + display: flex; + align-items: center; + gap: 1.25rem; + } + + /* 封面图 */ + /* w-15 h-15 rounded-lg shadow-lg m-0! */ + .music-cover { + width: 3.75rem; /* 15 * 0.25rem */ + height: 3.75rem; + border-radius: 0.5rem; + box-shadow: var(--music-shadow); + margin: 0 !important; + object-fit: cover; + } + + /* 文本信息 */ + .music-title { + margin: 0; + font-size: 1rem; /* text-size-base */ + font-weight: bold; + line-height: 1.2; + } + + .music-artist { + margin: 0; + font-size: 0.875rem; /* text-size-sm */ + color: var(--music-text-secondary); + } + + /* --- 链接区域 (右侧) --- */ + /* flex gap-2 items-center */ + .music-links { + display: flex; + align-items: center; + gap: 0.5rem; + } + + /* 链接按钮 */ + /* block rounded-full px-3 transition-colors no-underline! text-size-xs inline-flex gap-1 items-center bg... */ + .music-btn { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0 0.75rem; /* px-3 */ + height: 2rem; + border-radius: 9999px; /* rounded-full */ + text-decoration: none !important; + font-size: 0.75rem; /* text-size-xs */ + transition: background-color 0.3s ease; + + /* 浅色模式背景 */ + background-color: var(--music-bg-light); + color: inherit; + } + + .music-btn:hover { + background-color: var(--music-bg-hover-light); + } + + /* 图标 */ + /* w-3 h-3 m-0! */ + .music-icon { + display: block; + width: 0.75rem; + height: 0.75rem; + margin: 0 !important; + } + + /* 按钮文字 */ + .music-btn-text { + display: inline; + } + + /* --- 桌面端/大屏适配 (Media Query: md / min-width: 768px) --- */ + @media (min-width: 768px) { + /* 容器变为横向排列，两端对齐 */ + /* md:flex-row md:justify-between md:items-center */ + .music-card { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + /* 按钮在大屏下变为方形图标按钮 */ + /* md:p-4 */ + .music-btn { + padding: 1rem; + justify-content: center; + width: auto; + height: auto; + } + + /* 图标变大 */ + /* md:w-5 md:h-5 */ + .music-icon { + width: 1.25rem; + height: 1.25rem; + } + + /* 文字在大屏下隐藏 */ + /* md:hidden */ + .music-btn-text { + display: none; + } + } + + /* 暗色模式 */ + @media (prefers-color-scheme: dark) { + :root { + --summary-text-color: #c9c6c5; + --body-bg-color: #121212; + --bold-text-color: #eee; + --body-text-color: #e8e6e3; + --link-color: #ddd; + --link-visited-color: #c3b1ee; + --table-border-color: #999; + --table-th-bg-color: #999; + --img-border-color: #999; + --code-bg-color: #141414; + --code-text-color: #ddd; + --blockquote-border-color: #7b7b7b; + --blockquote-text-color: #acacac; + --caption-text-color: #aaa; + --toc-text-color: #373737; + --toc-hover-color: #cac3c3; + --music-bg-hover-dark: #525252; + --music-bg-dark: rgba(82, 82, 82, 0.5); + --music-text-secondary: #a3a3a3; + --color-background: var(--body-bg-color) !important; + } + + .post-meta-item svg { + filter: invert(1) hue-rotate(180deg); + } + + + + div.summary a { + text-decoration: underline 0.1px #888; + } + + strong { + font-weight: 650; + } + + .music-btn { + background-color: var(--music-bg-dark); + } + .music-btn:hover { + background-color: var(--music-bg-hover-dark); + } + + .category-link { + color: #dbdbdb; + } + + .wm { + background-color: #161b22; + border-color: #30363d; + color: var(--body-text-color); + padding: 10px; + } + + .wm input { + background-color: #010409; + border: #30363d 1px solid; + color: var(--body-text-color); + outline: none; + transition: border-color 0.2s ease-in-out; + } + + #webmention-source:focus { + border-color: var(--color-accent-fg, #0969da); + box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); + } + + .wm button { + color: var(--body-text-color); + background-color: #161b22; + border: #30363d 1px solid; + } + + .post-title a, + { + color: #fff !important; + } + + .post-summary { + color: var(--text-color-primary) !important; + } + + .post-item { + border-bottom: 1px solid #414141 !important; + } + + .pagination-link { + border: 1px solid #414141 !important; + } + + a { + font-weight: 500 !important; + } + } + + body { + font-family: var(--font-primary); + font-size: var(--font-size-primary); + margin: auto; + padding: 20px; + max-width: var(--width-max); + text-align: left; + background-color: var(--body-bg-color); + word-wrap: break-word; + overflow-wrap: break-word; + line-height: 1.6; + color: var(--body-text-color); + } + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + b { + color: var(--bold-text-color); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 16px 0; + margin-top: 1.5em; + } + + a { + color: var(--link-color); + cursor: pointer; + text-decoration: underline 0.2px #888; + transition-duration: 0.3s; + font-weight: 600; + } + + .posts-list li { + margin-bottom: 12px; + } + + .title { + text-align: left; + text-decoration: none !important; + } + + a.title h1 { + margin: 15px; + margin-left: 0; + font-size: 2.15em; + } + + header { + margin-top: 30px; + margin-bottom: 4vh; + + } + + .title:hover { + text-decoration: none; + } + + .title span { + font-weight: 400; + } + + nav { + text-align: left; + margin-bottom: 20px; + } + + nav a { + margin-right: 8px; + } + + textarea { + width: 100%; + font-size: 16px; + } + + input { + font-size: 14px; + } + + article { + line-height: 1.6; + } + + table { + width: 100%; + border-collapse: collapse; + border: 1px solid var(--table-border-color); + border-radius: 4px; + margin-top: 16px; + } + + th, + td { + border: 1px solid var(--table-border-color); + padding: 4px; + } + + th { + background-color: var(--table-th-bg-color); + } + + hr { + border: 0; + border-top: 1px dashed; + } + + img { + max-width: 100%; + display: block; + margin-left: auto; + margin-right: auto; + content-visibility: auto; + loading: lazy; + } + + img[src*="#minipic"] { + max-width: 50%; + margin-left: 0; + margin-right: auto; + } + + .image-caption figcaption { + text-align: center; + font-style: italic; + font-size: 0.8em; + margin-top: 0.6em; + color: var(--caption-text-color); + } + + .image-caption { + margin: auto; + } + + i { + font-style: normal; + } + + time { + font-family: var(--font-primary); + color: var(--body-text-color); + } + + code { + font-family: var(--font-secondary); + background-color: var(--code-bg-color); + color: var(--code-text-color); + padding: 2px; + border-radius: 4px; + } + + pre code { + display: block; + padding: 16px; + white-space: pre-wrap; + overflow-x: auto; + } + + div.highlight pre { + border-radius: 4px; + } + + div.highlight code { + background-color: var(--code-bg-color); + color: var(--code-text-color); + } + + blockquote { + /* border-left: 4px solid var(--blockquote-border-color); */ + color: var(--blockquote-text-color); + margin: 0; + margin-top: 17px; + padding-left: 20px; + font-style: normal; + } + + footer { + padding: 25px 0; + text-align: left; + font-size: var(--font-size-secondary); + } + + ul li:has(input) { + list-style-type: none; + margin-left: -25.5px; + } + + /* blog post list */ + ul.blog-posts { + list-style-type: none; + padding: unset; + } + + ul.blog-posts li { + display: flex; + margin-bottom: 8px; + } + + ul.blog-posts li span { + flex: 0 0 130px; + } + + ul.blog-posts li span.grouped { + flex: 0 0 80px; + } + + ul.blog-posts li a:visited { + color: var(--link-visited-color); + } + + ul.blog-posts a { + margin-left: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + /* TOC 样式 */ + div.toc { + position: fixed; /* 固定定位 */ + top: 50%; /* 垂直居中 */ + left: calc( + (100vw + var(--width-max)) / 2 + ); /* 水平定位，根据视口宽度和最大内容宽度计算 */ + transform: translateY(-50%); /* 垂直居中调整 */ + width: calc((90vw - var(--width-max)) / 2); /* 宽度计算 */ + max-height: 80vh; /* 最大高度为视口高度的80% */ + overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */ + border: none; /* 无边框 */ + padding: 0; /* 无内边距 */ + margin: 0; /* 无外边距 */ + z-index: 99; /* 设置堆叠顺序，确保在其他元素之上 */ + + /* 隐藏滚动条 */ + &::-webkit-scrollbar { + /* Webkit 浏览器（Chrome, Safari）滚动条样式 */ + display: none; /* 隐藏滚动条 */ + } + + -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */ + scrollbar-width: none; /* Firefox 隐藏滚动条 */ + } + + .toc-nav { + /* 目录导航容器样式 */ + padding: 1.5rem; /* 内边距 */ + } + + .toc-nav ul { + /* 目录导航无序列表样式 */ + list-style: none; /* 移除列表项标记 */ + padding: 0; /* 移除内边距 */ + margin: 0; /* 移除外边距 */ + } + + .toc-nav li { + /* 目录导航列表项样式 */ + margin: 8px 0; /* 上下外边距 */ + } + + .toc-nav a { + /* 目录链接样式 */ + display: block; /* 块级显示 */ + text-decoration: none; /* 无下划线 */ + color: transparent; /* 默认透明 */ + padding: 0 12px; /* 内边距 */ + transition: all 0.2s ease; /* 所有属性过渡效果 */ + font-size: 0.9rem; /* 字体大小 */ + line-height: 1.4; /* 行高 */ + text-align: left; /* 文本左对齐 */ + white-space: nowrap; /* 禁止换行 */ + overflow: hidden; /* 隐藏溢出内容 */ + text-overflow: ellipsis; /* 显示省略号 */ + max-width: 100%; /* 限制最大宽度 */ + } + + .toc-nav a { + color: var(--toc-text-color); /* hover时显示文字颜色 */ + } + + .toc-nav a::before { + /* 目录链接前的小横线样式 */ + content: ""; /* 生成内容 */ + display: inline-block; /* 行内块级显示 */ + width: 16px; /* 宽度 */ + height: 4px; /* 高度 */ + background-color: var(--toc-text-color); /* 灰色背景 */ + border-radius: 16px; /* 圆角 */ + margin-right: 12px; /* 右外边距 */ + vertical-align: middle; /* 垂直居中对齐 */ + } + + .toc-nav ul ul a::before { + /* 二级目录链接前的小横线样式 */ + width: 12px; /* 显示宽度 */ + margin-right: 16px; /* 调整右外边距，使其与默认 a::before 占据的总宽度一致 (12px + 12px = 24px) */ + } + + .toc-nav ul ul ul a::before { + /* 三级目录链接前的小横线样式 */ + width: 8px; /* 显示宽度 */ + margin-right: 20px; /* 调整右外边距，使其与默认 a::before 占据的总宽度一致 (8px + 16px = 24px) */ + } + + .toc-nav a, /* 活跃状态和鼠标悬停状态的目录链接样式 */ + .toc-nav a { + text-decoration: none; /* 无下划线 */ + color: var(--toc-hover-color); /* 文字颜色变为深灰色 */ + } + + .toc-nav a.active::before, /* 活跃状态和鼠标悬停状态的目录链接前小横线样式 */ + .toc-nav a:hover::before { + background-color: var(--toc-hover-color); /* 背景颜色变为深灰色 */ + } + + /* upvote button style */ + button.upvote-btn { + margin: 0; + margin-left: auto; + padding: 0; + border: none; + background: none; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + color: var(--body-text-color); + } + + button.upvoted { + color: var(--upvoted-color); + } + + span.upvote-count { + margin-top: -4px; + font-size: smaller; + } + + @media (max-width: 800px) { + img[src*="#minipic"] { + max-width: 100%; + margin-left: auto; + margin-right: auto; + } + + div.toc { + display: none; + } + } + + @media (max-width: 700px) { + .booklist { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + } + } + + @media (max-width: 400px) { + .booklist { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + } + } +</style> diff --git a/layouts/layouts/partials/toc.html b/layouts/layouts/partials/toc.html new file mode 100644 index 0000000..66936a4 --- /dev/null +++ b/layouts/layouts/partials/toc.html @@ -0,0 +1,91 @@ +{{/* 根据页面内容生成目录 */}} +{{ if and .TableOfContents (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }} +<nav class="toc-nav"> + {{ .TableOfContents }} +</nav> + +<script> + // 为目录添加平滑滚动和当前位置高亮 + document.addEventListener('DOMContentLoaded', function () { + const tocLinks = document.querySelectorAll('.toc-nav a'); + const headings = Array.from(tocLinks).map(link => { + const id = link.getAttribute('href').replace('#', ''); + return document.getElementById(id); + }).filter(h => h); + + // 平滑滚动 + tocLinks.forEach(link => { + link.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href').replace('#', ''); + const target = document.getElementById(targetId); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + + // 更新活动状态 + tocLinks.forEach(l => l.classList.remove('active')); + this.classList.add('active'); + } + }); + }); + + // 滚动时更新当前位置 + function updateActiveLink() { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const windowHeight = window.innerHeight; + + for (let i = headings.length - 1; i >= 0; i--) { + const heading = headings[i]; + const rect = heading.getBoundingClientRect(); + + if (rect.top <= 100) { + // 移除所有活动状态 + tocLinks.forEach(link => link.classList.remove('active')); + + // 高亮当前标题 + const activeLink = document.querySelector(`.toc-nav a[href="#${heading.id}"]`); + if (activeLink) { + activeLink.classList.add('active'); + + // 高亮所有父级标题 + let currentLi = activeLink.closest('li'); + while (currentLi) { + const parentLi = currentLi.parentElement.closest('li'); + if (parentLi) { + const parentLink = parentLi.querySelector('a'); + if (parentLink) { + parentLink.classList.add('active'); + } + currentLi = parentLi; + } else { + break; + } + } + } + break; + } + } + } + + // 节流函数 + let ticking = false; + function throttleScroll() { + if (!ticking) { + requestAnimationFrame(function () { + updateActiveLink(); + ticking = false; + }); + ticking = true; + } + } + + window.addEventListener('scroll', throttleScroll); + + // 初始化时更新一次 + updateActiveLink(); + }); +</script> +{{ end }}
\ No newline at end of file diff --git a/layouts/layouts/robots.txt b/layouts/layouts/robots.txt new file mode 100644 index 0000000..0326f5c --- /dev/null +++ b/layouts/layouts/robots.txt @@ -0,0 +1,2 @@ +User-Agent: * +Sitemap: {{ "sitemap.xml" | absURL }} diff --git a/layouts/layouts/shortcodes/archives-list.html b/layouts/layouts/shortcodes/archives-list.html new file mode 100644 index 0000000..b9767f7 --- /dev/null +++ b/layouts/layouts/shortcodes/archives-list.html @@ -0,0 +1,30 @@ +{{ $allPages := where .Site.RegularPages "Type" "in" (slice "posts" "blog") }} +{{ $visiblePages := where $allPages "Params.hidden" "!=" true }} +{{ $pagesToShow := $visiblePages.ByDate.Reverse }} + +<div class="archives-content"> + <h2>归档</h2> + + <p>共有 {{ len $pagesToShow }} 篇文章</p> + + <ul class="blog-posts"> + {{ $currentYear := 0 }} + {{ range $pagesToShow }} + {{ $year := .Date.Year }} + {{ if ne $year $currentYear }} + <h3>{{ $year }}</h3> + {{ $currentYear = $year }} + {{ end }} + <li> + <span> + <i> + <time datetime='{{ .Date.Format "2006-01-02" }}'> + {{ .Date.Format "2006-01-02" }} + </time> + </i> + </span> + <a href="{{ .Permalink }}">{{ .Title }}</a> + </li> + {{ end }} + </ul> +</div> diff --git a/layouts/layouts/shortcodes/book.html b/layouts/layouts/shortcodes/book.html new file mode 100644 index 0000000..45f806a --- /dev/null +++ b/layouts/layouts/shortcodes/book.html @@ -0,0 +1,9 @@ +<div class="booklist-item"> + {{ if .Get "url" }} + <a href="{{ .Get "url" }}"> + <img class="book-cover" src="{{ .Get "cover" }}" alt="图书封面" /> + </a> + {{ else }} + <img class="book-cover" src="{{ .Get "cover" }}" alt="图书封面" /> + {{ end }} +</div> diff --git a/layouts/layouts/shortcodes/music.html b/layouts/layouts/shortcodes/music.html new file mode 100644 index 0000000..583b0b0 --- /dev/null +++ b/layouts/layouts/shortcodes/music.html @@ -0,0 +1,37 @@ +<!-- 这里的代码来自 https://github.com/BigCoke233/geek-death-project/blob/master/layouts/_shortcodes/music.html --> +<!-- 为了适配需求，我做了部分修改 --> +<div class="music-card"> + <!-- Cover, title, artist --> + <div class="music-info"> + <img class="music-cover" + src="{{ .Get "cover" }}" loading="lazy" alt="Cover" /> + <div class="music-text"> + <h4 class="music-title">{{ .Get "title" }}</h4> + <p class="music-artist">{{ .Get "artist" }}</p> + </div> + </div> + + <!-- Links --> + <div class="music-links"> + {{ with .Get "apple" }} + <a href="{{ . }}" class="music-btn" target="_blank" title="在 Apple Music 中打开" data-tooltip> + <img src="/images/apple-music.png" loading="lazy" class="music-icon" alt="Apple Music" /> + <span class="music-btn-text">Apple Music</span> + </a> + {{ end }} + + {{ with .Get "netease" }} + <a href="{{ . }}" class="music-btn" target="_blank" title="在网易云音乐中打开" data-tooltip> + <img src="/images/netease-music.png" loading="lazy" class="music-icon" alt="Netease Music" /> + <span class="music-btn-text">网易云</span> + </a> + {{ end }} + + {{ with .Get "spotify" }} + <a href="{{ . }}" class="music-btn" target="_blank" title="在 Spotify 中打开" data-tooltip> + <img src="/images/spotify.png" loading="lazy" class="music-icon" alt="Spotify" /> + <span class="music-btn-text">Spotify</span> + </a> + {{ end }} + </div> +</div> diff --git a/layouts/layouts/shortcodes/recent-posts.html b/layouts/layouts/shortcodes/recent-posts.html new file mode 100644 index 0000000..b2a6637 --- /dev/null +++ b/layouts/layouts/shortcodes/recent-posts.html @@ -0,0 +1,24 @@ +{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} {{ +$recent := first 5 $pages.ByDate.Reverse }} + +<style> +.item-link { +word-wrap: break-word; + white-space: normal; + } +</style> + +<div class="recent-posts"> + {{ if $recent }} {{ range $index, $page := $recent }} + <div class="recent-posts-item"> + <h2 class="recent-post-title post-title"> + <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a> + </h2> + <div class="summary">{{ .Summary }}</div> + + {{ partial "post_meta.html" . }} + + {{ if not (eq (add $index 1) (len $recent)) }} {{ end }} {{ end }} {{ else }} + <div class="recent-empty">暂无文章</div> + {{ end }} +</div> diff --git a/layouts/layouts/shortcodes/word-count.html b/layouts/layouts/shortcodes/word-count.html new file mode 100644 index 0000000..38dbe0e --- /dev/null +++ b/layouts/layouts/shortcodes/word-count.html @@ -0,0 +1,41 @@ +{{ $scratch := newScratch }} {{ if eq (.Get 0) "posts" }} {{ range where +site.RegularPages "Type" "in" (slice "posts" "jottings" "readings" "tech") }} {{ +if not (in .Params.categories "！往昔！") }} {{ $scratch.Add "wordcount" .WordCount +}} {{ end }} {{ end }} {{ else if eq (.Get 0) "all" }} {{ range where +site.RegularPages "Type" "in" (slice "posts" "about" "newsgroup" "links" +"jottings" "readings" "tech") }} {{ if not (in .Params.categories "！往昔") }} {{ +$scratch.Add "wordcount" .WordCount }} {{ end }} {{ end }} {{ end }} {{ $count +:= $scratch.Get "wordcount" }} {{ if gt $count 0 }} {{ $count }} 字， {{/* +名著数据库（字数单位：汉字） */}} {{ $classics := slice (dict "name" "红楼梦" +"author" "曹雪芹" "country" "（中）" "words" 731017) (dict "name" "源氏物语" +"author" "紫式部" "country" "（日）" "words" 876000) (dict "name" "假面的告白" +"author" "三岛由纪夫" "country" "（日）" "words" 86000) (dict "name" "金阁寺" +"author" "三岛由纪夫" "country" "（日）" "words" 125000) (dict "name" +"了不起的盖茨比" "author" "菲茨杰拉德" "country" "（美）" "words" 49800) (dict +"name" "傲慢与偏见" "author" "简·奥斯汀" "country" "（英）" "words" 183000) +(dict "name" "呐喊" "author" "鲁迅" "country" "（中）" "words" 152000) (dict +"name" "罗生门" "author" "芥川龙之介" "country" "（日）" "words" 35800) (dict +"name" "老人与海" "author" "海明威" "country" "（美）" "words" 26800) (dict +"name" "简爱" "author" "夏洛蒂·勃朗特" "country" "（英）" "words" 322000) (dict +"name" "三国演义" "author" "罗贯中" "country" "（中）" "words" 640000) (dict +"name" "雪国" "author" "川端康成" "country" "（日）" "words" 78000) (dict "name" +"杀死一只知更鸟" "author" "哈珀·李" "country" "（美）" "words" 187000) (dict +"name" "1984" "author" "乔治·奥威尔" "country" "（英）" "words" 123000) (dict +"name" "围城" "author" "钱钟书" "country" "（中）" "words" 257000) (dict "name" +"我是猫" "author" "夏目漱石" "country" "（日）" "words" 402000) (dict "name" +"飘" "author" "玛格丽特·米切尔" "country" "（美）" "words" 802000) (dict "name" +"呼啸山庄" "author" "艾米莉·勃朗特" "country" "（英）" "words" 282000) }} {{/* +寻找最接近的名著 */}} {{ $closest := dict "diff" 999999999 "book" (index +$classics 0) }} {{ range $book := $classics }} {{ $ratio := div (float $count) +$book.words }} {{ if and (ge $ratio 0.8) (le $ratio 1.2) }} {{ $diff := sub +$ratio 1.0 }} {{ if lt $diff 0 }}{{ $diff = mul $diff -1 }}{{ end }} {{ if lt +$diff $closest.diff }} {{ $closest = dict "diff" $diff "book" $book }} {{ end }} +{{ end }} {{ end }} {{/* 输出对比结果 */}} {{ with $closest.book }} 约等于 《{{ +.name }}》 的{{ div (float $count) .words | printf "%.1f" }}倍 {{ else }} {{/* +未找到匹配时显示长度最接近的名著 */}} {{ $closestBook := index $classics 0 }} {{ +$minDiff := sub $count $closestBook.words }} {{ if lt $minDiff 0 }}{{ $minDiff = +mul $minDiff -1 }}{{ end }} {{ range $classics }} {{ $currDiff := sub $count +.words }} {{ if lt $currDiff 0 }}{{ $currDiff = mul $currDiff -1 }}{{ end }} {{ +if lt $currDiff $minDiff }} {{ $closestBook = . }} {{ $minDiff = $currDiff }} {{ +end }} {{ end }} ≈ {{ $closestBook.name }}{{ div (float $count) +$closestBook.words | printf "%.1f" }}倍 {{ end }} {{ else }} 0字 {{ end }} |