diff options
Diffstat (limited to 'layouts/_default/single.html')
| -rw-r--r-- | layouts/_default/single.html | 369 |
1 files changed, 27 insertions, 342 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9ec00f3..3006c56 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,355 +1,40 @@ {{ define "main" }} -<header> -<a href="{{ "" | relURL }}" class="title"> - <p class="site-title">{{ .Site.Title }}</p> -</a> -<nav>{{- partial "nav.html" . -}}</nav> +<header class="post-header"> + <span class="site-title"><a href="{{ "" | relURL }}">{{ .Site.Title }}</a></span> + <nav>{{- partial "nav.html" . -}}</nav> </header> - -<style> -/* 底部声明区 */ -.h-entry ~ .info, -.h-entry ~ div:last-of-type { - margin-top: 2rem; - padding-top: 1rem; - font-size: 0.85rem; - line-height: 1.6; - color: var(--summary-text-color); - font-family: var(--font-secondary); -} - -.h-entry ~ .info p, -.h-entry ~ div:last-of-type p { - margin: 0.4rem 0; -} - -</style> +<hr> <article class="h-entry"> -<h1 class="post-title"> - <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a> -</h1> - -<div class="post-meta"> - <div class="post-meta-item post-date"> - <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> - {{ .Date.Format "January 02, 2006" }} - </time> + <header class="entry-meta"> + <h1 class="p-name post-title">{{ .Title }}</h1> + <div class="meta-line"> + <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> + {{ .Date.Format "2006-01-02" }} + </time> + + {{ with .Params.categories }} + <span class="meta-categories"> + [{{ range $index, $cat := . }}{{ if $index }} · {{ end }}<a href="/categories/{{ $cat | urlize }}/" class="p-category">{{ $cat }}</a>{{ end }}] + </span> + {{ end }} + </div> + </header> + + <div class="e-content entry-body"> + {{ .Content }} </div> - - <div class="post-meta-item post-category"> - - {{ range .Params.categories }} - {{ $url := printf "/categories/%s/" (. | urlize) }} -• - <a href="{{ $url }}" class="category-link">{{ . }}</a> - {{ end }} - </div> -</div> - - - <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', - 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> --> +<footer class="post-footer"> + <div class="post-declaration"> + <p>条目共享：遵循 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="license noopener">CC BY-NC-SA 4.0</a> 协议。</p> + <p>交流通道：向 <a href="mailto:im@verdant.ee?subject=回复《{{ .Title }}》">im@verdant.ee</a> 发送一封 <a href="https://useplaintext.email/">纯文本邮件</a>。</p> + </div> +</footer> - {{ if not .Params.comments }} - {{ with .Params.reason }} - <div class="reason"> - <p>评论区已关闭。</p> - <strong>{{ . | markdownify }}</strong> - </div> - {{ end }} - {{ end }} - <div class="info"> - <p>文章内容遵循 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 标准共享。</p> - <p>有想对我说的？向<a href="mailto:im@verdant.ee?subject=回复《{{ .Title }}》"> im@verdant.ee </a>发送一封<a href="https://useplaintext.email/ -">纯文本邮件</a>吧。</p> - </div> -</div> {{ end }} |