first initial commit
This commit is contained in:
114
tag.hbs
Normal file
114
tag.hbs
Normal file
@@ -0,0 +1,114 @@
|
||||
{{!< default}}
|
||||
{{!-- 上面的代码块表示该页面嵌套在 default.hbs 模板中 --}}
|
||||
|
||||
<div class="min-h-screen bg-white pb-20">
|
||||
{{#tag}}
|
||||
<header class="pt-20 pb-12 border-b border-slate-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
{{!--
|
||||
Ghost 的 Tag 颜色通常通过 slug 匹配类名
|
||||
或者在后台 Tag 设置里的 "Accent Color" 获取
|
||||
--}}
|
||||
<span class="px-4 py-1.5 rounded-full text-sm font-semibold tracking-wide
|
||||
{{#match slug "teacher"}}bg-purple-100 text-purple-800{{/match}}
|
||||
{{#match slug "student"}}bg-blue-100 text-blue-800{{/match}}
|
||||
{{#match slug "event"}}bg-amber-100 text-amber-800{{/match}}
|
||||
{{#match slug "special-event"}}bg-red-100 text-red-800{{/match}}
|
||||
{{^match slug "teacher"}}{{^match slug "student"}}bg-slate-100 text-slate-800{{/match}}{{/match}}">
|
||||
{{name}}
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-slate-900 tracking-tight mb-4">
|
||||
{{name}}专栏
|
||||
</h1>
|
||||
<p class="text-xl text-slate-500 max-w-3xl">
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
分享{{name}}的相关内容
|
||||
{{/if}}
|
||||
— 共 {{plural ../pagination.total empty='0 篇' singular='% 篇' plural='% 篇'}}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
{{/tag}}
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
|
||||
{{#if posts}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
|
||||
{{#foreach posts}}
|
||||
<article class="group cursor-pointer flex flex-col h-full {{post_class}}">
|
||||
<a href="{{url}}" class="block h-full">
|
||||
<div class="relative aspect-[16/10] w-full overflow-hidden bg-slate-100 rounded-lg mb-6">
|
||||
{{#if feature_image}}
|
||||
<img src="{{img_url feature_image size="m"}}" alt="{{title}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||
{{else}}
|
||||
<div class="w-full h-full bg-slate-200 flex items-center justify-center text-slate-400">No Image</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if featured}}
|
||||
<div class="absolute top-3 right-3 z-10">
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-bold bg-red-500 text-white shadow-lg">
|
||||
📌 置顶
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="flex flex-col flex-1">
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-blue-600 transition-colors leading-tight">
|
||||
{{title}}
|
||||
</h2>
|
||||
<p class="text-slate-500 line-clamp-3 leading-relaxed mb-4 flex-1">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
<div class="text-blue-600 font-medium text-sm flex items-center gap-1 mt-auto">
|
||||
阅读全文 →
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{!-- 分页控制 --}}
|
||||
{{#if pagination.pages}}
|
||||
{{#if pagination.total}}
|
||||
<div class="mt-20 flex justify-center items-center gap-6 border-t border-slate-100 pt-10">
|
||||
{{#if pagination.prev}}
|
||||
<a href="{{page_url pagination.prev}}" class="px-6 py-2.5 rounded-full border border-slate-200 text-slate-600 hover:border-blue-600 hover:text-blue-600 transition-colors text-sm font-medium">
|
||||
← 上一页
|
||||
</a>
|
||||
{{else}}
|
||||
<span class="px-6 py-2.5 rounded-full border border-slate-100 text-slate-300 cursor-not-allowed text-sm font-medium">
|
||||
← 上一页
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
<span class="text-slate-500 font-medium text-sm">
|
||||
第 <span className="text-slate-900">{{pagination.page}}</span> / {{pagination.pages}} 页
|
||||
</span>
|
||||
|
||||
{{#if pagination.next}}
|
||||
<a href="{{page_url pagination.next}}" class="px-6 py-2.5 rounded-full border border-slate-200 text-slate-600 hover:border-blue-600 hover:text-blue-600 transition-colors text-sm font-medium">
|
||||
下一页 →
|
||||
</a>
|
||||
{{else}}
|
||||
<span class="px-6 py-2.5 rounded-full border border-slate-100 text-slate-300 cursor-not-allowed text-sm font-medium">
|
||||
下一页 →
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{else}}
|
||||
<div class="py-20 text-center">
|
||||
<p class="text-slate-400 text-lg">该分类下暂无文章</p>
|
||||
<a href="{{@site.url}}" class="mt-4 inline-block text-slate-900 font-medium hover:underline">
|
||||
返回首页
|
||||
</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</main>
|
||||
</div>
|
||||
Reference in New Issue
Block a user