gbanyan
a30af8eaf7
Integrate article and page management into the Laravel admin dashboard
to serve as a headless CMS for the Next.js frontend (usher-site).
Backend:
- 7 migrations: article_categories, article_tags, articles, pivots, attachments, pages
- 5 models with relationships: Article, ArticleCategory, ArticleTag, ArticleAttachment, Page
- 4 admin controllers: articles (with publish/archive/pin), categories, tags, pages
- Admin views with EasyMDE markdown editor, multi-select categories/tags
- Navigation section "官網管理" in admin sidebar
API (v1):
- GET /api/v1/articles (filtered by type, category, tag, search; paginated)
- GET /api/v1/articles/{slug} (with related articles)
- GET /api/v1/categories
- GET /api/v1/pages/{slug} (with children)
- GET /api/v1/homepage (aggregated homepage data)
- Attachment download endpoint
- CORS configured for usher.org.tw, vercel.app, localhost:3000
Content migration:
- ImportHugoContent command: imports Hugo markdown files as articles/pages
- Successfully imported 27 articles, 17 categories, 11 tags, 9 pages
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
244 lines
15 KiB
PHP
244 lines
15 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
|
|
文章詳情
|
|
</h2>
|
|
<div class="flex items-center space-x-2">
|
|
<a href="{{ route('admin.articles.index') }}" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
← 返回列表
|
|
</a>
|
|
@if($article->canBeEditedBy(auth()->user()))
|
|
<a href="{{ route('admin.articles.edit', $article) }}" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
|
|
編輯文章
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="mx-auto max-w-4xl sm:px-6 lg:px-8 space-y-6">
|
|
@if (session('status'))
|
|
<div class="rounded-md bg-green-50 dark:bg-green-900/50 p-4">
|
|
<p class="text-sm font-medium text-green-800 dark:text-green-200">{{ session('status') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="rounded-md bg-red-50 dark:bg-red-900/50 p-4">
|
|
<p class="text-sm font-medium text-red-800 dark:text-red-200">{{ session('error') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Article Content -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
|
@if($article->is_pinned)
|
|
<span class="text-blue-500" title="置頂文章">📌</span>
|
|
@endif
|
|
{{ $article->title }}
|
|
</h3>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300">
|
|
{{ $article->getContentTypeLabel() }}
|
|
</span>
|
|
<span class="inline-flex rounded-full px-3 py-1 text-sm font-semibold
|
|
@if($article->status === 'draft') bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300
|
|
@elseif($article->status === 'published') bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300
|
|
@else bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300
|
|
@endif">
|
|
{{ $article->getStatusLabel() }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if($article->featured_image_path)
|
|
<div class="mb-4">
|
|
<img src="{{ $article->featured_image_url }}" alt="{{ $article->featured_image_alt ?? $article->title }}" class="max-h-64 rounded-md">
|
|
</div>
|
|
@endif
|
|
|
|
@if($article->summary)
|
|
<div class="mb-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-md">
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">摘要</p>
|
|
<p class="text-gray-700 dark:text-gray-300">{{ $article->summary }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="prose dark:prose-invert max-w-none">
|
|
<div class="whitespace-pre-wrap text-gray-700 dark:text-gray-300">{{ $article->content }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if($article->categories->count() > 0)
|
|
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">分類：</span>
|
|
@foreach($article->categories as $category)
|
|
<span class="inline-flex rounded-full bg-indigo-100 dark:bg-indigo-900/50 px-2 py-1 text-xs font-semibold text-indigo-800 dark:text-indigo-300">{{ $category->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@if($article->tags->count() > 0)
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">標籤：</span>
|
|
@foreach($article->tags as $tag)
|
|
<span class="inline-flex rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-semibold text-gray-600 dark:text-gray-300">{{ $tag->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
@if($article->attachments->count() > 0)
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
|
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">附件</h4>
|
|
<div class="space-y-2">
|
|
@foreach($article->attachments as $attachment)
|
|
<div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 rounded-md p-3">
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $attachment->original_filename }}</span>
|
|
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">{{ number_format($attachment->file_size / 1024, 1) }} KB</span>
|
|
@if($attachment->description)
|
|
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">- {{ $attachment->description }}</span>
|
|
@endif
|
|
</div>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">下載 {{ $attachment->download_count }} 次</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Metadata -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
|
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">文章資訊</h4>
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">存取權限</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->getAccessLevelLabel() }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">瀏覽次數</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->view_count }}</dd>
|
|
</div>
|
|
@if($article->author_name)
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">作者</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->author_name }}</dd>
|
|
</div>
|
|
@endif
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">建立者</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->creator->name ?? 'N/A' }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">網址代碼</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $article->slug }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">建立時間</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->created_at->format('Y-m-d H:i:s') }}</dd>
|
|
</div>
|
|
@if($article->published_at)
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">發布時間</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
{{ $article->published_at->format('Y-m-d H:i:s') }}
|
|
@if($article->isScheduled())
|
|
<span class="ml-2 inline-flex rounded-full bg-blue-100 dark:bg-blue-900/50 px-2 py-1 text-xs font-semibold text-blue-800 dark:text-blue-300">排程中</span>
|
|
@endif
|
|
</dd>
|
|
</div>
|
|
@endif
|
|
@if($article->expires_at)
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">過期時間</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
{{ $article->expires_at->format('Y-m-d H:i:s') }}
|
|
@if($article->isExpired())
|
|
<span class="ml-2 inline-flex rounded-full bg-red-100 dark:bg-red-900/50 px-2 py-1 text-xs font-semibold text-red-800 dark:text-red-300">已過期</span>
|
|
@endif
|
|
</dd>
|
|
</div>
|
|
@endif
|
|
@if($article->lastUpdatedBy)
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">最後更新者</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->lastUpdatedBy->name }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">最後更新時間</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->updated_at->format('Y-m-d H:i:s') }}</dd>
|
|
</div>
|
|
@endif
|
|
@if($article->meta_description)
|
|
<div class="sm:col-span-2">
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">SEO 描述</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $article->meta_description }}</dd>
|
|
</div>
|
|
@endif
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
@if($article->canBeEditedBy(auth()->user()))
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
|
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">操作</h4>
|
|
<div class="flex flex-wrap gap-3">
|
|
@if($article->isDraft() && auth()->user()->can('publish_articles'))
|
|
<form method="POST" action="{{ route('admin.articles.publish', $article) }}">
|
|
@csrf
|
|
<button type="submit" class="inline-flex items-center rounded-md border border-transparent bg-green-600 dark:bg-green-500 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 dark:hover:bg-green-600">
|
|
發布文章
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
@if($article->isPublished() && auth()->user()->can('publish_articles'))
|
|
<form method="POST" action="{{ route('admin.articles.archive', $article) }}">
|
|
@csrf
|
|
<button type="submit" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
歸檔文章
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
@if(!$article->is_pinned && auth()->user()->can('edit_articles'))
|
|
<form method="POST" action="{{ route('admin.articles.pin', $article) }}">
|
|
@csrf
|
|
<button type="submit" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
📌 置頂文章
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
@if($article->is_pinned && auth()->user()->can('edit_articles'))
|
|
<form method="POST" action="{{ route('admin.articles.unpin', $article) }}">
|
|
@csrf
|
|
<button type="submit" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
取消置頂
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
@if(auth()->user()->can('delete_articles'))
|
|
<form method="POST" action="{{ route('admin.articles.destroy', $article) }}"
|
|
onsubmit="return confirm('確定要刪除此文章嗎？');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="inline-flex items-center rounded-md border border-transparent bg-red-600 dark:bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 dark:hover:bg-red-600">
|
|
刪除文章
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|