Add headless CMS for official site content management
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>
This commit is contained in:
242
resources/views/admin/articles/create.blade.php
Normal file
242
resources/views/admin/articles/create.blade.php
Normal file
@@ -0,0 +1,242 @@
|
||||
<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.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>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<form method="POST" action="{{ route('admin.articles.store') }}" enctype="multipart/form-data" class="space-y-6 p-6">
|
||||
@csrf
|
||||
|
||||
<!-- 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') }}" 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"
|
||||
placeholder="輸入文章標題">
|
||||
@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') }}"
|
||||
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="my-article-slug">
|
||||
@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') === 'blog' ? 'selected' : '' }}>部落格</option>
|
||||
<option value="notice" {{ old('content_type') === 'notice' ? 'selected' : '' }}>公告</option>
|
||||
<option value="document" {{ old('content_type') === 'document' ? 'selected' : '' }}>文件</option>
|
||||
<option value="related_news" {{ old('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"
|
||||
placeholder="文章摘要，顯示於列表頁">{{ old('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') }}</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>
|
||||
<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">
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">最大 5MB，支援 JPG, PNG, GIF, WebP</p>
|
||||
@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') }}"
|
||||
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="描述圖片內容（無障礙用途）">
|
||||
</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', [])) ? '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') }}"
|
||||
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') }}"
|
||||
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="顯示於文章的作者名稱">
|
||||
</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', 'public') === 'public' ? 'selected' : '' }}>公開（所有人可見）</option>
|
||||
<option value="members" {{ old('access_level') === 'members' ? 'selected' : '' }}>會員（需付費會籍）</option>
|
||||
<option value="board" {{ old('access_level') === 'board' ? 'selected' : '' }}>理事會（僅理事可見）</option>
|
||||
<option value="admin" {{ old('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') }}"
|
||||
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">
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">設定未來時間可排程發布</p>
|
||||
@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') }}"
|
||||
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"
|
||||
placeholder="搜尋引擎描述">{{ old('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') ? '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" style="display: none;">
|
||||
<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', 0) }}" 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">
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">數字越小越優先顯示</p>
|
||||
</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.index') }}" 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" name="save_action" value="draft" 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">
|
||||
儲存為草稿
|
||||
</button>
|
||||
<button type="submit" name="save_action" value="publish" 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>
|
||||
</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() {
|
||||
// EasyMDE Markdown Editor
|
||||
const easyMDE = new EasyMDE({
|
||||
element: document.getElementById('content'),
|
||||
spellChecker: false,
|
||||
autosave: {
|
||||
enabled: true,
|
||||
uniqueId: 'article-create',
|
||||
delay: 10000,
|
||||
},
|
||||
placeholder: '使用 Markdown 撰寫文章內容...',
|
||||
toolbar: [
|
||||
'bold', 'italic', 'heading', '|',
|
||||
'quote', 'unordered-list', 'ordered-list', '|',
|
||||
'link', 'image', 'table', '|',
|
||||
'preview', 'side-by-side', 'fullscreen', '|',
|
||||
'guide'
|
||||
],
|
||||
});
|
||||
|
||||
// Pin toggle
|
||||
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>
|
||||
284
resources/views/admin/articles/edit.blade.php
Normal file
284
resources/views/admin/articles/edit.blade.php
Normal file
@@ -0,0 +1,284 @@
|
||||
<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>
|
||||
184
resources/views/admin/articles/index.blade.php
Normal file
184
resources/views/admin/articles/index.blade.php
Normal file
@@ -0,0 +1,184 @@
|
||||
<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.create') }}" 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>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="mx-auto max-w-7xl 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
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-5">
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">總計</div>
|
||||
<div class="mt-2 text-3xl font-bold text-gray-900 dark:text-gray-100">{{ $stats['total'] }}</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">草稿</div>
|
||||
<div class="mt-2 text-3xl font-bold text-gray-600 dark:text-gray-400">{{ $stats['draft'] }}</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">已發布</div>
|
||||
<div class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">{{ $stats['published'] }}</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">已歸檔</div>
|
||||
<div class="mt-2 text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ $stats['archived'] }}</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">置頂中</div>
|
||||
<div class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $stats['pinned'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<form method="GET" action="{{ route('admin.articles.index') }}" class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div>
|
||||
<label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">搜尋</label>
|
||||
<input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="標題、內容..."
|
||||
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>
|
||||
<div>
|
||||
<label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">狀態</label>
|
||||
<select name="status" id="status" 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="">全部</option>
|
||||
<option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>草稿</option>
|
||||
<option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>已發布</option>
|
||||
<option value="archived" {{ request('status') === 'archived' ? 'selected' : '' }}>已歸檔</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="content_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">類型</label>
|
||||
<select name="content_type" id="content_type" 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="">全部</option>
|
||||
<option value="blog" {{ request('content_type') === 'blog' ? 'selected' : '' }}>部落格</option>
|
||||
<option value="notice" {{ request('content_type') === 'notice' ? 'selected' : '' }}>公告</option>
|
||||
<option value="document" {{ request('content_type') === 'document' ? 'selected' : '' }}>文件</option>
|
||||
<option value="related_news" {{ request('content_type') === 'related_news' ? 'selected' : '' }}>相關新聞</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">分類</label>
|
||||
<select name="category" id="category" 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="">全部</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2">
|
||||
<a href="{{ route('admin.articles.index') }}" 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>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">共 {{ $articles->total() }} 篇文章</p>
|
||||
</div>
|
||||
|
||||
<!-- Articles Table -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">文章</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">類型</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">狀態</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">建立者</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">瀏覽</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">建立時間</th>
|
||||
<th scope="col" class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
@forelse($articles as $article)
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
@if($article->is_pinned)
|
||||
<span class="mr-2 text-blue-500" title="置頂文章">📌</span>
|
||||
@endif
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
<a href="{{ route('admin.articles.show', $article) }}" class="hover:text-indigo-600 dark:hover:text-indigo-400">
|
||||
{{ $article->title }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ Str::limit(strip_tags($article->content), 60) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $article->getContentTypeLabel() }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
|
||||
@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>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $article->creator->name ?? 'N/A' }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $article->view_count }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $article->created_at->format('Y-m-d H:i') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
|
||||
<a href="{{ route('admin.articles.show', $article) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300">查看</a>
|
||||
@if($article->canBeEditedBy(auth()->user()))
|
||||
<a href="{{ route('admin.articles.edit', $article) }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">編輯</a>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
沒有找到文章。<a href="{{ route('admin.articles.create') }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">建立第一篇文章</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if($articles->hasPages())
|
||||
<div class="bg-white dark:bg-gray-800 px-4 py-3 border-t border-gray-200 dark:border-gray-700 sm:px-6">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
243
resources/views/admin/articles/show.blade.php
Normal file
243
resources/views/admin/articles/show.blade.php
Normal file
@@ -0,0 +1,243 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user