class-theme/tag.hbs

{{!< 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">
                                阅读全文 &rarr;
                            </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>