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>
285 lines
20 KiB
PHP
285 lines
20 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>
|
|
<a href="{{ route('admin.articles.show', $article) }}" 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>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="mx-auto max-w-4xl sm:px-6 lg:px-8 space-y-6">
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<form method="POST" action="{{ route('admin.articles.update', $article) }}" enctype="multipart/form-data" class="space-y-6 p-6">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
<!-- Title -->
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標題 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="title" id="title" value="{{ old('title', $article->title) }}" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
@error('title')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Slug -->
|
|
<div>
|
|
<label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">網址代碼</label>
|
|
<input type="text" name="slug" id="slug" value="{{ old('slug', $article->slug) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
@error('slug')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Content Type -->
|
|
<div>
|
|
<label for="content_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">文章類型 <span class="text-red-500">*</span></label>
|
|
<select name="content_type" id="content_type" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
<option value="blog" {{ old('content_type', $article->content_type) === 'blog' ? 'selected' : '' }}>部落格</option>
|
|
<option value="notice" {{ old('content_type', $article->content_type) === 'notice' ? 'selected' : '' }}>公告</option>
|
|
<option value="document" {{ old('content_type', $article->content_type) === 'document' ? 'selected' : '' }}>文件</option>
|
|
<option value="related_news" {{ old('content_type', $article->content_type) === 'related_news' ? 'selected' : '' }}>相關新聞</option>
|
|
</select>
|
|
@error('content_type')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div>
|
|
<label for="summary" class="block text-sm font-medium text-gray-700 dark:text-gray-300">摘要（選填）</label>
|
|
<textarea name="summary" id="summary" rows="3"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">{{ old('summary', $article->summary) }}</textarea>
|
|
@error('summary')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Content (Markdown Editor) -->
|
|
<div>
|
|
<label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">內容 <span class="text-red-500">*</span></label>
|
|
<textarea name="content" id="content" rows="15" required>{{ old('content', $article->content) }}</textarea>
|
|
@error('content')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Featured Image -->
|
|
<div>
|
|
<label for="featured_image" class="block text-sm font-medium text-gray-700 dark:text-gray-300">精選圖片</label>
|
|
@if($article->featured_image_path)
|
|
<div class="mt-2 mb-2">
|
|
<img src="{{ $article->featured_image_url }}" alt="{{ $article->featured_image_alt }}" class="max-h-48 rounded-md">
|
|
<label class="mt-2 inline-flex items-center">
|
|
<input type="checkbox" name="remove_featured_image" value="1"
|
|
class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-red-600 focus:ring-red-500 dark:bg-gray-900">
|
|
<span class="ml-2 text-sm text-red-600 dark:text-red-400">移除圖片</span>
|
|
</label>
|
|
</div>
|
|
@endif
|
|
<input type="file" name="featured_image" id="featured_image" accept="image/*"
|
|
class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 dark:file:bg-indigo-900/50 file:text-indigo-700 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900">
|
|
@error('featured_image')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Featured Image Alt -->
|
|
<div>
|
|
<label for="featured_image_alt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">圖片替代文字</label>
|
|
<input type="text" name="featured_image_alt" id="featured_image_alt" value="{{ old('featured_image_alt', $article->featured_image_alt) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">分類</label>
|
|
<div class="mt-2 space-y-2">
|
|
@foreach($categories as $category)
|
|
<label class="inline-flex items-center mr-4">
|
|
<input type="checkbox" name="categories[]" value="{{ $category->id }}"
|
|
{{ in_array($category->id, old('categories', $article->categories->pluck('id')->toArray())) ? 'checked' : '' }}
|
|
class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-900">
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ $category->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
<div>
|
|
<label for="tags_input" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標籤（逗號分隔）</label>
|
|
<input type="text" name="tags_input" id="tags_input"
|
|
value="{{ old('tags_input', $article->tags->pluck('name')->implode(', ')) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
|
|
placeholder="標籤1, 標籤2, 標籤3">
|
|
</div>
|
|
|
|
<!-- Author Name -->
|
|
<div>
|
|
<label for="author_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">作者名稱</label>
|
|
<input type="text" name="author_name" id="author_name" value="{{ old('author_name', $article->author_name) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
</div>
|
|
|
|
<!-- Access Level -->
|
|
<div>
|
|
<label for="access_level" class="block text-sm font-medium text-gray-700 dark:text-gray-300">存取權限 <span class="text-red-500">*</span></label>
|
|
<select name="access_level" id="access_level" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
<option value="public" {{ old('access_level', $article->access_level) === 'public' ? 'selected' : '' }}>公開</option>
|
|
<option value="members" {{ old('access_level', $article->access_level) === 'members' ? 'selected' : '' }}>會員</option>
|
|
<option value="board" {{ old('access_level', $article->access_level) === 'board' ? 'selected' : '' }}>理事會</option>
|
|
<option value="admin" {{ old('access_level', $article->access_level) === 'admin' ? 'selected' : '' }}>管理員</option>
|
|
</select>
|
|
@error('access_level')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Published At -->
|
|
<div>
|
|
<label for="published_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">發布時間</label>
|
|
<input type="datetime-local" name="published_at" id="published_at"
|
|
value="{{ old('published_at', $article->published_at?->format('Y-m-d\TH:i')) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
@error('published_at')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Expires At -->
|
|
<div>
|
|
<label for="expires_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">過期時間</label>
|
|
<input type="datetime-local" name="expires_at" id="expires_at"
|
|
value="{{ old('expires_at', $article->expires_at?->format('Y-m-d\TH:i')) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
@error('expires_at')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Meta Description -->
|
|
<div>
|
|
<label for="meta_description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SEO 描述</label>
|
|
<textarea name="meta_description" id="meta_description" rows="2"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">{{ old('meta_description', $article->meta_description) }}</textarea>
|
|
</div>
|
|
|
|
<!-- Is Pinned -->
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="is_pinned" id="is_pinned" value="1"
|
|
{{ old('is_pinned', $article->is_pinned) ? 'checked' : '' }}
|
|
class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-900">
|
|
<label for="is_pinned" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">置頂此文章</label>
|
|
</div>
|
|
|
|
<!-- Display Order -->
|
|
<div id="display_order_container">
|
|
<label for="display_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">顯示順序</label>
|
|
<input type="number" name="display_order" id="display_order"
|
|
value="{{ old('display_order', $article->display_order) }}" min="0"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-gray-700 pt-6">
|
|
<a href="{{ route('admin.articles.show', $article) }}" class="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">
|
|
取消
|
|
</a>
|
|
<button type="submit" class="rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
|
|
儲存變更
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Attachments Section -->
|
|
<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>
|
|
|
|
@if($article->attachments->count() > 0)
|
|
<div class="mb-4 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>
|
|
</div>
|
|
<form method="POST" action="{{ route('admin.articles.attachments.destroy', [$article, $attachment]) }}"
|
|
onsubmit="return confirm('確定要刪除此附件嗎？');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm">刪除</button>
|
|
</form>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('admin.articles.attachments.store', $article) }}" enctype="multipart/form-data" class="flex items-end space-x-3">
|
|
@csrf
|
|
<div class="flex-1">
|
|
<label for="attachment" class="block text-sm font-medium text-gray-700 dark:text-gray-300">上傳附件</label>
|
|
<input type="file" name="attachment" id="attachment" required
|
|
class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 dark:file:bg-indigo-900/50 file:text-indigo-700 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900">
|
|
</div>
|
|
<div>
|
|
<input type="text" name="description" placeholder="描述（選填）"
|
|
class="block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
|
|
</div>
|
|
<button type="submit" class="rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
|
|
上傳
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const easyMDE = new EasyMDE({
|
|
element: document.getElementById('content'),
|
|
spellChecker: false,
|
|
autosave: {
|
|
enabled: true,
|
|
uniqueId: 'article-edit-{{ $article->id }}',
|
|
delay: 10000,
|
|
},
|
|
placeholder: '使用 Markdown 撰寫文章內容...',
|
|
toolbar: [
|
|
'bold', 'italic', 'heading', '|',
|
|
'quote', 'unordered-list', 'ordered-list', '|',
|
|
'link', 'image', 'table', '|',
|
|
'preview', 'side-by-side', 'fullscreen', '|',
|
|
'guide'
|
|
],
|
|
});
|
|
|
|
const isPinnedCheckbox = document.getElementById('is_pinned');
|
|
const displayOrderContainer = document.getElementById('display_order_container');
|
|
|
|
function toggleDisplayOrder() {
|
|
displayOrderContainer.style.display = isPinnedCheckbox.checked ? 'block' : 'none';
|
|
}
|
|
|
|
isPinnedCheckbox.addEventListener('change', toggleDisplayOrder);
|
|
toggleDisplayOrder();
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|