145 lines
9.2 KiB
Handlebars
145 lines
9.2 KiB
Handlebars
{{!< default}}
|
|
|
|
{{#post}}
|
|
<main class="min-h-screen bg-white pb-24 pt-24">
|
|
|
|
{{!-- 顶部导航 --}}
|
|
<div class="container mx-auto max-w-7xl px-4 sm:px-6 mb-8">
|
|
<a href="{{@site.url}}" class="group inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">
|
|
<svg class="mr-1 h-4 w-4 transition-transform group-hover:-translate-x-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
返回首页
|
|
</a>
|
|
</div>
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" />
|
|
<article class="container mx-auto max-w-7xl px-4 sm:px-6 {{post_class}}">
|
|
|
|
{{!-- 1. 封面图 --}}
|
|
{{#if feature_image}}
|
|
<div class="mb-12 overflow-hidden rounded-2xl bg-slate-100">
|
|
<img
|
|
class="w-full h-auto object-cover max-h-[70vh]"
|
|
srcset="{{img_url feature_image size="s"}} 300w,
|
|
{{img_url feature_image size="m"}} 600w,
|
|
{{img_url feature_image size="l"}} 1000w,
|
|
{{img_url feature_image size="xl"}} 2000w"
|
|
sizes="(min-width: 1200px) 1200px, 90vw"
|
|
src="{{img_url feature_image size="xl"}}"
|
|
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
|
/>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{!-- 内容容器 --}}
|
|
<div class="mx-auto max-w-5xl">
|
|
|
|
{{!-- 文章头部 --}}
|
|
<header class="mb-10 border-b border-slate-100 pb-10">
|
|
<div class="mb-6 flex flex-wrap items-center gap-3">
|
|
{{#if primary_tag}}
|
|
{{#primary_tag}}
|
|
{{!-- 这里使用 tag-{{slug}} 类名，你可以在 CSS 中定义不同分类的颜色 --}}
|
|
<a href="{{url}}" class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold tag-{{slug}} bg-slate-100 text-slate-700">
|
|
<svg class="mr-1.5 h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
{{name}}
|
|
</a>
|
|
{{/primary_tag}}
|
|
{{/if}}
|
|
|
|
<span class="inline-flex items-center text-sm text-slate-500">
|
|
<svg class="mr-1.5 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="YYYY年MM月DD日"}}</time>
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="mb-6 text-3xl font-bold leading-tight text-slate-900 sm:text-4xl md:text-6xl">
|
|
{{title}}
|
|
</h1>
|
|
|
|
{{#if custom_excerpt}}
|
|
<p class="text-xl leading-relaxed text-slate-600 md:text-2xl">
|
|
{{custom_excerpt}}
|
|
</p>
|
|
{{/if}}
|
|
</header>
|
|
|
|
{{!-- 正文区域 --}}
|
|
<div class="gh-content gh-canvas max-w-none">
|
|
{{content}}
|
|
</div>
|
|
|
|
{{!-- 底部装饰 --}}
|
|
<div class="mt-16 flex items-center justify-between border-t border-slate-100 pt-8">
|
|
<div class="text-sm text-slate-400 flex items-center">
|
|
<svg class="mr-1.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
完 · 阅读时长 {{reading_time seconds="< 1 分钟" minutes="% 分钟"}}
|
|
</div>
|
|
|
|
{{!-- 这里插入分享按钮 --}}
|
|
<div class="relative inline-block" id="share-component">
|
|
<button id="share-btn" class="group flex items-center gap-2 rounded-full bg-slate-50 px-5 py-2 text-sm font-semibold text-slate-600 hover:bg-blue-600 hover:text-white transition-all duration-300 active:scale-95">
|
|
<svg class="h-4 w-4 transition-transform group-hover:rotate-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
|
</svg>
|
|
分享
|
|
</button>
|
|
|
|
{{!-- 下拉面板 --}}
|
|
<div id="share-panel" class="hidden absolute right-0 bottom-full mb-3 w-64 origin-bottom-right rounded-2xl bg-white p-4 shadow-2xl border border-slate-100 z-50">
|
|
<div class="flex items-center justify-between mb-4 px-1">
|
|
<span class="text-sm font-bold text-slate-800">分享至</span>
|
|
<button id="close-share" class="p-1 hover:bg-slate-100 rounded-full transition">
|
|
<svg class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-4 gap-2">
|
|
{{!-- 微博 --}}
|
|
<a href="https://service.weibo.com/share/share.php?url={{url absolute="true"}}&title={{encode title}}" target="_blank" class="flex flex-col items-center gap-1.5 hover:opacity-80">
|
|
<div class="w-11 h-11 rounded-2xl bg-red-50 text-red-500 flex items-center justify-center font-bold">微</div>
|
|
<span class="text-[11px] font-medium text-slate-500">微博</span>
|
|
</a>
|
|
{{!-- QQ --}}
|
|
<a href="https://connect.qq.com/widget/shareqq/index.html?url={{url absolute="true"}}&title={{encode title}}" target="_blank" class="flex flex-col items-center gap-1.5 hover:opacity-80">
|
|
<div class="w-11 h-11 rounded-2xl bg-blue-50 text-blue-500 flex items-center justify-center font-bold">Q</div>
|
|
<span class="text-[11px] font-medium text-slate-500">QQ</span>
|
|
</a>
|
|
{{!-- 微信二维码 --}}
|
|
<a href="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{url absolute="true"}}" target="_blank" class="flex flex-col items-center gap-1.5 hover:opacity-80">
|
|
<div class="w-11 h-11 rounded-2xl bg-green-50 text-green-600 flex items-center justify-center">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" /></svg>
|
|
</div>
|
|
<span class="text-[11px] font-medium text-slate-500">微信</span>
|
|
</a>
|
|
{{!-- 复制 --}}
|
|
<button id="copy-link" class="flex flex-col items-center gap-1.5 hover:opacity-80">
|
|
<div id="copy-icon-bg" class="w-11 h-11 rounded-2xl bg-slate-100 text-slate-600 flex items-center justify-center transition-colors">
|
|
<svg id="copy-svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg>
|
|
<svg id="check-svg" class="hidden h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
|
|
</div>
|
|
<span id="copy-text" class="text-[11px] font-medium text-slate-500">复制</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{!-- Ghost 原生评论区 --}}
|
|
{{#if comments}}
|
|
<section class="article-comments mt-16 pt-10 border-t border-slate-100">
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-8">参与讨论</h3>
|
|
{{comments}}
|
|
</section>
|
|
{{/if}}
|
|
</div>
|
|
</article>
|
|
</main>
|
|
{{/post}}
|
|
|
|
<script src="{{asset "js/share.js"}}"></script> |